javascript - Vue CLI 3 with Sentry - 如何使用 Vue 的 config.errorHandler？

Question

如何使用 Vue's config.errorHandler结合Sentry for Vue ？

除了 Sentry 之外，我还想在应用程序中捕获错误，但是一旦我实现了 config.errorHandler，我就会覆盖 Sentry 实现。

ma​​in.js:

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "my dsn",
  integrations: [new Sentry.Integrations.Vue({ Vue })]
});

// This prevents sentry from being used
Vue.config.errorHandler = (msg, vm , info) => {
  alert(info)
}

Answer 1

当 Sentry 覆盖 Vue.config.errorHandler 时, 它保存对先前声明的引用 errorHandler并在 Sentry 处理错误后调用它。 source

在这种情况下，声明自定义 errorHandler应该在 Vue 之前完成构造函数已传递给 new Sentry.Integrations.Vue({ Vue }) .

对于上面的代码示例，只需切换自定义 errorHandler 的顺序和 Sentry.init()应该可以解决问题。

import * as Sentry from "@sentry/browser";    

Vue.config.errorHandler = (msg, vm , info) => {
  alert(info)
}

Sentry.init({
  dsn: "my dsn",
  integrations: [new Sentry.Integrations.Vue({ Vue })]
});