update worker

Author: billyvg

packages/replay/src/constants.ts

@@ -7,6 +7,8 @@ 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,9 +13,6 @@ 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

@@ -230,7 +230,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
     // XXX: See note in `get length()`
     this._eventBufferItemLength = 0;
 
-    await promise
+    await promise;
 
     this._pendingEvents = [];
     return promise as Promise<Uint8Array>;

packages/replay/src/integration.ts

@@ -171,7 +171,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       return;
     }
 
-    this._replay.start();
+    void this._replay.start();
   }
 
   /**

packages/replay/src/replay.ts

@@ -38,17 +38,21 @@ import type {
   Session,
   WorkerAddEventResponse,
 } 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 { createPerformanceSpans } from './util/createPerformanceSpans';
 import { createRecordingData } from './util/createRecordingData';
 import { createReplayEnvelope } from './util/createReplayEnvelope';
 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 { prepareReplayEvent } from './util/prepareReplayEvent';
+import { setFlushState } from './util/setFlushState';
 
 /**
  * Returns true to return control to calling function, otherwise continue with normal batching
@@ -164,7 +168,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Creates or loads a session, attaches listeners to varying events (DOM,
    * _performanceObserver, Recording, Sentry SDK, etc)
    */
-  start(): void {
+  async start(): Promise<void> {
     this.setInitialState();
 
     this.loadSession({ expiry: SESSION_IDLE_DURATION });
@@ -175,6 +179,19 @@ 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 this.sendReplayRequest(pendingEvent);
+        clearPendingReplay();
+      }
+    } catch {
+      // ignore
+    }
+
     if (!this.session.sampled) {
       // If session was not sampled, then we do not initialize the integration at all.
       return;
@@ -193,7 +210,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     this.updateSessionActivity();
 
     this.eventBuffer = createEventBuffer({
-      useCompression: Boolean(this._options.useCompression),
+      useCompression,
     });
 
     this.addListeners();
@@ -318,6 +335,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     // enable flag to create the root replay
     if (type === 'new') {
       this.setInitialState();
+      clearPendingReplay();
     }
 
     if (session.id !== this.session?.id) {
@@ -805,36 +823,61 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    await this.addPerformanceEntries();
+    try {
+      const promises: Promise<any>[] = [];
 
-    if (!this.eventBuffer?.length) {
-      return;
-    }
+      promises.push(this.addPerformanceEntries());
+
+      // Do not continue if there are no pending events in buffer
+      if (!this.eventBuffer?.pendingLength) {
+        return;
+      }
 
-    // Only attach memory event if eventBuffer is not empty
-    await addMemoryEntry(this);
+      // Only attach memory entry if eventBuffer is not empty
+      promises.push(addMemoryEntry(this));
 
-    try {
-      // Note this empties the event buffer regardless of outcome of sending replay
-      const recordingData = await this.eventBuffer.finish();
+      // This empties the event buffer regardless of outcome of sending replay
+      promises.push(this.eventBuffer.finish());
 
       // NOTE: Copy values from instance members, as it's possible they could
       // change before the flush finishes.
       const replayId = this.session.id;
       const eventContext = this.popEventContext();
       // 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
+      setFlushState(FlushState.START, {
+        events: this.eventBuffer.pendingEvents,
+        replayId,
+        eventContext,
+        segmentId,
+        includeReplayStartTimestamp: segmentId === 0,
+        timestamp: new Date().getTime(),
+      });
+
+      // Save session (new segment id) after we save flush data assuming
       this._maybeSaveSession();
 
-      await this.sendReplay({
+      const [, , recordingData] = await Promise.all(promises);
+
+      const sendReplayPromise = this.sendReplay({
         replayId,
         events: recordingData,
         segmentId,
         includeReplayStartTimestamp: segmentId === 0,
         eventContext,
       });
+
+      // If replay request starts, optimistically update some states
+      setFlushState(FlushState.SENT_REQUEST);
+
+      await sendReplayPromise;
+
+      setFlushState(FlushState.SENT_REQUEST);
     } catch (err) {
       this.handleException(err);
+      setFlushState(FlushState.ERROR);
     }
   }
 
@@ -956,6 +999,10 @@ export class ReplayContainer implements ReplayContainerInterface {
       errorSampleRate: this._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:
     {

packages/replay/src/types.ts

@@ -18,6 +18,17 @@ export interface SendReplay {
   timestamp?: number;
 }
 
+export enum FlushState {
+  START = 'start',
+  SENT_REQUEST = 'sent-request',
+  COMPLETE = 'complete',
+  ERROR = 'error',
+}
+
+export type PendingReplayData = Omit<SendReplay, 'events'> & {
+  events: RecordingEvent[];
+};
+
 export type InstrumentationTypeBreadcrumb = 'dom' | 'scope';
 
 /**

packages/replay/src/util/clearPendingReplay.ts

@@ -0,0 +1,9 @@
+import { PENDING_REPLAY_DATA_KEY, PENDING_REPLAY_STATUS_KEY, WINDOW } from '../constants';
+
+/**
+ * Clears pending segment that was previously unable to be sent (e.g. due to page reload).
+ */
+export function clearPendingReplay(): void {
+  WINDOW.sessionStorage.removeItem(PENDING_REPLAY_STATUS_KEY);
+  WINDOW.sessionStorage.removeItem(PENDING_REPLAY_DATA_KEY);
+}

packages/replay/src/util/getPendingReplay.ts

@@ -0,0 +1,41 @@
+import { PENDING_REPLAY_DATA_KEY, WINDOW } from '../constants';
+import { createEventBuffer } from '../eventBuffer';
+import { PendingReplayData, SendReplay } from '../types';
+
+/**
+ * Attempts to flush pending segment that was previously unable to be sent
+ * (e.g. due to page reload).
+ */
+export async function getPendingReplay({ useCompression }: { useCompression: boolean }): Promise<SendReplay | null> {
+  try {
+    const leftoverData = WINDOW.sessionStorage.getItem(PENDING_REPLAY_DATA_KEY);
+
+    // Potential data that was not flushed
+    const parsedData = leftoverData && (JSON.parse(leftoverData) as Partial<PendingReplayData> | null);
+    const { events, replayId, segmentId, includeReplayStartTimestamp, eventContext, timestamp } = parsedData || {};
+
+    // Ensure data integrity -- also *skip* includeReplayStartTimestamp as it
+    // implies a checkout which we do not store due to potential size
+    if (!events || !replayId || !segmentId || !eventContext || !timestamp || includeReplayStartTimestamp) {
+      return null;
+    }
+
+    // start a local eventBuffer
+    const eventBuffer = createEventBuffer({
+      useCompression,
+    });
+
+    await Promise.all(events.map(event => eventBuffer.addEvent(event)));
+
+    return {
+      replayId,
+      segmentId,
+      eventContext,
+      timestamp,
+      includeReplayStartTimestamp: false,
+      events: await eventBuffer.finish(),
+    };
+  } catch {
+    return null;
+  }
+}

packages/replay/src/util/setFlushState.ts

@@ -0,0 +1,19 @@
+import { PENDING_REPLAY_DATA_KEY, PENDING_REPLAY_STATUS_KEY, WINDOW } from '../constants';
+import { FlushState, PendingReplayData } from '../types';
+
+/**
+ *
+ */
+export function setFlushState(state: FlushState, data?: PendingReplayData): void {
+  if (data) {
+    WINDOW.sessionStorage.setItem(PENDING_REPLAY_DATA_KEY, JSON.stringify(data));
+  }
+
+  if (state === FlushState.SENT_REQUEST) {
+    WINDOW.sessionStorage.removeItem(PENDING_REPLAY_DATA_KEY);
+  } else if (state === FlushState.COMPLETE) {
+    WINDOW.sessionStorage.removeItem(PENDING_REPLAY_STATUS_KEY);
+  } else {
+    WINDOW.sessionStorage.setItem(PENDING_REPLAY_STATUS_KEY, state);
+  }
+}