feat(replay): Do not capture replays < 5 seconds

Promotes the feature from #7949 to GA.

Do not immediately flush on snapshot checkouts, instead delay by minimum flush delay (5 seconds). This means that we will not collect replays < 5 seconds. e.g. User opens site and immediately closes the tab.

Closes getsentry/team-replay#65

Author: billyvg

packages/replay/src/replay.ts

@@ -509,6 +509,13 @@ export class ReplayContainer implements ReplayContainerInterface {
     return this.flushImmediate();
   }
 
+  /**
+   * Flush using debounce flush
+   */
+  public flush(): Promise<void> {
+    return this._debouncedFlush() as Promise<void>;
+  }
+
   /**
    * Always flush via `_debouncedFlush` so that we do not have flushes triggered
    * from calling both `flush` and `_debouncedFlush`. Otherwise, there could be

packages/replay/src/types.ts

@@ -316,7 +316,6 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
       scrollTimeout: number;
       ignoreSelectors: string[];
     };
-    delayFlushOnCheckout: number;
   }>;
 }
 
@@ -553,6 +552,7 @@ export interface ReplayContainer {
   stopRecording(): boolean;
   sendBufferedReplayOrFlush(options?: SendBufferedReplayOptions): Promise<void>;
   conditionalFlush(): Promise<void>;
+  flush(): Promise<void>;
   flushImmediate(): Promise<void>;
   cancelFlush(): void;
   triggerUserActivity(): void;

packages/replay/src/util/handleRecordingEmit.ts

@@ -80,37 +80,12 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
         }
       }
 
-      const options = replay.getOptions();
-
-      // TODO: We want this as an experiment so that we can test
-      // internally and create metrics before making this the default
-      if (options._experiments.delayFlushOnCheckout) {
+      if (replay.recordingMode === 'session') {
         // If the full snapshot is due to an initial load, we will not have
         // a previous session ID. In this case, we want to buffer events
         // for a set amount of time before flushing. This can help avoid
         // capturing replays of users that immediately close the window.
-        setTimeout(() => replay.conditionalFlush(), options._experiments.delayFlushOnCheckout);
-
-        // Cancel any previously debounced flushes to ensure there are no [near]
-        // simultaneous flushes happening. The latter request should be
-        // insignificant in this case, so wait for additional user interaction to
-        // trigger a new flush.
-        //
-        // This can happen because there's no guarantee that a recording event
-        // happens first. e.g. a mouse click can happen and trigger a debounced
-        // flush before the checkout.
-        replay.cancelFlush();
-
-        return true;
-      }
-
-      // Flush immediately so that we do not miss the first segment, otherwise
-      // it can prevent loading on the UI. This will cause an increase in short
-      // replays (e.g. opening and closing a tab quickly), but these can be
-      // filtered on the UI.
-      if (replay.recordingMode === 'session') {
-        // We want to ensure the worker is ready, as otherwise we'd always send the first event uncompressed
-        void replay.flushImmediate();
+        void replay.flush();
       }
 
       return true;

packages/replay/test/integration/coreHandlers/handleAfterSendEvent.test.ts

@@ -148,9 +148,13 @@ describe('Integration | coreHandlers | handleAfterSendEvent', () => {
 
     jest.runAllTimers();
     await new Promise(process.nextTick);
-
     // Send twice, one for the error & one right after for the session conversion
+    expect(mockSend).toHaveBeenCalledTimes(1);
+
+    jest.runAllTimers();
+    await new Promise(process.nextTick);
     expect(mockSend).toHaveBeenCalledTimes(2);
+
     // This is removed now, because it has been converted to a "session" session
     expect(Array.from(replay.getContext().errorIds)).toEqual([]);
     expect(replay.isEnabled()).toBe(true);