-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
[Session Replay]Why "Multiple Sentry Session Replay instances are not supported"? #8414
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
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 S...
Replies: 2 comments 1 reply
-
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</> }
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1
-
Hi @AbhiPrasad
Thanks for the answer!
I was able to fix the title error with the above code!
Thank you for your prompt reply!
Beta Was this translation helpful? Give feedback.
All reactions
-
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);
});
Beta Was this translation helpful? Give feedback.