Sentry-javascript: How to add integrations after init() ?

[adamJLev]

This was possible in Raven, by doing this anytime after the Raven.install() had already happened:

import RavenVue from 'raven-js/plugins/vue';
window.Raven.addPlugin(RavenVue, Vue);

but in this Sentry sdk it needs to be called during init,:

Sentry.init({
  dsn: '...',  integrations: [new Sentry.Integrations.Vue({ Vue })] // Vue not available here yet
})

The problem is that I'm loading sentry very early, before Vue is available on the page.

The rationale here is that I do want to initialize Sentry as early as possible (in the top of the html payload) so that I do get reporting for any JS errors that may happen before the big/complex webpack processed JS with Vue and other things load.

Any ideas? thanks!

[HazAT]

You could do this by binding a new client afterward like:

init ...

// After some while

const client = new BrowserClient({
dsn: ...
integrations: [...Sentry.defaultIntegrations, new Sentry.Integrations.Vue({ Vue })]
});

Sentry.getCurrentHub().bindClient(client);

This should do it.

[kapersoft]

You'll need to add the Vue integrations via function syntax. The syntax above will not work.

init ...

// After some while

const client = new BrowserClient({
  dsn: ...,
  integrations: integrations => [...integrations, new Sentry.Integrations.Vue({ Vue })]
});

Sentry.getCurrentHub().bindClient(client);

See issue #2160 for reference