sentry-javascript: Vue plugin prevents logging of errors to the console

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)

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.

@victor-ponamariov

import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
  // ...
  integrations: [new VueIntegration({
    logErrors: true
  })],
});

https://docs.sentry.io/platforms/javascript/vue/

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 🙂

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

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.

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

This actually worked for me

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.

@ArmorDarks @erfanimani does the warning in the docs makes sense guys? https://github.com/getsentry/sentry-docs/pull/625

Yeap, I’ve actually missed the irony of the situation 😄

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.