Better support for MultiplexedTransport for Microfrontends

[Dhrumil-Sentry]

Problem Statement

I got the following feedback from a customer for their micro-frontend case

What if the React app like breaks somehow, like we can't rely on Sentry being initialized in the react context because react itself could break. So that's why we have Sentry being initialized just in the script tag at the, the root of the page, right? However we can't get all of the configuration we need in there because some of that's dependent on the react state context, right? So what we end up doing is in our logging package we re-initialize Sentry and then we, we provide (a little bit more configuration data. But the problem we ran into is when we, when we rein initialize Sentry certain configuration properties get ignored- One of those is apparently the transport property.

We tried to configure (a multiplex transport in direct context and with all the different routing logic. But in my manual testing it was noted that the front end that we supply is just completely ignored. So the use of this multiplex transport was like effectively dead in the water because it wasn't supported through re-initialization. So I was like, okay well how can I build the multiplex transport into the plain JavaScript initializer like off the, off the get go, right?

But that multiple transport function is not exported in any of your bundles. I look through every single bundle you have on your, on your, your CDM, not (a single one has that one exported. I get why? Because like it's stripped out based on usage of what is actually like, you know, provided in the Webpack bundle but it's not there. So I we literally can't use (a multiplex transport period.

So that's kind of where the conversation led on Twitter. I was like, like this seems like an oversight. I was like can you guys like add it to your, one of the web pack bundles that that you guys surface to the CDN or like can you fix this behavior in your initializer function?

Solution Brainstorm

.

[mydea]

Hey,

so it should be possible to use the Browser CDN bundle, and then only load the browser tracing integration and other stuff from the NPM package once everything is loaded:

1. Use the normal browser CDN bundle and initialize it early in a <script> tag - no react specific stuff yet
2. Install @sentry/react and when react is ready and set up, do something like this:

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

Sentry.getClient()?.addIntegration(new Sentry.BrowserTracing());

This will add the react browser tracing stuff to the client setup by the CDN bundle.