feat(replay): Flush immediately on DOM checkouts

We originally added this delay to flushing to prevent recording short (low value) recordings. However, this causes some issues if the user were to refresh/leave the page before the first recording segment is sent as the backend will consider the replay invalid if it does not have segment id 0 present.

Change to flush immediately to try to reduce the number of replays with missing first segments. Our UI has a default duration filter to hide replays < 5 seconds.

Author: billyvg

packages/replay/src/replay.ts

@@ -534,21 +534,11 @@ export class ReplayContainer {
         this._maybeSaveSession();
       }
 
-      // 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(() => this.conditionalFlush(), this.options.initialFlushDelay);
-
-      // 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.
-      this._debouncedFlush?.cancel();
+      // 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.
+      this.flushImmediate();
 
       return true;
     });