Vue plugin prevents logging of errors to the console

[ArmorDarks]

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

A bug

What is the current behavior?

When Raven Vue plugin used, Vue will stop to log errors encountered during components rendering to the console

What is the expected behavior?

Expected Vue to log errors.

Raven version: 3.26.3
OS: Windows 10
Used via JSPM

---

This most likely happens because Raven.js defines Vue errorHandler, but starting from Vue 2.2.0 when it's not undefined, Vue won't log errors to the console. See errorHandler docs.

[kamilogorek]

Current Vue integration code is available here. https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/pluggable/vue.ts

It contains this snippet (old plugin also had it):

const oldOnError = this.Vue.config.errorHandler;
if (typeof oldOnError === 'function') {
  oldOnError.call(this.Vue, error, vm, info);
}

Which means, that you can write:

Vue.config.errorHandler = function (error, vm, info) {
  console.log(error, vm, info);
}

// configure Sentry SDK here

And we'll trigger an old behavior as well.

[ArmorDarks]

Unfortunately, that won't work. I hope you bothered to check this.Vue.config.errorHandler content and read Vue documentation. See vuejs/vue#8433

[kamilogorek]

Feel free to just copy our code to a custom handler. I believe that logging errors to console for the end user is not a desirable behavior for majority of developers.
You can also easily turn off this integration locally, so that errors will be logged through original handler instead.

[ArmorDarks]

You can also easily turn off this integration locally, so that errors will be logged through original handler instead.

That's what I did for now. I think that issue should be mentioned in the docs with a proposal to disable this function for the development environment until Vue will fix referenced above issue.

Otherwise, other developers will waste their time too to figure out why suddenly after Raven.js Vue plugin installation all Vue error gone for good.

Note, that console.log in this case won't do, since built-in Vue' logger is quite different and logs much more useful information.

[kamerat]

Agreed. This side-effect of integrating vue in sentry should really be documented..
Personally spent a lot of time and frustration because of this.

I believe that logging errors to console for the end user is not a desirable behavior for majority of developers.

Agreed -for users that is. however, suppressing errors for developers really just makes this whole thing super ironic. (Install sentry to catch issues you cannot see yourself on the clients; Ends up suppressing more issues)

[ArmorDarks]

Yeap, I've actually missed the irony of the situation :D

[erfanimani]

I don't agree with the sentiment that JavaScript console errors should be suppressed for end users.

When you're casually browsing the internet and something doesn't work, say you click on something and expect something to happen but it doesn't, or you've placed an order and the success page takes longer than expected, how many of you developers check the JavaScript console? Im surprised if that's not at least most web developers. It's ironic that were the ones wanting to suppress errors for end users. It's almost like killing logging for client side systems, sure probably the client will never look at the logs, but conceptually they should still exist on the client side.

Unless you are super paranoid about the inner workings of your app for whatever reason, I really don't understand the necessity for changing the default behaviour of JavaScript.

[ArmorDarks]

I also appreciate how the issue still remains closed, while actually it wasn't resolved.

[HazAT]

@ArmorDarks @erfanimani does the warning in the docs makes sense guys?
getsentry/sentry-docs#625

[kamilogorek]

I also appreciate how the issue still remains closed, while actually it wasn't resolved.

What I'd appreciate more is if you'd help us and fill a PR to either fix or document it 🙂

[kamerat]

I thought I could share my temporary workaround if it can be to help for others:

As @kamilogorek said:

You can also easily turn off this integration locally, so that errors will be logged through original handler instead.

Since we want the console output in development mode, we can simply add a condition based on the applications build-state and only use integration on production:

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: process.env.NODE_ENV === 'production' ? [new Sentry.Integrations.Vue({ Vue })] : []
})

Is this something that could be useful in the docs @HazAT, or is it to spesific? 🤷‍♂️ 😄

*I assume most people here are using the vue cli or have a pre-made boilerplate - These most likely include build scripts with proper NODE_ENV variables. If not, simply add process.env.NODE_ENV = 'production' to your production build script in order to make this work.

[kamilogorek]

@BlitZz96 we have docs on the integration already - https://docs.sentry.io/platforms/javascript/#alternative-way-of-setting-an-integration :)

You can also write it as:

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations(integrations) {
    if (process.env.NODE_ENV === 'production') integrations.push(new Sentry.Integrations.Vue({ Vue }));
    return integrations;
  }
});

[kamerat]

Yes indeed @kamilogorek! However, I was thinking more about the Vue docs. 😅
Maybe it could be useful for inexperienced developers to display a code-snippet along with the new warning you guys just added that shows how one can disable the integration while developing?

My apologies for not being more specific in the previous comment.