BrowseClient Not working as expected for Multiple Senty Instances with Browser Javascript Package via CDN

an-and10 commented 3 months ago

Is there an existing issue for this?

[x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[x] I have reviewed the documentation https://docs.sentry.io/
[x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

@sentry/browser

SDK Version

7.117.0

Framework Version

Javascript Browser Package

Link to Sentry event

No response

Reproduction Example/SDK Setup

Hi, I am trying to integrate multiple Sentry instances for my project. We have two menu tabs, each corresponding to a different project. I am creating a browser client event for the first project to capture performance monitoring and error tracking as-is.

Current Setup:

We have successfully achieved our requirements with a single Sentry instance, which is already live in our production environment. Now, another project has been onboarded, and it requires a separate DSN. Therefore, I have integrated the concept of multiple browser clients. Problems Encountered:

During debugging, the BrowserClient is not initializing properly, causing issues. Currently, I am unable to track anything, and browser logs are not printing any information. We have custom instrumentation and want to maintain different scopes for both projects. However, the scope is not initializing correctly with the code below. Additional Information:

Our project is in ES5. We do not use any bundling plugins or JavaScript frameworks. Both project will have same build. Our application is built on EXTJS 5. Could you please help identify what might be wrong with the code and why it is not printing any logs and capturing performnace?


function createSentryInstance(dsn, name, environment) {
        var client = new Sentry.BrowserClient({
            dsn: dsn,

            transport: function(options) {
                        return Sentry.makeFetchTransport({
                            dsn: "httpsdsn"
                        });;
            },
            integrations: [Sentry.browserTracingIntegration()],
            tracesSampleRate:1.0,
            enableInp: true,
           debug:true
            environment: environment,
            release: name,

        });
    
        var hub = new Sentry.Hub(client);
        hub.configureScope(function(scope) {
            scope.setTag("microfrontend", name);
        });
    
        return hub;
    }

------- initialization function ---------------
var transport = Sentry.makeFetchTransport({
                        dsn: "https:/dsn"
                    });
                    
                    var sentryInstance1 = createSentryInstance("https://272f2603bce074bf767c4da826d31f07@o4507737600557056.ingest.us.sentry.io/4507737601671168", "MicroFrontend1", "production");
                    Sentry.getCurrentHub().bindClient(sentryInstance1);
                    // Sentry.setCurrentHub(sentryInstance1);
                    Sentry.getCurrentHub().configureScope(function(scope) {
                        console.log("Inside Configure Scope")
                        scope.setTag("microfrontend", "MicroFrontend1");
                        scope.setUser({ id: "4711" });
                        
                    });

---- Start transaction -----
var transactionName = Sentry.startTransaction({
name: .....,
});

sentry.configureScope(function(scope){
   scope.setSpan(transactionName)
}
);

With single sentry initialization, everything is working cool. with custom instrumentation.

Steps to Reproduce

I followed the documentation provided at Sentry’s best practices for multiple instances thoroughly and implemented it as instructed. However, the browser client is not integrating properly, and as a result, nothing is being captured.

https://docs.sentry.io/platforms/javascript/best-practices/multiple-sentry-instances/

Expected Result

With at least one browser Client also, I need to have a successful integration

Actual Result

https://highradius-in.sentry.io/performance/

I should able to see the performance and error capturing as-is in my previous setup

s1gr1d commented 3 months ago

Hello 👋 For multiple sentry instances to work properly you NEED the bundler plugins. Scope isolation doesn’t work in browser JavaScript because the browser does not support AsyncLocalStorage or similar yet. You can use the bundler plugins to isolate error events based on the stack trace: https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/

Performance tracking with multiple instances will not work as you might expect. Performance monitoring is global to a page and all the data will leak into the different clients. Generally, I would say performance tracking with multiple clients is not supported.

Maybe related to you not getting anything, maybe not: Would you mind cleaning up your code examples? You have invalid JS syntax in certain places and you create transports without using them.

AbhiPrasad commented 1 week ago

Closing this for clean-up. Please re-open if it still applies. Thank you!

getsentry / sentry-javascript