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)