Sentry-javascript: @sentry/browser no-conflict mode

[egor-sorokin]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [] Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

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

Version:

4.0.6

Description

App that I am working on uses @sentry/browser SDK and was installed based on the documentation. The problem is that app can be integrated into other apps which have Sentry as well, so I will get conflicts. I didn't find any information about no-conflict mode like it is implemented in Raven.js.
The question is - does @sentry/browser SDK supports no-conflict mode like "Sentry.noConflict()" and if so how can I execute it?

[HazAT]

I think what you really want to do is, instead of calling init you want to probably create your own Client and send off your captured errors to your Sentry installation.
If you call init we hook into a lot of global hooks, (error handler, unhandled promises, breadcrumbs) you would receive all event from the parent application which is on one hand a security concern and on the other hand it sends errors to you that may not be related in any form to your app.

Creating your own Client works the same as with init

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

const client = new Sentry.BrowserClient({
  dsn: 'DSN',
});

//

client.captureException(new Error('bla'));

Is that what you actually want?

[egor-sorokin]

Hi, thanks for the quick response and for the detailed explanation, it works for me. Just one additional question what about Sentry configuration in this case?
I mean, for example, Sentry.withScope, Sentry.addBreadcrumbs and so on. Should it be in the same way as in docs or some of them now will be like client.addBreadcrumbs?

[HazAT]

@egor-sorokin To give you a full example see:

import { BrowserClient, Hub } from "@sentry/browser";

const client = new BrowserClient({
  dsn: "https://[email protected]/123",
  maxBreadcrumbs: 100,
  environment: "dev",
  beforeSend(event) {
    console.log(event);
    return null;
  }
});
const hub = new Hub(client);

hub.configureScope(scope => {
  scope.setTag("a", "b");
});

hub.addBreadcrumb({ message: "crumb 1" });
hub.captureMessage("test");

try {
  a = b;
} catch (e) {
  hub.captureException(e);
}

hub.withScope(scope => {
  hub.addBreadcrumb({ message: "crumb 2" });
  hub.captureMessage("test2");
});

The hub is your central point now, you should be able to use all functions that are described in the docs.

[egor-sorokin]

thank you for the full example, it'd be nice to see those examples in docs somewhere in the configuration section for example. I can add them to the docs and create a PR if it's needed. Thoughts?

[HazAT]

@egor-sorokin I agree this should be somewhere in the docs, but rather in an advanced section, here for example: https://docs.sentry.io/platforms/javascript/

[egor-sorokin]

@HazAT cool, thanks, I will do that

[egor-sorokin]

@HazAT hi, related to this issue question:
is there a way that "Sentry.Hub" tracks errors automatically? When I do "Sentry.init({})" Sentry tracks errors but when I create a "browserClient" and "Hub" it doesn't.
How can I have "noConflict" mode to not collide/conflict with other Sentry instances and versions and track errors automatically without ".captureExceptions"?

[kamilogorek]

@egor-sorokin you want both instances to track the same errors?
Or one instance to track globally occurring errors and one to be used as a stand-alone thing?

[HazAT]

@egor-sorokin That's actually a security concern what you are trying to do.
There may be a workaround for this but imagine the following:

Someone adds your Package to their App, they are using Sentry and your Package is able to intercept errors that they throw in their App.
This is not good.

There is no "isolated to just my app/package" error handling, JavaScript doesn't provide a way to do this.

[egor-sorokin]

Well, "Or one instance to track globally occurring errors and one to be used as a stand-alone thing" - yes
Imagine:
Somebody has an app with its Sentry (with, for example, version lower than mine and its own DSN). Also, I have an add-on for this app that adds an extra section with advanced settings and it has another Sentry (with its own DSN). However I am not 100% sure that there will be another instance of Sentry besides mine, but I would like to prevent any sort of collisions and yes, due to security reasons, I don't want to track errors of the main app just from my add-on and vice versa.

Additionally, per the decision on my project, I just need to track general js errors, so I don't need to call .captureException(e), .captureMessage manually.

Hope I made it a bit more clear now

[kamilogorek]

As integrations live on clients themselves now, you can do new BrowserClient({ integrations: [new Sentry.Integrations.GlobalHandlers()] }) which will attach and install global error handlers. Be aware that it'll capture all global errors though, which as already mentioned may have some security implications.

[egor-sorokin]

Thank you guys for the clarification, I will decide what to do next based on your comment with my team

[chocking]

As integrations live on clients themselves now, you can do new BrowserClient({ integrations: [new Sentry.Integrations.GlobalHandlers()] }) which will attach and install global error handlers. Be aware that it'll capture all global errors though, which as already mentioned may have some security implications.

hi @kamilogorek , I did as you said, but browerClient instance didn't post message to its dsn, and its "beforeSend" didn't called, what's the right way to handle this situation pls?

What's my project looks like is:

Sentry.init({
    dsn: 'mainDsn',
});

const client = new BrowserClient({
    dsn: 'moduleDsn',
    integrations: [new Sentry.Integrations.GlobalHandlers()],
    whitelistUrls: [
      /\/someModuleName\/.+\.js/
    ]
});

In short, I want to distinguish module errors to anothor dsn without calling client.captureXXX manually.

[chocking]

answer to myself above

Sentry.init({
  dsn: 'mainDsn',
});

let hub;

class MyIntegration {
  name = "MyIntegration";

  setupOnce() {
    Sentry.addGlobalEventProcessor(event => {
      if (event.tags.sentryClient === 'myClient') { // prevent recursive calls
        return event;
      }
      /*  some event filters */
      hub.captureEvent(event);
      /*  some event filters end */
      return event;
    });
  }
}

const client = new BrowserClient({
  dsn: 'moduleDsn',
  integrations: [...Sentry.defaultIntegrations, new MyIntegration()],
});
hub = new Sentry.Hub(client);
hub.run(currentHub => {
  currentHub.configureScope(function (scope) {
    scope.setTag("sentryClient", "myClient");
  });
});