Skip to content

Error when catch exceptions in Vue components #1012

Closed
@Shulkin

Description

@Shulkin

Do you want to request a feature or report a bug?

bug

What is the current behavior?

I'm using Chrome 60. I'm adding Sentry support to Vue SPA, using Raven 3.17.0.
I install Raven from npm and init it in my index.js, right before creating Vue application, i.e.

import Vue from 'vue'
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'

Raven.config('... our company dsn ...').addPlugin(RavenVue, Vue).install()

new Vue({
	el: '#app',
... etc.

Then I throw some exceptions in code, like

throw new Error('test exception')

Raven catches and log exceptions only in my main Vue instance methods.
Any other errors in components, modules, etc. cause this error in console

TypeError: Cannot read property '$root' of undefined
    at formatComponentName (eval at <anonymous> (client.js:3430), <anonymous>:8:11)
    at VueErrorHandler (eval at <anonymous> (client.js:3430), <anonymous>:28:28)
    at handleError (eval at <anonymous> (client.js:766), <anonymous>:513:25)
    at Array.eval (eval at <anonymous> (client.js:766), <anonymous>:654:11)
    at nextTickHandler (eval at <anonymous> (client.js:766), <anonymous>:599:16)
    at <anonymous>

For example:

new Vue({
	el: '#app',
	store,
	data() { return {...} },
	router,
	render: h => h(app),
	methods: {
		testMethod() {
			// debug exception for Sentry
                        throw new Error('test exception')
               }
}})

This works. Test error is logged in Sentry.

Same throw in any other components methods cause error.

What is the expected behavior?

Log any uncaught exceptions in code, don't cause errors.

Am I doing something wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions