fix(replay): Ensure initial event is compressed

Author: mydea

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 */
@@ -60,7 +60,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

@@ -6,14 +6,15 @@ import { disabledUntil, logger } from '@sentry/utils';
 import { EventType, record } from 'rrweb';
 
 import {
+  ERROR_CHECKOUT_TIME,
   MAX_SESSION_LIFE,
   SESSION_IDLE_DURATION,
   VISIBILITY_CHANGE_TIMEOUT,
   WINDOW,
-  ERROR_CHECKOUT_TIME,
 } 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 {
@@ -328,9 +329,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>;
   }
 
@@ -541,7 +551,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

@@ -2,10 +2,10 @@ import { captureException } from '@sentry/core';
 
 import {
   DEFAULT_FLUSH_MIN_DELAY,
+  ERROR_CHECKOUT_TIME,
   REPLAY_SESSION_KEY,
   VISIBILITY_CHANGE_TIMEOUT,
   WINDOW,
-  ERROR_CHECKOUT_TIME,
 } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
 import { addEvent } from '../../src/util/addEvent';