fix(replay): Ensure initial event is compressed

Author: mydea

packages/replay/src/constants.ts

@@ -27,5 +27,8 @@ export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style), body *:not(script)';
 export const DEFAULT_FLUSH_MIN_DELAY = 5_000;
 export const DEFAULT_FLUSH_MAX_DELAY = 5_000;
 
+/* How long to wait for error checkouts */
+export const ERROR_CHECKOUT_TIME = 60_000;
+
 export const RETRY_BASE_INTERVAL = 5000;
 export const RETRY_MAX_COUNT = 3;

packages/replay/src/eventBuffer/EventBufferProxy.ts

@@ -20,7 +20,7 @@ export class EventBufferProxy implements EventBuffer {
     this._compression = new EventBufferCompressionWorker(worker);
     this._used = this._fallback;
 
-    void this._ensureWorkerIsLoaded();
+    void this.ensureWorkerIsLoaded();
   }
 
   /** @inheritDoc */
@@ -54,7 +54,7 @@ export class EventBufferProxy implements EventBuffer {
   }
 
   /** Ensure the worker has loaded. */
-  private async _ensureWorkerIsLoaded(): Promise<void> {
+  public async ensureWorkerIsLoaded(): Promise<void> {
     try {
       await this._compression.ensureReady();
     } catch (error) {

packages/replay/src/replay.ts

@@ -5,9 +5,16 @@ import type { Breadcrumb, ReplayRecordingMode } from '@sentry/types';
 import type { RateLimits } from '@sentry/utils';
 import { disabledUntil, logger } from '@sentry/utils';
 
-import { MAX_SESSION_LIFE, SESSION_IDLE_DURATION, VISIBILITY_CHANGE_TIMEOUT, WINDOW } from './constants';
+import {
+  ERROR_CHECKOUT_TIME,
+  MAX_SESSION_LIFE,
+  SESSION_IDLE_DURATION,
+  VISIBILITY_CHANGE_TIMEOUT,
+  WINDOW,
+} from './constants';
 import { setupPerformanceObserver } from './coreHandlers/performanceObserver';
 import { createEventBuffer } from './eventBuffer';
+import { EventBufferProxy } from './eventBuffer/EventBufferProxy';
 import { getSession } from './session/getSession';
 import { saveSession } from './session/saveSession';
 import type {
@@ -196,7 +203,7 @@ export class ReplayContainer implements ReplayContainerInterface {
         // When running in error sampling mode, we need to overwrite `checkoutEveryNms`
         // Without this, it would record forever, until an error happens, which we don't want
         // instead, we'll always keep the last 60 seconds of replay before an error happened
-        ...(this.recordingMode === 'error' && { checkoutEveryNms: 60000 }),
+        ...(this.recordingMode === 'error' && { checkoutEveryNms: ERROR_CHECKOUT_TIME }),
         emit: this._handleRecordingEmit,
       });
     } catch (err) {
@@ -323,9 +330,18 @@ export class ReplayContainer implements ReplayContainerInterface {
    * from calling both `flush` and `_debouncedFlush`. Otherwise, there could be
    * cases of mulitple flushes happening closely together.
    */
-  public flushImmediate(): Promise<void> {
+  public async flushImmediate(waitForCompression?: boolean): Promise<void> {
     this._debouncedFlush();
     // `.flush` is provided by the debounced function, analogously to lodash.debounce
+
+    // Ensure the worker is loaded, so the sent event is compressed
+    if (waitForCompression && this.eventBuffer instanceof EventBufferProxy) {
+      try {
+        await this.eventBuffer.ensureWorkerIsLoaded();
+      } catch (error) {
+        // If this fails, we'll just send uncompressed events
+      }
+    }
     return this._debouncedFlush.flush() as Promise<void>;
   }
 
@@ -536,7 +552,8 @@ export class ReplayContainer implements ReplayContainerInterface {
       // replays (e.g. opening and closing a tab quickly), but these can be
       // filtered on the UI.
       if (this.recordingMode === 'session') {
-        void this.flushImmediate();
+        // We want to ensure the worker is ready, as otherwise we'd always send the first event uncompressed
+        void this.flushImmediate(true);
       }
 
       return true;

packages/replay/test/integration/errorSampleRate.test.ts

@@ -1,6 +1,12 @@
 import { captureException } from '@sentry/core';
 
-import { DEFAULT_FLUSH_MIN_DELAY, REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT, WINDOW } from '../../src/constants';
+import {
+  DEFAULT_FLUSH_MIN_DELAY,
+  ERROR_CHECKOUT_TIME,
+  REPLAY_SESSION_KEY,
+  VISIBILITY_CHANGE_TIMEOUT,
+  WINDOW,
+} from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
 import { addEvent } from '../../src/util/addEvent';
 import { PerformanceEntryResource } from '../fixtures/performanceEntry/resource';
@@ -322,7 +328,7 @@ describe('Integration | errorSampleRate', () => {
   });
 
   it('has correct timestamps when error occurs much later than initial pageload/checkout', async () => {
-    const ELAPSED = 60000;
+    const ELAPSED = ERROR_CHECKOUT_TIME;
     const TEST_EVENT = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
     mockRecord._emitter(TEST_EVENT);
 

packages/replay/test/unit/eventBuffer.test.ts

@@ -58,7 +58,7 @@ describe('Unit | eventBuffer', () => {
       expect(buffer).toBeInstanceOf(EventBufferProxy);
 
       // Ensure worker is ready
-      await buffer['_ensureWorkerIsLoaded']();
+      await buffer.ensureWorkerIsLoaded();
 
       buffer.addEvent(TEST_EVENT);
       buffer.addEvent(TEST_EVENT);
@@ -80,7 +80,7 @@ describe('Unit | eventBuffer', () => {
       expect(buffer).toBeInstanceOf(EventBufferProxy);
 
       // Ensure worker is ready
-      await buffer['_ensureWorkerIsLoaded']();
+      await buffer.ensureWorkerIsLoaded();
 
       await buffer.addEvent(TEST_EVENT);
       await buffer.addEvent(TEST_EVENT);
@@ -103,7 +103,7 @@ describe('Unit | eventBuffer', () => {
       expect(buffer).toBeInstanceOf(EventBufferProxy);
 
       // Ensure worker is ready
-      await buffer['_ensureWorkerIsLoaded']();
+      await buffer.ensureWorkerIsLoaded();
 
       buffer.addEvent(TEST_EVENT);
 
@@ -127,7 +127,7 @@ describe('Unit | eventBuffer', () => {
       expect(buffer).toBeInstanceOf(EventBufferProxy);
 
       // Ensure worker is ready
-      await buffer['_ensureWorkerIsLoaded']();
+      await buffer.ensureWorkerIsLoaded();
 
       buffer.addEvent(TEST_EVENT);
 
@@ -177,7 +177,7 @@ describe('Unit | eventBuffer', () => {
       expect(result).toEqual(JSON.stringify([TEST_EVENT, TEST_EVENT]));
 
       // Now actually finish loading the worker
-      await buffer['_ensureWorkerIsLoaded']();
+      await buffer.ensureWorkerIsLoaded();
 
       buffer.addEvent(TEST_EVENT);
       buffer.addEvent(TEST_EVENT);
@@ -211,7 +211,7 @@ describe('Unit | eventBuffer', () => {
       expect(result).toEqual(JSON.stringify([TEST_EVENT, TEST_EVENT]));
 
       // Now actually finish loading the worker - which triggers an error
-      await buffer['_ensureWorkerIsLoaded']();
+      await buffer.ensureWorkerIsLoaded();
 
       buffer.addEvent(TEST_EVENT);
       buffer.addEvent(TEST_EVENT);