How to capture all the errors thrown in Vue.JS SPA

Question

I am creating a webapp and trying to capture all the errors thrown anywhere in the vue.js webapp.

I was looking at errorHandler but it only captures error during render or watchers, as stated:

Assign a handler for uncaught errors during component render and watchers. The handler gets called with the error and the Vue instance.

Getting cue from this question, I wrote following code:

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
 console.log('Inside window.onerror')
 console.log(errorMsg, ' ', url, ' ', lineNumber, ' ', column, ' ', errorObj)
 return false
}

window.addEventListener('error', function (e) {
 console.log('Inside error Listener', e.message)
})

Above both gets called but I don't any details of the errors with these. in all the cases I get errorMessage as script error

What can be better way to get details of all the errors and send it to some centralised place like sentry.

Answer 1

You mentioned Sentry in your answer, and if your goal is getting errors logged there, all you need to add is Raven.js, and the Vue plugin.

Sentry has documentation on doing this here: https://docs.sentry.io/clients/javascript/integrations/vue/