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

Question

我该如何将Vue的config.errorHandler与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)
}

- C-Jay

---

你尝试过在自定义代码后的errorHandler结尾抛出一个错误吗？在你的情况下，可以使用throw msg。 - aBiscuit

@aBiscuit 是的，结果相同。 - C-Jay

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

- aBiscuit

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...    
  }

- Mohammad Javad Khademian