如何将Vue’s 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)
}

解决方法:

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

在这种情况下,应在将Vue构造函数传递给新的Sentry.Integrations.Vue({Vue})之前声明自定义errorHandler.

对于上面的代码示例,只需切换自定义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 })]
});