Isolated scopes in Micro Frontends/MFE/Microfrontends

[johnmbauan]

Problem Statement

I'm working in a context where we have several micro-frontends, and we want these micro-frontends to be completely independent in terms of how sentry is initialized and keep the different instances running in any given page isolated.
We're not setup for Module Federation so we cannot follow what is suggested here.

I've followed what's described in this page: created a scope, created a BrowserClient and use scope.captureException.

    const client = new BrowserClient({
        dns: 'http://...',
        transport: makeFetchTransport,
        stackParser: defaultStackParser,
        integrations: [...getDefaultIntegrations({}), vueIntegration({ app })], //note the usage of vueIntegration
    });

    //create a new scope for this instance of Sentry, to isolate it from other sentry instances
    const isolatedScope = new Scope();
    isolatedScope.setClient(client);
    client.init();

Manually capturing exceptions with isolatedScope.captureException works well, as the events are sent to the correct Sentry project. However, if an uncaught exception is thrown somewhere in the Vue app, nothing happens.
I've investigated the codebase and found that the errorHandler defined in the Vue integration doesn't account for any isolated scope created outside of the vue integration init function. This means that any exceptions that are not explicitly handled with isolatedScope.captureException will be handled using whatever is the current scope.

Solution Brainstorm

I propose making the option of the init function accept an additional "useIsolatedScope": boolean; field, based on which the error handler that is injected into the Vue app will use a new isolated scope to capture exceptions. I'm sure it's not that simple, but the high-level idea is to simplify the setup of an isolated sentry instance with Vue.

(I have a working solution that somewhat resembles what I'm proposing, though I went lower level by using a modified version of attachErrorHandler directly on the Vue app and passing the scope to it)

[lforst]

Hi, unfortunately it is indeed not that simple because the browser lacks AsyncLocalStorage (or basically any functionality to store data for an async execution context) which is what we would use to avoid leakage between scopes.

You mentioned that you are not using module federation. Module federation is not a requirement to use our Micro Frontend guide: https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/ As long as you have separate builds for each of your micro frontends you can use the solution we propose there.

[johnmbauan]

Thanks @lforst . Based on my understanding, the solution proposed in https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/ would require some centralization of the initialization of Sentry, which we'd like to avoid. Is my understanding correct?

In all cases Sentry.init() must never be called more than once, doing so will result in undefined behavior.

[lforst]

So in order to catch global errors (ie. errors that bubble up to window.onerror) you need some kind of centralization, since you would need to determine which client/DSN should capture the error.

As it stands, I don't think there is a way around having at least one global (fallback) client that does routing based on some heuristic. Lmk if you have any suggestions.