VueJS 2集成Sentry如何修改captureException上报的错误名称？

解决方案 #

你可以通过修改上报的Error实例的name属性实现自定义错误名称，有两种常用实现方式： #

方法1：直接修改Error实例属性（适合零散场景）

原生Error对象的name字段支持自定义覆写，Sentry会默认读取该字段作为错误名称展示，具体写法如下：

async allBays() {
  try {
    let response = await mapService.getBaysList();
    let bayList = response.data.data;
    if (bayList) {
      this.bays = bayList.map((list) => {
        return {
          value: { id: list.id, name: list.state },
          text: list.state,
        };
      });
    }
  } catch (e) {
    // 先创建错误实例
    const loadError = new Error("Could not load bays");
    // 自定义错误名称
    loadError.name = "Setup Error";
    Sentry.captureException(loadError, {
      tags: {
        section: "Farm Setup",
      },
    });
  }
},

方法2：自定义错误类（适合项目统一管理错误分类）

如果项目中有多处需要上报不同类型的自定义错误，可以提前定义继承自Error的自定义错误类，复用性更高：

// 可放在公共工具文件中全局定义
class SetupError extends Error {
  constructor(message) {
    super(message);
    // 固定错误名称
    this.name = "Setup Error";
  }
}

// 业务代码中直接使用
async allBays() {
  try {
    let response = await mapService.getBaysList();
    let bayList = response.data.data;
    if (bayList) {
      this.bays = bayList.map((list) => {
        return {
          value: { id: list.id, name: list.state },
          text: list.state,
        };
      });
    }
  } catch (e) {
    Sentry.captureException(new SetupError("Could not load bays"), {
      tags: {
        section: "Farm Setup",
      },
    });
  }
},

两种方式都可以完整保留错误描述、调用栈、自定义标签等信息，上报后Sentry的错误列表会直接展示你设置的Setup Error作为错误名称。

内容的提问来源于stack exchange，提问作者Michal Kubiak