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

Question

如何使用Vue's config.errorHandler in combination with Sentry for Vue？

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

main.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 })]
});

Answer 2

这是另一种解决方法（特别是对于使用 Nuxt 插件的人）

const sentryErrorHandler = Vue.config.errorHandler
  Vue.config.errorHandler = (err, vm, info) => {
    sentryErrorHandler?.(err, vm, info) // allow execution of Sentry (or any other plugins) implementation of error handling
    // your implementation here...    
  }

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

Vue CLI 3 with Sentry - How to use Vue's config.errorHandler?

javascript

error-handling

sentry

vue.js