feat(replay): Add event to capture options on checkouts

Add a custom event that captures configuration options on checkout + segment 0.

Author: billyvg

packages/replay/src/eventBuffer/EventBufferArray.ts

@@ -1,4 +1,4 @@
-import type { AddEventResult, EventBuffer, RecordingEvent } from '../types';
+import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
 import { timestampToMs } from '../util/timestampToMs';
 
 /**
@@ -18,6 +18,11 @@ export class EventBufferArray implements EventBuffer {
     return this.events.length > 0;
   }
 
+  /** @inheritdoc */
+  public get type(): EventBufferType {
+    return 'default';
+  }
+
   /** @inheritdoc */
   public destroy(): void {
     this.events = [];

packages/replay/src/eventBuffer/EventBufferCompressionWorker.ts

@@ -1,6 +1,6 @@
 import type { ReplayRecordingData } from '@sentry/types';
 
-import type { AddEventResult, EventBuffer, RecordingEvent } from '../types';
+import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
 import { timestampToMs } from '../util/timestampToMs';
 import { WorkerHandler } from './WorkerHandler';
 
@@ -22,6 +22,11 @@ export class EventBufferCompressionWorker implements EventBuffer {
     return !!this._earliestTimestamp;
   }
 
+  /** @inheritdoc */
+  public get type(): EventBufferType {
+    return 'worker';
+  }
+
   /**
    * Ensure the worker is ready (or not).
    * This will either resolve when the worker is ready, or reject if an error occured.

packages/replay/src/eventBuffer/EventBufferProxy.ts

@@ -1,7 +1,7 @@
 import type { ReplayRecordingData } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
-import type { AddEventResult, EventBuffer, RecordingEvent } from '../types';
+import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
 import { EventBufferArray } from './EventBufferArray';
 import { EventBufferCompressionWorker } from './EventBufferCompressionWorker';
 
@@ -24,6 +24,11 @@ export class EventBufferProxy implements EventBuffer {
     this._ensureWorkerIsLoadedPromise = this._ensureWorkerIsLoaded();
   }
 
+  /** @inheritdoc */
+  public get type(): EventBufferType {
+    return this._used.type;
+  }
+
   /** @inheritDoc */
   public get hasEvents(): boolean {
     return this._used.hasEvents;

packages/replay/src/integration.ts

@@ -123,6 +123,8 @@ export class Replay implements Integration {
       errorSampleRate,
       useCompression,
       blockAllMedia,
+      maskAllInputs,
+      maskAllText,
       networkDetailAllowUrls,
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),

packages/replay/src/types.ts

@@ -257,6 +257,16 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
    */
   blockAllMedia: boolean;
 
+  /**
+   * Mask all inputs in recordings
+   */
+  maskAllInputs: boolean;
+
+  /**
+   * Mask all text in recordings
+   */
+  maskAllText: boolean;
+
   /**
    * _experiments allows users to enable experimental or internal features.
    * We don't consider such features as part of the public API and hence we don't guarantee semver for them.
@@ -435,12 +445,19 @@ export interface Session {
   shouldRefresh: boolean;
 }
 
+export type EventBufferType = 'default' | 'worker';
+
 export interface EventBuffer {
   /**
    * If any events have been added to the buffer.
    */
   readonly hasEvents: boolean;
 
+  /**
+   * The buffer type
+   */
+  readonly type: EventBufferType;
+
   /**
    * Destroy the event buffer.
    */

packages/replay/src/types/rrweb.ts

@@ -3,7 +3,7 @@
 type blockClass = string | RegExp;
 type maskTextClass = string | RegExp;
 
-enum EventType {
+export enum EventType {
   DomContentLoaded = 0,
   Load = 1,
   FullSnapshot = 2,

packages/replay/src/util/handleRecordingEmit.ts

@@ -2,6 +2,7 @@ import { logger } from '@sentry/utils';
 
 import { saveSession } from '../session/saveSession';
 import type { RecordingEvent, ReplayContainer } from '../types';
+import { EventType } from '../types/rrweb';
 import { addEvent } from './addEvent';
 
 type RecordingEmitCallback = (event: RecordingEvent, isCheckout?: boolean) => void;
@@ -48,6 +49,14 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
         return false;
       }
 
+      // Additionally, create a meta event that will capture certain SDK settings.
+      // In order to handle buffer mode, this needs to either be done when we
+      // receive checkout events or at flush time.
+      //
+      // `isCheckout` is always true, but want to be explicit that it should
+      // only be added for checkouts
+      void addSettingsEvent(replay, isCheckout);
+
       // If there is a previousSessionId after a full snapshot occurs, then
       // the replay session was started due to session expiration. The new session
       // is started before triggering a new checkout and contains the id
@@ -84,3 +93,38 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
     });
   };
 }
+
+/**
+ * Add an event to the event buffer.
+ * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
+ */
+export async function addSettingsEvent(replay: ReplayContainer, isCheckout?: boolean): Promise<void | null> {
+  // Only need to add this event when sending the first segment
+  if (!isCheckout || !replay.session || replay.session.segmentId !== 0) {
+    return null;
+  }
+
+  const options = replay.getOptions();
+  const event = {
+    type: EventType.Custom,
+    timestamp: new Date().getTime(),
+    data: {
+      tag: 'options',
+      payload: {
+        sessionSampleRate: options.sessionSampleRate,
+        errorSampleRate: options.errorSampleRate,
+        useCompressionOption: options.useCompression,
+        blockAllMedia: options.blockAllMedia,
+        maskAllText: options.maskAllText,
+        maskAllInputs: options.maskAllInputs,
+        useCompression: replay.eventBuffer && replay.eventBuffer.type === 'worker',
+        networkDetailHasUrls: options.networkDetailAllowUrls.length > 0,
+        networkCaptureBodies: options.networkCaptureBodies,
+        networkRequestHeaders: options.networkRequestHeaders.length > 0,
+        networkResponseHeaders: options.networkResponseHeaders.length > 0,
+      },
+    },
+  };
+
+  return addEvent(replay, event, true);
+}

packages/replay/src/util/sendReplayRequest.ts

@@ -18,7 +18,6 @@ export async function sendReplayRequest({
   eventContext,
   timestamp,
   session,
-  options,
 }: SendReplayData): Promise<void | TransportMakeRequestResponse> {
   const preparedRecordingData = prepareRecordingData({
     recordingData,
@@ -60,15 +59,6 @@ export async function sendReplayRequest({
     return;
   }
 
-  replayEvent.contexts = {
-    ...replayEvent.contexts,
-    replay: {
-      ...(replayEvent.contexts && replayEvent.contexts.replay),
-      session_sample_rate: options.sessionSampleRate,
-      error_sample_rate: options.errorSampleRate,
-    },
-  };
-
   /*
   For reference, the fully built event looks something like this:
   {
@@ -99,10 +89,7 @@ export async function sendReplayRequest({
       },
       "sdkProcessingMetadata": {},
       "contexts": {
-        "replay": {
-          "session_sample_rate": 1,
-          "error_sample_rate": 0,
-        },
+        "replay": { },
       },
   }
   */

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

@@ -183,12 +183,6 @@ describe('Integration | errorSampleRate', () => {
       recordingPayloadHeader: { segment_id: 0 },
       replayEventPayload: expect.objectContaining({
         replay_type: 'buffer',
-        contexts: {
-          replay: {
-            error_sample_rate: 1,
-            session_sample_rate: 0,
-          },
-        },
       }),
       recordingData: JSON.stringify([
         { data: { isCheckout: true }, timestamp: BASE_TIMESTAMP, type: 2 },

packages/replay/test/integration/session.test.ts

@@ -17,6 +17,7 @@ import { createPerformanceSpans } from '../../src/util/createPerformanceSpans';
 import { BASE_TIMESTAMP } from '../index';
 import type { RecordMock } from '../mocks/mockRrweb';
 import { resetSdkMock } from '../mocks/resetSdkMock';
+import { DEFAULT_OPTIONS_EVENT_PAYLOAD } from '../utils/setupReplayContainer';
 import { useFakeTimers } from '../utils/use-fake-timers';
 
 useFakeTimers();
@@ -388,7 +389,7 @@ describe('Integration | session', () => {
     expect(replay).toHaveLastSentReplay({
       recordingPayloadHeader: { segment_id: 0 },
       recordingData: JSON.stringify([
-        { data: { isCheckout: true }, timestamp: newTimestamp, type: 2 },
+        { type: 5, timestamp: newTimestamp, data: { tag: 'options', payload: DEFAULT_OPTIONS_EVENT_PAYLOAD } },
         {
           type: 5,
           timestamp: newTimestamp,

packages/replay/test/unit/util/handleRecordingEmit.test.ts

@@ -3,11 +3,20 @@ import { EventType } from '@sentry-internal/rrweb';
 import { BASE_TIMESTAMP } from '../..';
 import * as SentryAddEvent from '../../../src/util/addEvent';
 import { getHandleRecordingEmit } from '../../../src/util/handleRecordingEmit';
-import { setupReplayContainer } from '../../utils/setupReplayContainer';
+import { DEFAULT_OPTIONS_EVENT_PAYLOAD, setupReplayContainer } from '../../utils/setupReplayContainer';
 import { useFakeTimers } from '../../utils/use-fake-timers';
 
 useFakeTimers();
 
+const optionsEvent = {
+  type: 5,
+  data: {
+    tag: 'options',
+    payload: DEFAULT_OPTIONS_EVENT_PAYLOAD,
+  },
+  timestamp: BASE_TIMESTAMP,
+};
+
 describe('Unit | util | handleRecordingEmit', () => {
   let addEventMock: jest.SpyInstance;
 
@@ -43,13 +52,14 @@ describe('Unit | util | handleRecordingEmit', () => {
     handler(event);
     await new Promise(process.nextTick);
 
-    expect(addEventMock).toBeCalledTimes(1);
-    expect(addEventMock).toHaveBeenLastCalledWith(replay, event, true);
+    expect(addEventMock).toBeCalledTimes(2);
+    expect(addEventMock).toHaveBeenNthCalledWith(1, replay, event, true);
+    expect(addEventMock).toHaveBeenLastCalledWith(replay, optionsEvent, true);
 
     handler(event);
     await new Promise(process.nextTick);
 
-    expect(addEventMock).toBeCalledTimes(2);
+    expect(addEventMock).toBeCalledTimes(3);
     expect(addEventMock).toHaveBeenLastCalledWith(replay, event, false);
   });
 
@@ -74,13 +84,16 @@ describe('Unit | util | handleRecordingEmit', () => {
     handler(event, true);
     await new Promise(process.nextTick);
 
-    expect(addEventMock).toBeCalledTimes(1);
-    expect(addEventMock).toHaveBeenLastCalledWith(replay, event, true);
+    // Called twice, once for event and once for settings on checkout only
+    expect(addEventMock).toBeCalledTimes(2);
+    expect(addEventMock).toHaveBeenNthCalledWith(1, replay, event, true);
+    expect(addEventMock).toHaveBeenLastCalledWith(replay, optionsEvent, true);
 
     handler(event, true);
     await new Promise(process.nextTick);
 
-    expect(addEventMock).toBeCalledTimes(2);
-    expect(addEventMock).toHaveBeenLastCalledWith(replay, event, true);
+    expect(addEventMock).toBeCalledTimes(4);
+    expect(addEventMock).toHaveBeenNthCalledWith(3, replay, event, true);
+    expect(addEventMock).toHaveBeenLastCalledWith(replay, { ...optionsEvent, timestamp: BASE_TIMESTAMP + 20 }, true);
   });
 });

packages/replay/test/utils/setupReplayContainer.ts

@@ -3,24 +3,30 @@ import { ReplayContainer } from '../../src/replay';
 import { clearSession } from '../../src/session/clearSession';
 import type { RecordingOptions, ReplayPluginOptions } from '../../src/types';
 
+const DEFAULT_OPTIONS = {
+  flushMinDelay: 100,
+  flushMaxDelay: 100,
+  stickySession: false,
+  sessionSampleRate: 0,
+  errorSampleRate: 1,
+  useCompression: false,
+  blockAllMedia: true,
+  networkDetailAllowUrls: [],
+  networkCaptureBodies: true,
+  networkRequestHeaders: [],
+  networkResponseHeaders: [],
+  _experiments: {},
+};
+
 export function setupReplayContainer({
   options,
   recordingOptions,
 }: { options?: Partial<ReplayPluginOptions>; recordingOptions?: Partial<RecordingOptions> } = {}): ReplayContainer {
   const replay = new ReplayContainer({
     options: {
-      flushMinDelay: 100,
-      flushMaxDelay: 100,
-      stickySession: false,
-      sessionSampleRate: 0,
-      errorSampleRate: 1,
-      useCompression: false,
-      blockAllMedia: true,
-      networkDetailAllowUrls: [],
-      networkCaptureBodies: true,
-      networkRequestHeaders: [],
-      networkResponseHeaders: [],
-      _experiments: {},
+      ...DEFAULT_OPTIONS,
+      maskAllInputs: !!recordingOptions?.maskAllInputs,
+      maskAllText: !!recordingOptions?.maskAllText,
       ...options,
     },
     recordingOptions: {
@@ -39,3 +45,17 @@ export function setupReplayContainer({
 
   return replay;
 }
+
+export const DEFAULT_OPTIONS_EVENT_PAYLOAD = {
+  sessionSampleRate: DEFAULT_OPTIONS.sessionSampleRate,
+  errorSampleRate: DEFAULT_OPTIONS.errorSampleRate,
+  useCompressionOption: false,
+  blockAllMedia: DEFAULT_OPTIONS.blockAllMedia,
+  maskAllText: false,
+  maskAllInputs: false,
+  useCompression: DEFAULT_OPTIONS.useCompression,
+  networkDetailHasUrls: DEFAULT_OPTIONS.networkDetailAllowUrls.length > 0,
+  networkCaptureBodies: DEFAULT_OPTIONS.networkCaptureBodies,
+  networkRequestHeaders: DEFAULT_OPTIONS.networkRequestHeaders.length > 0,
+  networkResponseHeaders: DEFAULT_OPTIONS.networkResponseHeaders.length > 0,
+};