Sentry-javascript: Add Vue integrations after init() does not work except when InboundFilters and LinkedErrors are excluded

[kapersoft]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [ ] Provide a link to the affected event from your Sentry account

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node _(raven for node)_
• [x] other: @sentry/integrations

Version:

5.5.0

Description

I am trying to add the Vue-integration after Sentry.Init(). I have used issue https://github.com/getsentry/sentry-javascript/issues/1854 as a guide. First I create a clientOptions object:

const clientOptions = {
  dsn: "https://[email protected]/123",
  integrations: [
    ...Sentry.defaultIntegrations,
    new Integrations.Vue({Vue})
  ]
};

Then I create the client and bind it to the hub:

const client = new Sentry.BrowserClient(clientOptions);
Sentry.getCurrentHub().bindClient(client);

When I simulate a Vue error like this:

computed: {
    myValue: function () {
      return a - b
    }

Sentry does not detect this error and does not send it to our Sentry server.

However, when I exclude InboundFilters and LinkedErrors from Sentry.defaultIntegrations in the clientOptions, Vue errors are detected by Sentry and sent to our Sentry server:

const filteredIntegrations = Sentry.defaultIntegrations.filter(
  integration => !["InboundFilters", "LinkedErrors"].includes(integration.name)
);

const clientOptions = {
  dsn: "https://[email protected]/123",
  integrations: [
    ...filteredIntegrations,
    new Integrations.Vue({ Vue })
  ]
};

It also works fine when I add the Sentry.defaultIntegrations and the Vue integration in the initial Sentry.Init(...). But that is not a viable option for me.

I have made an example of both configurations in https://codesandbox.io/s/adding-vue-integration-z3jjk.

Is this a known limitation? Is this a bug in the InboundFilters and LinkedErrors integrations? Or I am doing something wrong?

[amoshydra]

Interestingly, configuring integrations via function syntax works.

https://codesandbox.io/s/adding-vue-integration-tk1uu

const clientOptions = {
  dsn: "https://[email protected]/123",
  integrations: integrations => [
    ...integrations,
    new Integrations.Vue({Vue})
  ]
};

[kapersoft]

Thanks for your input. I haven't tried configuring integrations via function syntax. I'll look into it tomorrow when I am in the office.

[kapersoft]

Update: setting Vue integration via function syntax works like a charm!

I'll close this issue and will update issue #1854 for future users.

[kamilogorek]

@kapersoft I just tested it locally, and apparently, there's something conflicting with 2 instances of the SDK itself, not only the clients.
When you use either CDN or npm package, any config of yours will work, however, when 2 versions of SDK are loaded, something funky is going on. Trying to debug now what's going in, but it may take a while, so please bear with me.

[kapersoft]

@kamilogorek yes, we do use the CDN-version for the initial Sentry.Init() and the npm-pacakge for adding the Vue integration if the page contains a Vue app.

Please let me know if you need more info or when I can check/test something for you.