feat(replay): Change addEvent to be async

`addEvent` should be async as it waits for a response from Compression worker.

Author: billyvg

packages/replay/src/eventBuffer.ts

@@ -2,10 +2,9 @@
 // TODO: figure out member access types and remove the line above
 
 import { captureException } from '@sentry/core';
-import { ReplayRecordingData } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
-import type { EventBuffer, RecordingEvent, WorkerRequest, WorkerResponse } from './types';
+import type { EventBuffer, RecordingEvent, WorkerAddEventResponse,WorkerRequest, WorkerResponse } from './types';
 import workerString from './worker/worker.js';
 
 interface CreateEventBufferParams {
@@ -54,13 +53,14 @@ class EventBufferArray implements EventBuffer {
     this._events = [];
   }
 
-  public addEvent(event: RecordingEvent, isCheckout?: boolean): void {
+  public async addEvent(event: RecordingEvent, isCheckout?: boolean): Promise<boolean> {
     if (isCheckout) {
       this._events = [event];
-      return;
+      return true;
     }
 
     this._events.push(event);
+    return true
   }
 
   public finish(): Promise<string> {
@@ -107,8 +107,10 @@ export class EventBufferCompressionWorker implements EventBuffer {
 
   /**
    * Add an event to the event buffer.
+   *
+   * Returns true if event was successfuly received and processed by worker.
    */
-  public async addEvent(event: RecordingEvent, isCheckout?: boolean): Promise<ReplayRecordingData> {
+  public async addEvent(event: RecordingEvent, isCheckout?: boolean): Promise<WorkerAddEventResponse> {
     if (isCheckout) {
       // This event is a checkout, make sure worker buffer is cleared before
       // proceeding.
@@ -178,17 +180,17 @@ export class EventBufferCompressionWorker implements EventBuffer {
   /**
    * Send the event to the worker.
    */
-  private _sendEventToWorker(event: RecordingEvent): Promise<ReplayRecordingData> {
+  private async _sendEventToWorker(event: RecordingEvent): Promise<WorkerAddEventResponse> {
     const promise = this._postMessage({
-      id: this._getAndIncrementId(),
+      id: this._getAndIncrementId(), 
       method: 'addEvent',
       args: [event],
     });
 
     // XXX: See note in `get length()`
     this._eventBufferItemLength++;
 
-    return promise;
+    return promise as Promise<WorkerAddEventResponse>;
   }
 
   /**

packages/replay/src/replay.ts

@@ -36,6 +36,7 @@ import type {
   ReplayPluginOptions,
   SendReplay,
   Session,
+  WorkerAddEventResponse,
 } from './types';
 import { addEvent } from './util/addEvent';
 import { addMemoryEntry } from './util/addMemoryEntry';
@@ -702,12 +703,12 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Observed performance events are added to `this.performanceEvents`. These
    * are included in the replay event before it is finished and sent to Sentry.
    */
-  addPerformanceEntries(): void {
+  addPerformanceEntries(): Promise<Array<WorkerAddEventResponse|null>> {
     // Copy and reset entries before processing
     const entries = [...this.performanceEvents];
     this.performanceEvents = [];
 
-    createPerformanceSpans(this, createPerformanceEntries(entries));
+    return Promise.all(createPerformanceSpans(this, createPerformanceEntries(entries)));
   }
 
   /**

packages/replay/src/types.ts

@@ -48,9 +48,11 @@ export interface WorkerResponse {
   id: number;
   method: string;
   success: boolean;
-  response: ReplayRecordingData;
+  response: unknown;
 }
 
+export type WorkerAddEventResponse = boolean;
+
 export interface SampleRates {
   /**
    * The sample rate for session-long replays. 1.0 will record all sessions and
@@ -210,8 +212,22 @@ export interface Session {
 
 export interface EventBuffer {
   readonly length: number;
+
+  /**
+   * Destroy the event buffer.
+   */
   destroy(): void;
-  addEvent(event: RecordingEvent, isCheckout?: boolean): void;
+
+  /**
+   * Add an event to the event buffer.
+   *
+   * Returns true if event was successfully added.
+   */
+  addEvent(event: RecordingEvent, isCheckout?: boolean): Promise<WorkerAddEventResponse>;
+  
+  /**
+   * Clears and returns the contents and the buffer.
+   */
   finish(): Promise<ReplayRecordingData>;
 }
 

packages/replay/src/util/addEvent.ts

@@ -1,18 +1,19 @@
+
 import { SESSION_IDLE_DURATION } from '../constants';
-import type { RecordingEvent, ReplayContainer } from '../types';
+import type { RecordingEvent, ReplayContainer, WorkerAddEventResponse } from '../types';
 
 /**
  * Add an event to the event buffer
  */
-export function addEvent(replay: ReplayContainer, event: RecordingEvent, isCheckout?: boolean): void {
+export async function addEvent(replay: ReplayContainer, event: RecordingEvent, isCheckout?: boolean): Promise<WorkerAddEventResponse|null> {
   if (!replay.eventBuffer) {
     // This implies that `_isEnabled` is false
-    return;
+    return null;
   }
 
   if (replay.isPaused()) {
     // Do not add to event buffer when recording is paused
-    return;
+    return null;
   }
 
   // TODO: sadness -- we will want to normalize timestamps to be in ms -
@@ -25,7 +26,7 @@ export function addEvent(replay: ReplayContainer, event: RecordingEvent, isCheck
   // comes back to trigger a new session. The performance entries rely on
   // `performance.timeOrigin`, which is when the page first opened.
   if (timestampInMs + SESSION_IDLE_DURATION < new Date().getTime()) {
-    return;
+    return null;
   }
 
   // Only record earliest event if a new session was created, otherwise it
@@ -35,5 +36,5 @@ export function addEvent(replay: ReplayContainer, event: RecordingEvent, isCheck
     replay.getContext().earliestEvent = timestampInMs;
   }
 
-  replay.eventBuffer.addEvent(event, isCheckout);
+  return replay.eventBuffer.addEvent(event, isCheckout);
 }

packages/replay/src/util/addMemoryEntry.ts

@@ -1,5 +1,5 @@
 import { WINDOW } from '../constants';
-import type { ReplayContainer, ReplayPerformanceEntry } from '../types';
+import type { ReplayContainer, ReplayPerformanceEntry, WorkerAddEventResponse } from '../types';
 import { createPerformanceSpans } from './createPerformanceSpans';
 
 type ReplayMemoryEntry = ReplayPerformanceEntry & { data: { memory: MemoryInfo } };
@@ -14,15 +14,16 @@ interface MemoryInfo {
  * Create a "span" for the total amount of memory being used by JS objects
  * (including v8 internal objects).
  */
-export function addMemoryEntry(replay: ReplayContainer): void {
+export async function addMemoryEntry(replay: ReplayContainer): Promise<Array<WorkerAddEventResponse|null>> {
   // window.performance.memory is a non-standard API and doesn't work on all browsers, so we try-catch this
   try {
-    createPerformanceSpans(replay, [
+    return Promise.all(createPerformanceSpans(replay, [
       // @ts-ignore memory doesn't exist on type Performance as the API is non-standard (we check that it exists above)
       createMemoryEntry(WINDOW.performance.memory),
-    ]);
+    ]));
   } catch (error) {
     // Do nothing
+    return []
   }
 }
 

packages/replay/src/util/createPerformanceSpans.ts

@@ -1,13 +1,13 @@
 import { EventType } from 'rrweb';
 
-import type { ReplayContainer, ReplayPerformanceEntry } from '../types';
+import type { ReplayContainer, ReplayPerformanceEntry, WorkerAddEventResponse } from '../types';
 import { addEvent } from './addEvent';
 
 /**
  * Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
  */
-export function createPerformanceSpans(replay: ReplayContainer, entries: ReplayPerformanceEntry[]): void {
-  entries.map(({ type, start, end, name, data }) =>
+export function createPerformanceSpans(replay: ReplayContainer, entries: ReplayPerformanceEntry[]): Promise<WorkerAddEventResponse|null>[] {
+  return entries.map(({ type, start, end, name, data }) =>
     addEvent(replay, {
       type: EventType.Custom,
       timestamp: start,

packages/replay/worker/src/Compressor.ts

@@ -25,20 +25,21 @@ export class Compressor {
     return;
   }
 
-  public addEvent(data: Record<string, unknown>): void {
+  public addEvent(data: Record<string, unknown>): boolean {
     if (!data) {
-      return;
+      return false;
     }
     // If the event is not the first event, we need to prefix it with a `,` so
     // that we end up with a list of events
     const prefix = this.added > 0 ? ',' : '';
     // TODO: We may want Z_SYNC_FLUSH or Z_FULL_FLUSH (not sure the difference)
     // Using NO_FLUSH here for now as we can create many attachments that our
     // web UI will get API rate limited.
-    this.deflate.push(prefix + JSON.stringify(data), constants.Z_NO_FLUSH);
+    this.deflate.push(prefix + JSON.stringify(data), constants.Z_SYNC_FLUSH);
+
     this.added++;
 
-    return;
+    return true;
   }
 
   public finish(): Uint8Array {

packages/replay/worker/src/handleMessage.ts

@@ -16,8 +16,7 @@ const handlers: Handlers = {
   },
 
   addEvent: (data: Record<string, unknown>) => {
-    compressor.addEvent(data);
-    return '';
+    return compressor.addEvent(data);
   },
 
   finish: () => {