fix(replay): Replace _waitForError with recordingMode (#6489)

Author: mydea

packages/replay/src/coreHandlers/handleGlobalEvent.ts

@@ -22,11 +22,11 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
 
     // Only tag transactions with replayId if not waiting for an error
     // @ts-ignore private
-    if (event.type !== 'transaction' || !replay._waitForError) {
+    if (event.type !== 'transaction' || replay.recordingMode === 'session') {
       event.tags = { ...event.tags, replayId: replay.session?.id };
     }
 
-    // Collect traceIds in _context regardless of `_waitForError` - if it's true,
+    // Collect traceIds in _context regardless of `recordingMode` - if it's true,
     // _context gets cleared on every checkout
     if (event.type === 'transaction' && event.contexts && event.contexts.trace && event.contexts.trace.trace_id) {
       replay.getContext().traceIds.add(event.contexts.trace.trace_id as string);
@@ -47,8 +47,7 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
 
     // Need to be very careful that this does not cause an infinite loop
     if (
-      // @ts-ignore private
-      replay._waitForError &&
+      replay.recordingMode === 'error' &&
       event.exception &&
       event.message !== UNABLE_TO_SEND_REPLAY // ignore this error because otherwise we could loop indefinitely with trying to capture replay and failing
     ) {
@@ -62,8 +61,7 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
         if (replay.stopRecording()) {
           // Reset all "capture on error" configuration before
           // starting a new recording
-          // @ts-ignore private
-          replay._waitForError = false;
+          replay.recordingMode = 'session';
           replay.startRecording();
         }
       });

packages/replay/src/replay.ts

@@ -35,6 +35,7 @@ import type {
   RecordingOptions,
   ReplayContainer as ReplayContainerInterface,
   ReplayPluginOptions,
+  ReplayRecordingMode,
   SendReplay,
   Session,
 } from './types';
@@ -64,6 +65,13 @@ export class ReplayContainer implements ReplayContainerInterface {
 
   public session: Session | undefined;
 
+  /**
+   * Recording can happen in one of two modes:
+   * * session: Record the whole session, sending it continuously
+   * * error: Always keep the last 60s of recording, and when an error occurs, send it immediately
+   */
+  public recordingMode: ReplayRecordingMode = 'session';
+
   /**
    * Options to pass to `rrweb.record()`
    */
@@ -96,12 +104,6 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   private _isPaused: boolean = false;
 
-  /**
-   * Integration will wait until an error occurs before creating and sending a
-   * replay.
-   */
-  private _waitForError: boolean = false;
-
   /**
    * Have we attached listeners to the core SDK?
    * Note we have to track this as there is no way to remove instrumentation handlers.
@@ -173,7 +175,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     // when an error will occur, so we need to keep a buffer of
     // replay events.
     if (this.session.sampled === 'error') {
-      this._waitForError = true;
+      this.recordingMode = 'error';
     }
 
     // setup() is generally called on page load or manually - in both cases we
@@ -203,7 +205,7 @@ export class ReplayContainer implements ReplayContainerInterface {
         // When running in error sampling mode, we need to overwrite `checkoutEveryNth`
         // Without this, it would record forever, until an error happens, which we don't want
         // instead, we'll always keep the last 60 seconds of replay before an error happened
-        ...(this._waitForError && { checkoutEveryNth: 60000 }),
+        ...(this.recordingMode === 'error' && { checkoutEveryNth: 60000 }),
         emit: this.handleRecordingEmit,
       });
     } catch (err) {
@@ -403,12 +405,12 @@ export class ReplayContainer implements ReplayContainerInterface {
    * processing and hand back control to caller.
    */
   addUpdate(cb: AddUpdateCallback): void {
-    // We need to always run `cb` (e.g. in the case of `this._waitForError == true`)
+    // We need to always run `cb` (e.g. in the case of `this.recordingMode == 'error'`)
     const cbResult = cb?.();
 
     // If this option is turned on then we will only want to call `flush`
     // explicitly
-    if (this._waitForError) {
+    if (this.recordingMode === 'error') {
       return;
     }
 
@@ -445,7 +447,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       // when an error occurs. Clear any state that happens before this current
       // checkout. This needs to happen before `addEvent()` which updates state
       // dependent on this reset.
-      if (this._waitForError && event.type === 2) {
+      if (this.recordingMode === 'error' && event.type === 2) {
         this.setInitialState();
       }
 
@@ -471,7 +473,7 @@ export class ReplayContainer implements ReplayContainerInterface {
 
       // See note above re: session start needs to reflect the most recent
       // checkout.
-      if (this._waitForError && this.session && this._context.earliestEvent) {
+      if (this.recordingMode === 'error' && this.session && this._context.earliestEvent) {
         this.session.started = this._context.earliestEvent;
         this._maybeSaveSession();
       }
@@ -744,10 +746,10 @@ export class ReplayContainer implements ReplayContainerInterface {
   }
 
   /**
-   * Only flush if `this._waitForError` is false.
+   * Only flush if `this.recordingMode === 'session'`
    */
   conditionalFlush(): void {
-    if (this._waitForError) {
+    if (this.recordingMode === 'error') {
       return;
     }
 

packages/replay/src/types.ts

@@ -7,6 +7,8 @@ export type RecordedEvents = Uint8Array | string;
 
 export type AllPerformanceEntry = PerformancePaintTiming | PerformanceResourceTiming | PerformanceNavigationTiming;
 
+export type ReplayRecordingMode = 'session' | 'error';
+
 export interface SendReplay {
   events: RecordedEvents;
   replayId: string;
@@ -215,6 +217,7 @@ export interface ReplayContainer {
   eventBuffer: EventBuffer | null;
   performanceEvents: AllPerformanceEntry[];
   session: Session | undefined;
+  recordingMode: ReplayRecordingMode;
   isEnabled(): boolean;
   isPaused(): boolean;
   getContext(): InternalEventContext;

packages/replay/test/unit/index-handleGlobalEvent.test.ts

@@ -83,9 +83,8 @@ it('only tags errors with replay id, adds trace and error id to context for erro
   jest.runAllTimers();
   await new Promise(process.nextTick); // wait for flush
 
-  // Turns off `_waitForError` mode
-  // @ts-ignore private
-  expect(replay._waitForError).toBe(false);
+  // Rerverts `recordingMode` to session
+  expect(replay.recordingMode).toBe('session');
 });
 
 it('strips out dropped events from errorIds', async () => {