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

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

getsentry / sentry-javascript