Proper Approach to Determine if Replay Integration is Enabled?

[matthewborgman]

Hello all.

We've recently integrated Sentry into a React-based SPA, Sanity Studio, but are having issues when switching "datasets" within the application. Specifically, "Error: Multiple Sentry Session Replay instances are not supported" which then crashes the application.

Sentry is integrated through one of Sanity's customization points, which allows us to wrap a top-level, but not the top-level, component:

export function SentryWrappedLayout(props: LayoutProps) {
  const currentUser = useCurrentUser();
  const dataset = useDataset();

  const environment = (process.env.NODE_ENV || Environment.Prod) as Environment;
  let release;
  const sentryIntegrations: Integration[] = [new Sentry.BrowserTracing()];

  const baseSentryConfig: Sentry.BrowserOptions = {
    dsn: import.meta.env.SANITY_STUDIO_SENTRY_DSN,
    environment: `${environment}-${dataset}`,
    initialScope: {
      user: {
        email: currentUser?.email,
        id: currentUser?.id,
        name: currentUser?.name,
        roles: currentUser?.roles,
      },
    },

    /* eslint-disable prettier/prettier */
    replaysOnErrorSampleRate: SAMPLE_RATES_BY_ENV[environment].replaysOnError,  // Percent captured for session with an error
    replaysSessionSampleRate: SAMPLE_RATES_BY_ENV[environment].replaysSessions, // Percent captured for all sessions
    tracesSampleRate: SAMPLE_RATES_BY_ENV[environment].traces,                  // Percent captured for performance monitoring
    /* eslint-enable prettier/prettier */
  };

  // Prevent "Multiple Sentry Session Replay instances are not supported" errors possibly due to HMR
  // and avoid creating a "release" from each unique Git commit
  // NOTE: This comment now appears to be wrong/incomplete as this also occurs when switching datasets
  if (environment !== 'local') {
    sentryIntegrations.push(new Sentry.Replay());
  } else {
    release = 'local';
  }

  Sentry.init({
    ...baseSentryConfig,
    integrations: sentryIntegrations,
    release,
  });

  return (
    <Sentry.ErrorBoundary>{props.renderDefault(props)}</Sentry.ErrorBoundary>
  );
}

What would be the best way to determine if the Session Replay integration is already enabled so as to avoid this error? Getting the hub and client, post init, and then checking for an integration and conditionally adding doesn't seem to work either:

  // ...

  Sentry.init({
    ...baseSentryConfig,
    integrations: sentryIntegrations,
    release,
  });

  const hub = getCurrentHub();
  const client = hub.getClient();

  if (client) {
    if (!client.getIntegration(Sentry.Replay)) {
      client.addIntegration(new Sentry.Replay());
    }
  }

  // ...

Alternatively, we considered wrapping Sentry.init in useEffect(() => {}, []) plus a cleanup function, but aren't sure what we'd call to "uninitialize" things. #7464 (comment) specifically says not to call Sentry.close followed by Sentry.init again.

Any help is much appreciated!

[AbhiPrasad]

Getting the hub and client, post init, and then checking for an integration and conditionally adding doesn't seem to work either

This should work! If it doesn't could you add debug: true to your Sentry.init and see what ends up getting logged out?

Ideally there is only one call to Sentry.init for your page, if you want to support a micro-frontends type pattern, I recommend looking at https://docs.sentry.io/platforms/javascript/configuration/micro-frontend-support/