CODEWITHSUNDEEP
javascriptvue.jserror-handlingsentry
C-Jay
C-Jay

Reputation: 681

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

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

Upvotes: 5

Views: 2756

Answers (2)

Mohammad Javad Khademian
Mohammad Javad Khademian

Reputation: 588

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

Upvotes: 0

aBiscuit
aBiscuit

Reputation: 4732

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

Upvotes: 5

Related Questions