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

user_5872512 0
Viewed 2026

How can I use Vue's config.errorHandler in combination with Sentry for Vue?

I want to catch the errors in addition to Sentry in the app but as soon as I implement the config.errorHandler I overwrite the Sentry implementation.

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.js error-handling javascript
2 Answers

When Sentry overwrites Vue.config.errorHandler, it saves the reference to previously declared errorHandler and invokes it after error has been handled by Sentry. source

In such scenario, declaring custom errorHandler should be done before Vue constructor has been passed to new Sentry.Integrations.Vue({ Vue }).

For code example above, simply switching order of custom errorHandler and Sentry.init() should resolve the issue.

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

here is another way around (especially for who using Nuxt plugin)

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