Multi sentry instances

[Amschi]

Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

Hi,

We are experiencing issues to setup sentry correctly when trying to follow this guide.
We have a multi module app. A main sentry is instantiated in an angular shell, I'm working with a react sub module and I would like to setup sentry on it.

Angular main app setup

    const client = new BrowserClient({
      dsn: this.config.dsn,
      environment: this.getEnvironment(),
      release: this.environmentDetection.getMoabVersion(),
      beforeSend: (event: ErrorEvent) =>
          errorsFilter(this.errorsToIgnore, event),
      beforeBreadcrumb: (crumb: Breadcrumb) => {
        const shrinkedCrumb = { ...crumb };
        if (crumb.data?.['extra']?.arguments) {
          shrinkedCrumb.data['extra'] = {
            ...crumb.data['extra'],
            arguments: crumb.data['extra'].arguments.map((arg: any) => {
              const shrinkedArg = { ...arg };
              delete shrinkedArg.ngDebugContext;
              delete shrinkedArg.ngErrorLogger;
              return shrinkedArg;
            }),
          };
        }
        return shrinkedCrumb;
      },
      transport: makeFetchTransport,
      stackParser: defaultStackParser,
      integrations: [
        breadcrumbsIntegration(),
        globalHandlersIntegration(),
        linkedErrorsIntegration(),
        dedupeIntegration(),
      ],
    });
    this.scope = new Scope();
    this.scope.setClient(client);
    client.init();
    this.setInitialTags();

React setup

const nonShellIntegrations = getDefaultIntegrations({}).filter((defaultIntegration) => {
  return !['BrowserApiErrors', 'Breadcrumbs', 'GlobalHandlers'].includes(defaultIntegration.name);
});

const reactIntegrations = [
  reactRouterV6BrowserTracingIntegration({
    useEffect,
    useLocation,
    useNavigationType,
    createRoutesFromChildren,
    matchRoutes,
  }),
];

const sentryClient = init({
  dsn,
  ignoreErrors,
  release,
  environment: criteoEnv,
  integrations: [...nonShellIntegrations, ...reactIntegrations],
  tracesSampleRate: 0.0001,
});

const scope = getCurrentScope();

scope.setTag('criteoEnv', criteoEnv);
scope.setTag('relookEnv', relookEnv);
scope.setTag('bootstrapMode', bootstrapMode);
scope.setTag('userId', userId);

return sentryClient;

How are you getting stuck?

With the current setup, parent module are leaking into sub project in sentry, meaning because of navigation we have error in sentry that are not related to our project.
According to the documentation, we should instantiate only one sentry client per js app, but If I do

const integrations = getDefaultIntegrations({}).filter(
  (defaultIntegration) => {
    return !["BrowserApiErrors", "Breadcrumbs", "GlobalHandlers"].includes(
      defaultIntegration.name,
    );
  },
);

const client = new BrowserClient({
  dsn: "DSN",
  transport: makeFetchTransport,
  stackParser: defaultStackParser,
  integrations: integrations,
});

const scope = new Scope();
scope.setClient(client);

client.init();

this, i don't receive any event in sentry.

For now, we can do an ugly filtering with onBeforeSend callback, but I would prefer to understand what we are doing wrong here.
Thanks alot
Support would be appreciated.

Where in the product are you?

Issues

Link

No response

DSN

https://[email protected]/4508099137503232

Version

No response

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[getsantry]

Routing to @getsentry/product-owners-issues for triage ⏲️

[jangjodi]

@ReneGreen27 if my understanding is correct, this issue appears to be an SDK issue. Could this be re-assigned?

[chargome]

Hey @Amschi, could you try filtering all the integrations like this, otherwise your filters would probably have no effect:

integrations: (defaultIntegrations) => [
    ...defaultIntegrations.filter(
      (integration) =>
        !["BrowserApiErrors", "Breadcrumbs", "GlobalHandlers"].includes(
          integration.name,
        ),
    ),
    happyIntegration(),
  ],