How do I add Vue.js integration to an already initialized Sentry.io setup?

Viewed 481

I have a web application that has some Vue.js, and some older ones that don't use webpack or Vue (e.g., jQuery, etc.). Sometimes legacy code and Vue are both at play.

In our main layout, we add Sentry via its CDN file (currently version 5.29.2), and initialize Sentry with:

Sentry.init({
  dsn: 'https://abcde@abcde.ingest.sentry.io/12345',
  environment: 'development',
  autoSessionTracking: true
});

This correctly captures thrown errors.

For our Vue code, we'd love to take advantage of Sentry's Vue integration. Some of our Vue apps are rendered side-by-side with legacy code, and some standalone. In the former situation, the legacy code will initialize Sentry with the above code before the Vue app is initialized. I use the following code (inspired by this sentry issue) in the context of a Vue plugin to later setup Vue integration with Sentry:

import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

export default {
  install(Vue) {
    const sentryClientOptions = {
      dsn: 'https://abcde@abcde.ingest.sentry.io/12345',
      environment: 'development', 
      autoSessionTracking: true,
      logErrors: !devMode, // delegate to original Vue logError
      integrations: integrations => [
        ...integrations,
        new Integrations.Vue({ Vue })
      ]
    }

    if (!Sentry.getCurrentHub().getClient()) {
      // No sentry at all--let's initialize
      Sentry.init(sentryClientOptions);
    } else {
      // Sentry is already loaded, but not with the Vue integration, so lets set that up
      const client = new Sentry.BrowserClient(sentryClientOptions);
      client.setupIntegrations();
      Sentry.getCurrentHub().bindClient(client);
    }
  }
};

If no previous Sentry has been initialized, this captures all thrown errors.

However, if a previous Sentry has been initialized, this captures only errors thrown in Vue. Errors from the legacy code show up in the console as Uncaught Error, but are not sent to Sentry.

How can I, at run time, set up Vue integration and still handle all thrown errors, from within Vue and not.

0 Answers
Related