Proper way to load Sentry on a web page along with an embedded RJS app?

[nicholashead]

Hi folks. I help build https://www.hireahelper.com/ - which uses Sentry for a long while now on the front and back-end. We load the Sentry SDK bundle directly in our HTML and then initialize it with a specific project DSN - but then we recently started shipping some RJS components that run on the page (using vitejs). When we built these RJS apps, we're initializing Sentry in there (as part of a main.tsx entrypoint file) as well with a separate DSN (separate projects - for example "web" vs "rjs"). We're now realizing this is leading to loading the SDK twice, and also cross-polluting issues - regular JS errors/messages are being sent to the RJS Sentry project and vice versa, depending on what loaded/won I guess.

Is there a way to properly load the Sentry SDK just once on these types of web pages? I feel like the scenario is probably not unique to us. Perhaps we will be forced to use the same DSN - and we just make sure not to bundle the Sentry stuff in vite when we bundle the libs? If there's any possible way to keep separate DSNs that'd be great, though. Any advice/guidance would be appreciated. Thanks!

[AbhiPrasad]

Hey @nicholashead. This seems like the microfrontend pattern. We have some docs around this here: https://docs.sentry.io/platforms/javascript/configuration/micro-frontend-support/

You'll still need a Sentry init, but you can use any attributes on an event to decide a specific DSN to route it to.