[Session Replay]Why "Multiple Sentry Session Replay instances are not supported"?

[NiiyaDaiki]

Hi there.

I'm trying to use Sesson Replay in a React project.
new Sentry.Replay() only once in the project, but I get the error Multiple Sentry Session Replay instances are not supported.
How can I resolve this?

I already use Sentry in my project, so I init Sentry in index.tsx.

■index.tsx
Sentry.init({dsn})

I want to replay only certain pages, so I wrote the following code.
Then in new Sentry.Replay() I get the error Multiple Sentry Session Replay instances are not supported.
I have not called new Sentry.Replay() anywhere else in the project.

■Sample.tsx

const SamplePage = () => {
  const initReplay = () => {
    const client = Sentry.getCurrentHub().getClient()
    const replay = new Sentry.Replay()
    if (client && client.addIntegration) {
      client.addIntegration(replay)
    }
    return replay
  }
  const replay = initReplay()
  replay.start()

  return <>sample</>
}

The version of the @senry/react package used is "7.56.0".

I will let you know if there is any other information needed to solve the problem.
Thanks in advance.

[AbhiPrasad]

Hey @NiiyaDaiki - there are two issues here. First, you don't need to call replay.start(), this is already done by calling client.addIntegration(replay). Second, By putting the replay init in a component, you run the risk of re-running replay integration creation

I would recommend doing something like this:

let hasReplayInit = false;

function initReplay() {
   if (hasReplayInit) {
     return;
   }

    const client = Sentry.getCurrentHub().getClient()
    const replay = new Sentry.Replay()
    // only reason client doesn't exist is that `Sentry.init` was not called.
    if (client && client.addIntegration) {
      client.addIntegration(replay)
      hasReplayInit = true;
    }
}

const SamplePage = () => {
  useEffect(() => {
    initReplay();
  }, []);

  return <>sample</>
}

[NiiyaDaiki]

Hi @AbhiPrasad

Thanks for the answer!

I was able to fix the title error with the above code!
Thank you for your prompt reply!

[chidimo]

I just encountered same error while trying to lazy-load sentry in a react vite project. Here's how I handled it.

let hasReplayInit = false;
import('@sentry/react')
  .then(Sentry => {
    const client = Sentry.init({
      dsn: import.meta.env.VITE_SENTRY_DSN,
      integrations: [Sentry.browserTracingIntegration()],
      // Performance Monitoring
      tracesSampleRate: 1.0, //  Capture 100% of the transactions
      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
      tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
      // Session Replay
      // eslint-disable-next-line max-len
      replaysSessionSampleRate: import.meta.env.DEV ? 1 : 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
      // eslint-disable-next-line max-len
      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
    });

    if (client && !hasReplayInit) {
      Sentry.addIntegration(Sentry.replayIntegration({maskAllText: false, blockAllMedia: false}));
      hasReplayInit = true;
    }
  })
  .catch(err => {
    console.error('Error loading sentry: ', err);
  });