Session Replay flush() method do not work before stop()

[expcapitaldev]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/angular

SDK Version

7.37.1

Framework Version

"@sentry/angular": "7.37.1",

Link to Sentry event

no

SDK Setup

see #7192 (comment)

Sentry.init({
  dns: myDNS,
  // set to 1 so once we add the integration, it will def. be sampled
  replaysSessionSampleRate: 1,
  replaysOnErrorSampleRate: 1,
  integrations: []; // not added here
});

 // enableReplay for example from variable from server
function toggleReplay(enableReplay){
  const client: Client | undefined = Sentry.getCurrentHub().getClient();
  if (!client) {
    return;
  }

  if (enableReplay) {
    const existingReplay = client.getIntegration(Replay);
    if (existingReplay) {
      return;
    }
    const replay = new Replay();
    client.addIntegration(replay);
  } else {
    const replay = client.getIntegration(Replay);
replay?.flush(); // if we want to "flush" all changes before "stop", but it is only works with "setTimeout(()=>{replay?.stop();},1000)"
   replay?.stop();
  }
}

Steps to Reproduce

see SDK Setup

Expected Result

flush() method should send all changes to server if after flush() method we will call stop()

Actual Result

flush() method should send all changes to server if after flush() method we will call stop()

we do not see any POST request with data after calling "client.flush();client.stop()" it is only works without "client.stop()" or with "setTimeout(()=>{replay?.stop();},1000)"

[mydea]

Hey,

thanks for the report.

I guess the reason for this is that flush() is async, and has some internal logic that checks if the replay is stopped.

The following should work more reliably:

replay.flush().finally(() => replay.stop());

This will wait until the flush succeeded and then stop the recording.

Does that work for you?

[expcapitaldev]

thanks a lot but I see next type

flush(): Promise<void> | void;

do I need to check typeof method ?

[mydea]

Ah, you are right - ugh, this type is not really nice, but I guess we can't change it in a backwards compatible way now 😅 So the better way is:

await replay.flush();
replay.stop();

as await should work no matter if it is a promise or not!

[expcapitaldev]

thanks a lot. I think you can update documentation)

[Lms24]

I think you can update the documentation

@expcapitaldev which documentation are you referring to? The Readme or the SDK docs?

[expcapitaldev]

any) I can not find any information about flush() method with stop()

[mydea]

We've added some docs on this here: https://docs.sentry.io/platforms/javascript/session-replay/configuration/#start-and-stop-recording

Thanks for bringing this up!

[expcapitaldev]

thank you guys