Catch all errors when using Sentry.BrowserClient

SDKs
1

Hey!
I am developing a webapp that consists of several software projects which are developed in different teams and we want to track errors in different Sentry projects at once.

To be precise we have multiple JS files which should log to different Sentry projects each. They all run in the same browser scope. That means I can’t use Sentry.init() because every init overwrites the previous.

My approach was to create a new instance of Sentry.BrowserClient for every JS file sing whitelistUrls like so:

 const client = new Sentry.BrowserClient({
    dsn: '__DSN_for_js_path1__',
    whitelistUrls: [
        /https:\/\/subdomain\.domain\.org\/js-path1/
    ]
});

const client2 = new Sentry.BrowserClient({
    dsn: '__DSN_for_js_path2__',
    whitelistUrls: [
        /https:\/\/subdomain\.domain\.org\/js-path2/
    ]
});

The problem is that apparently Sentry.BrowserClient won’t catch all errors but only the ones which are explicitly defined. I could work around this using something like window.addEventListener('error', function (event) { client.captureException(event) });
but I am not sure if that catches everything we need.

I’d be interested how you would approach this and if I am missing something?

Thanks in advance!
Moritz

2

So right now this isn’t possible, at least not in the way you are trying to do it.
Global errors will only be forwarded to the client that is bound currently in the hub.
And actually this is how our integrations currently work, they only work for the client on the current hub.
So only one client at a time can get global errors.

Your workaround should work just fine, but usually, if people use a Client directly they want to use it just to catch their caught exceptions and not global errors.

One workaround that came to my mind while writing this you could do the following:

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

const client = new Sentry.BrowserClient({
  dsn: "https://53039209a22b4ec1bcc296a3c9fdecd6@sentry.io/4291",
  beforeSend(event) {
    console.log("client beforeSend");
    // Do filtering of the event here
    // if it matches
    // //https:\/\/subdomain\.domain\.org\/js-path1/
    // return event;
    // if not, return null;
    return null;
  }
});

const client2 = new Sentry.BrowserClient({
  dsn: "https://53039209a22b4ec1bcc296a3c9fdecd6@sentry.io/4291",
  beforeSend(event) {
    console.log("client2 beforeSend");
    // Do filtering of the event here
    // if it matches
    // /https:\/\/subdomain\.domain\.org\/js-path2/
    // return event;
    // if not, return null;
    return null;
  }
});

Sentry.init({
  dsn: "https://53039209a22b4ec1bcc296a3c9fdecd6@sentry.io/4291",
  beforeSend(event) {
    console.log("Sentry.init beforeSend");
    client.captureEvent(event);
    client2.captureEvent(event);
    return null;
  }
});

throw new Error("bla");

So you have one main SDK running Sentry.init but it doesn’t actually send the event (that’s why it returns null in beforeSend instead it delegates the built event to the other two clients which send it if it’s whitelisted.
Also, since whilteListUrls works internally with the InboundFilterIntegration you need to check if you want to filter the event manually in beforeSend :confused:

This is not ideal I know I will discuss with the team if we could improve this but this is the best for now for this very specific use case.

Cheers,
Daniel

1 Like
3

Thanks for your detailed answer!
I am gonna try it this way. And thanks for taking the issue to the team.
I wish you happy holidays!