VueJS 2 does not report any errors (Sentry.io) - vuejs2

Question

I have a Laravel (5.4) application with VueJs2 (2.1.10). I am using Sentry.io as error reporting for our Backend which works fine. When an error occurred from VueJs I am unable to catch it nor send it to Sentry.
Here is the documentation which I used to install Sentry through NPM according to the Raven settings: https://docs.sentry.io/clients/javascript/integrations/vue/
My config in app.js is the following:
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven
.config('https://[filtered]#sentry.io/[filtered]')
.addPlugin(RavenVue, Vue)
.install();
Building the code works fine through webpack. The question I would like to get some help with is why Vuejs is not reporting any errors to Sentry?
I have tried to force a couple of errors including non existing template variables, http error responses, incorrect component declaration, syntax errors. All those errors do result in console errors but non are send to Sentry.
Any suggestions on where to start or what to do to get error reporting to work with Sentry and Vuejs2? Thanks in advance!

Answer 1

I just started with Sentry as well and have the same problem.
The only workaround I found so far is to include Raven in every single component and to call Raven explicitely when an error occurs (plus your code for app/main.js):
MyComponent.vue
<template>
Click me
</template>
<script>
import Raven from 'raven-js'
export default {
name: 'MyComponent',
data () {
return {
loggedIn: false
}
}
methods: {
createError () {
try {
if (!this.loggedIn) throw new Error('User not logged in')
console.log('User is logged in')
} catch (error) {
Raven.captureException(error)
}
}
}
}
</script>
<style scoped>
</style>

Answer 2

This may be caused by your javascript file is not the same origin with your html file. In this condition, all the javascript errors are caught as 'Script Error', 'Script Error' is sometimes also called a cross-origin error. And sentry discard javascript error /^Script error\.?$/ and /^Javascript error: Script error\.? on line 0$/.
Below is the sentry relative code
// "Script error." is hard coded into browsers for errors that it can't read.
// this is the result of a script being pulled in from an external domain and CORS.
globalOptions.ignoreErrors.push(/^Script error\.?$/);
globalOptions.ignoreErrors.push(/^Javascript error: Script error\.? on line 0$/);
Another Conditon:
you may use vue-cli-service, which default use webpack devtool:eval configuration, this cause chrome bugs: https://bugs.chromium.org/p/chromium/issues/detail?id=765909

Answer 3

Try this
main.js
Import VueRaven, { Raven } from 'vue-raven'
Vue.use(VueRaven, {
dsn:'yourdsn'
}