feat(replay): Change stop() to flush and remove current session

`stop()` will now flush the eventBuffer before clearing it, as well as removing the session from Session Storage. Due to the flushing, `stop()` is now async.

Ref: #7738

Author: billyvg

packages/replay/src/integration.ts

@@ -207,12 +207,12 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
    * Currently, this needs to be manually called (e.g. for tests). Sentry SDK
    * does not support a teardown
    */
-  public stop(): void {
+  public async stop(): Promise<void> {
     if (!this._replay) {
       return;
     }
 
-    this._replay.stop();
+    return this._replay.stop();
   }
 
   /**

packages/replay/src/replay.ts

@@ -7,6 +7,7 @@ import { logger } from '@sentry/utils';
 import { ERROR_CHECKOUT_TIME, MAX_SESSION_LIFE, SESSION_IDLE_DURATION, WINDOW } from './constants';
 import { setupPerformanceObserver } from './coreHandlers/performanceObserver';
 import { createEventBuffer } from './eventBuffer';
+import { clearSession } from './session/clearSession';
 import { getSession } from './session/getSession';
 import { saveSession } from './session/saveSession';
 import type {
@@ -85,6 +86,11 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   private _isEnabled: boolean = false;
 
+  /**
+   * If true, will flush regardless of `_isEnabled` property
+   */
+  private _shouldFinalFlush: boolean = false;
+
   /**
    * Paused is a state where:
    * - DOM Recording is not listening at all
@@ -237,7 +243,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Currently, this needs to be manually called (e.g. for tests). Sentry SDK
    * does not support a teardown
    */
-  public stop(reason?: string): void {
+  public async stop(reason?: string): Promise<void> {
     if (!this._isEnabled) {
       return;
     }
@@ -253,14 +259,31 @@ export class ReplayContainer implements ReplayContainerInterface {
         log(msg);
       }
 
+      // Set this property so that it ignores `_isEnabled` = false
+      // We can't move `_isEnabled` after awaiting a flush, otherwise we can
+      // enter into an infinite loop when `stop()` is called while flushing.
+      this._shouldFinalFlush = true;
       this._isEnabled = false;
       this._removeListeners();
       this.stopRecording();
+
+      // Flush event buffer before stopping
+      await this.flushImmediate()
+
+      this._shouldFinalFlush = false;
+
+      // After flush, destroy event buffer
       this.eventBuffer && this.eventBuffer.destroy();
       this.eventBuffer = null;
-      this._debouncedFlush.cancel();
+
+      // Clear session from session storage, note this means if a new session
+      // is started after, it will not have `previousSessionId`
+      clearSession(this);
+
     } catch (err) {
       this._handleException(err);
+    } finally {
+      this._shouldFinalFlush = false;
     }
   }
 
@@ -760,7 +783,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       // This means we retried 3 times and all of them failed,
       // or we ran into a problem we don't want to retry, like rate limiting.
       // In this case, we want to completely stop the replay - otherwise, we may get inconsistent segments
-      this.stop('sendReplay');
+      void this.stop('sendReplay');
 
       const client = getCurrentHub().getClient();
 
@@ -775,7 +798,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    * can be active at a time. Do not call this directly.
    */
   private _flush: () => Promise<void> = async () => {
-    if (!this._isEnabled) {
+    if (!this._isEnabled && !this._shouldFinalFlush) {
       // This can happen if e.g. the replay was stopped because of exceeding the retry limit
       return;
     }

packages/replay/test/utils/clearSession.ts renamed to packages/replay/src/session/clearSession.ts

@@ -46,7 +46,7 @@ export async function addEvent(
     return await replay.eventBuffer.addEvent(event, isCheckout);
   } catch (error) {
     __DEBUG_BUILD__ && logger.error(error);
-    replay.stop('addEvent');
+    await replay.stop('addEvent');
 
     const client = getCurrentHub().getClient();
 

packages/replay/src/util/addEvent.ts

@@ -15,8 +15,8 @@ import type { RecordMock } from '../index';
 import { BASE_TIMESTAMP } from '../index';
 import { resetSdkMock } from '../mocks/resetSdkMock';
 import type { DomHandler } from '../types';
-import { clearSession } from '../utils/clearSession';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { clearSession } from '../../src/session/clearSession';
 
 useFakeTimers();
 

packages/replay/test/integration/errorSampleRate.test.ts

@@ -7,8 +7,8 @@ import { PerformanceEntryResource } from '../fixtures/performanceEntry/resource'
 import type { RecordMock } from '../index';
 import { BASE_TIMESTAMP } from '../index';
 import { resetSdkMock } from '../mocks/resetSdkMock';
-import { clearSession } from '../utils/clearSession';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { clearSession } from '../../src/session/clearSession';
 
 useFakeTimers();
 

packages/replay/test/integration/events.test.ts

@@ -8,8 +8,8 @@ import { createPerformanceEntries } from '../../src/util/createPerformanceEntrie
 import { createPerformanceSpans } from '../../src/util/createPerformanceSpans';
 import * as SendReplay from '../../src/util/sendReplay';
 import { BASE_TIMESTAMP, mockRrweb, mockSdk } from '../index';
-import { clearSession } from '../utils/clearSession';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { clearSession } from '../../src/session/clearSession';
 
 useFakeTimers();
 

packages/replay/test/integration/flush.test.ts

@@ -6,8 +6,8 @@ import type { ReplayContainer } from '../../src/replay';
 import * as SendReplayRequest from '../../src/util/sendReplayRequest';
 import { BASE_TIMESTAMP, mockSdk } from '../index';
 import { mockRrweb } from '../mocks/mockRrweb';
-import { clearSession } from '../utils/clearSession';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { clearSession } from '../../src/session/clearSession';
 
 useFakeTimers();
 
@@ -86,8 +86,7 @@ describe('Integration | rate-limiting behaviour', () => {
     expect(replay.stop).toHaveBeenCalledTimes(1);
 
     // No user activity to trigger an update
-    expect(replay.session?.lastActivity).toBe(BASE_TIMESTAMP);
-    expect(replay.session?.segmentId).toBe(1);
+    expect(replay.session).toBe(undefined);
 
     // let's simulate the default rate-limit time of inactivity (60secs) and check that we
     // don't do anything in the meantime or after the time has passed

packages/replay/test/integration/rateLimiting.test.ts

@@ -7,8 +7,8 @@ import type { ReplayContainer } from '../../src/replay';
 import { addEvent } from '../../src/util/addEvent';
 import * as SendReplayRequest from '../../src/util/sendReplayRequest';
 import { BASE_TIMESTAMP, mockRrweb, mockSdk } from '../index';
-import { clearSession } from '../utils/clearSession';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { clearSession } from '../../src/session/clearSession';
 
 useFakeTimers();
 
@@ -396,13 +396,8 @@ describe('Integration | sendReplayEvent', () => {
       'Something bad happened',
     );
 
-    // No activity has occurred, session's last activity should remain the same
-    expect(replay.session?.lastActivity).toBe(BASE_TIMESTAMP);
-
-    // segmentId increases despite error
-    expect(replay.session?.segmentId).toBe(1);
-
-    // Replay should be completely stopped now
+    // Replay has stopped, no session should exist
+    expect(replay.session).toBe(undefined);
     expect(replay.isEnabled()).toBe(false);
 
     // Events are ignored now, because we stopped

packages/replay/test/integration/sendReplayEvent.test.ts

@@ -15,8 +15,8 @@ import { createPerformanceSpans } from '../../src/util/createPerformanceSpans';
 import { BASE_TIMESTAMP } from '../index';
 import type { RecordMock } from '../mocks/mockRrweb';
 import { resetSdkMock } from '../mocks/resetSdkMock';
-import { clearSession } from '../utils/clearSession';
 import { useFakeTimers } from '../utils/use-fake-timers';
+import { clearSession } from '../../src/session/clearSession';
 
 useFakeTimers();