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

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.

Ref getsentry/team-replay#63

Author: billyvg

packages/replay/src/replay.ts

@@ -463,7 +463,17 @@ export class ReplayContainer implements ReplayContainerInterface {
   }
 
   /**
-   *
+   * Only flush if `this.recordingMode === 'session'`
+   */
+  public conditionalFlush(): Promise<void> {
+    if (this.recordingMode === 'buffer') {
+      return Promise.resolve();
+    }
+
+    return this.flushImmediate();
+  }
+
+  /**
    * Always flush via `_debouncedFlush` so that we do not have flushes triggered
    * from calling both `flush` and `_debouncedFlush`. Otherwise, there could be
    * cases of mulitple flushes happening closely together.
@@ -474,6 +484,13 @@ export class ReplayContainer implements ReplayContainerInterface {
     return this._debouncedFlush.flush() as Promise<void>;
   }
 
+  /**
+   * Cancels queued up flushes.
+   */
+  public cancelFlush(): void {
+    this._debouncedFlush.cancel();
+  }
+
   /** Get the current sesion (=replay) ID */
   public getSessionId(): string | undefined {
     return this.session && this.session.id;
@@ -723,7 +740,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     // Send replay when the page/tab becomes hidden. There is no reason to send
     // replay if it becomes visible, since no actions we care about were done
     // while it was hidden
-    this._conditionalFlush();
+    void this.conditionalFlush();
   }
 
   /**
@@ -807,17 +824,6 @@ export class ReplayContainer implements ReplayContainerInterface {
     return Promise.all(createPerformanceSpans(this, createPerformanceEntries(entries)));
   }
 
-  /**
-   * Only flush if `this.recordingMode === 'session'`
-   */
-  private _conditionalFlush(): void {
-    if (this.recordingMode === 'buffer') {
-      return;
-    }
-
-    void this.flushImmediate();
-  }
-
   /**
    * Clear _context
    */

packages/replay/src/types.ts

@@ -285,6 +285,7 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
       scrollTimeout: number;
       ignoreSelectors: string[];
     };
+    delayFlushOnCheckout: number;
   }>;
 }
 
@@ -515,7 +516,9 @@ export interface ReplayContainer {
   startRecording(): void;
   stopRecording(): boolean;
   sendBufferedReplayOrFlush(options?: SendBufferedReplayOptions): Promise<void>;
+  conditionalFlush(): Promise<void>;
   flushImmediate(): Promise<void>;
+  cancelFlush(): void;
   triggerUserActivity(): void;
   addUpdate(cb: AddUpdateCallback): void;
   getOptions(): ReplayPluginOptions;

packages/replay/src/util/handleRecordingEmit.ts

@@ -80,6 +80,30 @@ 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 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