feat(replay): Add non-async flush for page unloads

Add a method of using a non-async flush so that we are able to send a segment when the user unloads the page.

Author: billyvg

packages/replay/src/constants.ts

@@ -7,8 +7,6 @@ import { GLOBAL_OBJ } from '@sentry/utils';
 export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 export const REPLAY_SESSION_KEY = 'sentryReplaySession';
-export const PENDING_REPLAY_STATUS_KEY = 'sentryReplayFlushStatus';
-export const PENDING_REPLAY_DATA_KEY = 'sentryReplayFlushData';
 export const REPLAY_EVENT_NAME = 'replay_event';
 export const RECORDING_EVENT_NAME = 'replay_recording';
 export const UNABLE_TO_SEND_REPLAY = 'Unable to send Replay';

packages/replay/src/coreHandlers/handleGlobalEvent.ts

@@ -13,6 +13,9 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
   return (event: Event) => {
     // Do not apply replayId to the root event
     if (event.type === REPLAY_EVENT_NAME) {
+      // Replays have separate set of breadcrumbs, do not include breadcrumbs
+      // from core SDK
+      delete event.breadcrumbs;
       return event;
     }
 

packages/replay/src/eventBuffer.ts

@@ -73,14 +73,23 @@ class EventBufferArray implements EventBuffer {
 
   public finish(): Promise<string> {
     return new Promise<string>(resolve => {
-      // Make a copy of the events array reference and immediately clear the
-      // events member so that we do not lose new events while uploading
-      // attachment.
-      const eventsRet = this._events;
-      this._events = [];
-      resolve(JSON.stringify(eventsRet));
+      resolve(
+        this._finish());
     });
   }
+
+  public finishImmediate(): string {
+    return this._finish();
+  }
+
+  private _finish(): string {
+    // Make a copy of the events array reference and immediately clear the
+    // events member so that we do not lose new events while uploading
+    // attachment.
+    const events = this._events;
+    this._events = [];
+    return JSON.stringify(events);
+  }
 }
 
 /**
@@ -158,6 +167,18 @@ export class EventBufferCompressionWorker implements EventBuffer {
     return this._finishRequest(this._getAndIncrementId());
   }
 
+  /**
+   * Finish the event buffer and return the pending events.
+   */
+  public finishImmediate(): string {
+    const events = this._pendingEvents;
+
+    // Ensure worker is still in a good state and disregard the result
+    void this._finishRequest(this._getAndIncrementId());
+
+    return JSON.stringify(events);
+  }
+
   /**
    * Post message to worker and wait for response before resolving promise.
    */

packages/replay/src/replay.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 import { addGlobalEventProcessor, captureException, getCurrentHub } from '@sentry/core';
-import type { Breadcrumb, ReplayRecordingMode } from '@sentry/types';
+import type { Breadcrumb, ReplayRecordingMode, ReplayRecordingData } from '@sentry/types';
 import type { RateLimits } from '@sentry/utils';
 import { addInstrumentationHandler, disabledUntil, logger } from '@sentry/utils';
 import { EventType, record } from 'rrweb';
@@ -28,22 +28,19 @@ import type {
   ReplayContainer as ReplayContainerInterface,
   ReplayPluginOptions,
   Session,
+  FlushOptions,
 } from './types';
-import { FlushState } from './types';
 import { addEvent } from './util/addEvent';
 import { addMemoryEntry } from './util/addMemoryEntry';
-import { clearPendingReplay } from './util/clearPendingReplay';
 import { createBreadcrumb } from './util/createBreadcrumb';
 import { createPerformanceEntries } from './util/createPerformanceEntries';
 import { createPerformanceSpans } from './util/createPerformanceSpans';
 import { debounce } from './util/debounce';
-import { getPendingReplay } from './util/getPendingReplay';
 import { isExpired } from './util/isExpired';
 import { isSessionExpired } from './util/isSessionExpired';
 import { overwriteRecordDroppedEvent, restoreRecordDroppedEvent } from './util/monkeyPatchRecordDroppedEvent';
 import { sendReplay } from './util/sendReplay';
-import { RateLimitError,sendReplayRequest } from './util/sendReplayRequest';
-import { setFlushState } from './util/setFlushState';
+import { RateLimitError } from './util/sendReplayRequest';
 
 /**
  * The main replay container class, which holds all the state and methods for recording and sending replays.
@@ -166,23 +163,6 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    const useCompression = Boolean(this._options.useCompression);
-
-    // Flush any pending events that were previously unable to be sent
-    try {
-      const pendingEvent = await getPendingReplay({ useCompression });
-      if (pendingEvent) {
-        await sendReplayRequest({
-          ...pendingEvent,
-          session: this.session,
-          options: this._options,
-        });
-        clearPendingReplay();
-      }
-    } catch {
-      // ignore
-    }
-
     if (!this.session.sampled) {
       // If session was not sampled, then we do not initialize the integration at all.
       return;
@@ -199,7 +179,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     this._updateSessionActivity();
 
     this.eventBuffer = createEventBuffer({
-      useCompression,
+      useCompression: Boolean(this._options.useCompression),
     });
 
     this._addListeners();
@@ -345,7 +325,6 @@ export class ReplayContainer implements ReplayContainerInterface {
   }
 
   /**
-   *
    * 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.
@@ -356,7 +335,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     return this._debouncedFlush.flush() as Promise<void>;
   }
 
-  /** Get the current sesion (=replay) ID */
+  /** Get the current session (=replay) ID */
   public getSessionId(): string | undefined {
     return this.session && this.session.id;
   }
@@ -387,7 +366,6 @@ export class ReplayContainer implements ReplayContainerInterface {
     // enable flag to create the root replay
     if (type === 'new') {
       this._setInitialState();
-      clearPendingReplay();
     }
 
     const currentSessionId = this.getSessionId();
@@ -647,7 +625,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();
+    this._conditionalFlush({finishImmediate: true});
   }
 
   /**
@@ -769,11 +747,20 @@ export class ReplayContainer implements ReplayContainerInterface {
   /**
    * Only flush if `this.recordingMode === 'session'`
    */
-  private _conditionalFlush(): void {
+  private _conditionalFlush(options: FlushOptions = {}): void {
     if (this.recordingMode === 'error') {
       return;
     }
 
+    /**
+     * Page is likely to unload so need to bypass debounce completely and
+     * synchronously retrieve pending events from buffer and send request asap.
+     */
+    if (options.finishImmediate) {
+      void this._runFlush(options);
+      return;
+    }
+
     void this.flushImmediate();
   }
 
@@ -817,13 +804,15 @@ export class ReplayContainer implements ReplayContainerInterface {
    *
    * Should never be called directly, only by `flush`
    */
-  private async _runFlush(): Promise<void> {
+  private async _runFlush(options: FlushOptions = {}): Promise<void> {
     if (!this.session || !this.eventBuffer) {
       __DEBUG_BUILD__ && logger.error('[Replay] No session or eventBuffer found to flush.');
       return;
     }
 
     try {
+      this._debouncedFlush.cancel();
+
       const promises: Promise<any>[] = [];
 
       promises.push(this._addPerformanceEntries());
@@ -843,29 +832,30 @@ export class ReplayContainer implements ReplayContainerInterface {
       // Always increment segmentId regardless of outcome of sending replay
       const segmentId = this.session.segmentId++;
 
-      // Write to local storage before flushing, in case flush request never starts.
-      // Ensure that this happens before *any* `await` happens, otherwise we
-      // will lose data.
-      setFlushState(FlushState.START, {
-        recordingData: this.eventBuffer.pendingEvents,
-        replayId,
-        eventContext,
-        segmentId,
-        includeReplayStartTimestamp: segmentId === 0,
-        timestamp: new Date().getTime(),
-      });
-
       // Save session (new segment id) after we save flush data assuming either
       // 1) request succeeds or 2) it fails or never happens, in which case we
       // need to retry this segment.
       this._maybeSaveSession();
 
-      // NOTE: Be mindful that nothing after this point (the first `await`)
-      // will run after when the page is unloaded.
-      await Promise.all(promises);
+      let recordingData: ReplayRecordingData;
 
-      // This empties the event buffer regardless of outcome of sending replay
-      const recordingData = await this.eventBuffer.finish();
+      if (options.finishImmediate && this.eventBuffer.pendingLength) {
+        recordingData = this.eventBuffer.finishImmediate();
+      } else {
+        // NOTE: Be mindful that nothing after this point (the first `await`)
+        // will run after when the page is unloaded.
+        await Promise.all(promises);
+
+        // This can be empty due to blur events calling `runFlush` directly. In
+        // the case where we have a snapshot checkout and a blur event
+        // happening near the same time, the blur event can end up emptying the
+        // buffer even if snapshot happens first.
+        if (!this.eventBuffer.pendingLength) {
+          return;
+        }
+        // This empties the event buffer regardless of outcome of sending replay
+        recordingData = await this.eventBuffer.finish();
+      }
 
       const sendReplayPromise = sendReplay({
         replayId,
@@ -878,15 +868,11 @@ export class ReplayContainer implements ReplayContainerInterface {
         timestamp: new Date().getTime(),
       });
 
-      // If replay request starts, optimistically update some states
-      setFlushState(FlushState.SENT_REQUEST);
-
       await sendReplayPromise;
 
-      setFlushState(FlushState.SENT_REQUEST);
+      return;
     } catch (err) {
       this._handleException(err);
-      setFlushState(FlushState.ERROR);
 
       if (err instanceof RateLimitError) {
         this._handleRateLimit(err.rateLimits);

packages/replay/src/types.ts

@@ -7,6 +7,15 @@ export type RecordingOptions = recordOptions;
 
 export type AllPerformanceEntry = PerformancePaintTiming | PerformanceResourceTiming | PerformanceNavigationTiming;
 
+export interface FlushOptions {
+  /**
+   * Attempt to finish the flush immediately without any asynchronous operations
+   * (e.g. worker calls). This is not directly related to `flushImmediate` which
+   * skips the debounced flush.
+   */
+  finishImmediate?: boolean;
+}
+
 export interface SendReplayData {
   recordingData: ReplayRecordingData;
   replayId: string;
@@ -18,13 +27,6 @@ export interface SendReplayData {
   options: ReplayPluginOptions;
 }
 
-export enum FlushState {
-  START = 'start',
-  SENT_REQUEST = 'sent-request',
-  COMPLETE = 'complete',
-  ERROR = 'error',
-}
-
 export type PendingReplayData = Omit<SendReplayData, 'recordingData'|'session'|'options'> & {
   recordingData: RecordingEvent[];
 };
@@ -248,6 +250,11 @@ export interface EventBuffer {
    * Clears and returns the contents of the buffer.
    */
   finish(): Promise<ReplayRecordingData>;
+
+  /**
+* Clears and synchronously returns the pending contents of the buffer. This means no compression.
+*/
+  finishImmediate(): string;
 }
 
 export type AddUpdateCallback = () => boolean | void;

packages/replay/src/util/clearPendingReplay.ts

@@ -69,10 +69,6 @@ export async function sendReplayRequest({
     errorSampleRate: options.errorSampleRate,
   };
 
-  // Replays have separate set of breadcrumbs, do not include breadcrumbs
-  // from core SDK
-  delete replayEvent.breadcrumbs;
-
   /*
   For reference, the fully built event looks something like this:
   {