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

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

Author: billyvg

packages/browser-integration-tests/suites/replay/bufferMode/test.ts

@@ -115,7 +115,6 @@ sentryTest(
 
     expect(event0).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 0, session_sample_rate: 0 } },
         error_ids: [errorEventId!],
         replay_type: 'buffer',
       }),
@@ -150,7 +149,6 @@ sentryTest(
 
     expect(event1).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 0, session_sample_rate: 0 } },
         replay_type: 'buffer', // although we're in session mode, we still send 'buffer' as replay_type
         segment_id: 1,
         urls: [],
@@ -162,7 +160,6 @@ sentryTest(
 
     expect(event2).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 0, session_sample_rate: 0 } },
         replay_type: 'buffer', // although we're in session mode, we still send 'buffer' as replay_type
         segment_id: 2,
         urls: [],
@@ -266,7 +263,6 @@ sentryTest(
 
     expect(event0).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 0, session_sample_rate: 0 } },
         error_ids: [errorEventId!],
         replay_type: 'buffer',
       }),
@@ -372,7 +368,6 @@ sentryTest('[buffer-mode] can sample on each error event', async ({ getLocalTest
 
   expect(event0).toEqual(
     getExpectedReplayEvent({
-      contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
       error_ids: errorEventIds,
       replay_type: 'buffer',
     }),

packages/browser-integration-tests/suites/replay/captureReplay/test.ts

@@ -64,7 +64,6 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
       },
     },
     platform: 'javascript',
-    contexts: { replay: { session_sample_rate: 1, error_sample_rate: 0 } },
   });
 
   expect(replayEvent1).toBeDefined();
@@ -103,6 +102,5 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
       },
     },
     platform: 'javascript',
-    contexts: { replay: { session_sample_rate: 1, error_sample_rate: 0 } },
   });
 });

packages/browser-integration-tests/suites/replay/captureReplayFromReplayPackage/test.ts

@@ -64,7 +64,6 @@ sentryTest('should capture replays (@sentry/replay export)', async ({ getLocalTe
       },
     },
     platform: 'javascript',
-    contexts: { replay: { session_sample_rate: 1, error_sample_rate: 0 } },
   });
 
   expect(replayEvent1).toBeDefined();
@@ -103,6 +102,5 @@ sentryTest('should capture replays (@sentry/replay export)', async ({ getLocalTe
       },
     },
     platform: 'javascript',
-    contexts: { replay: { session_sample_rate: 1, error_sample_rate: 0 } },
   });
 });

packages/browser-integration-tests/suites/replay/customEvents/test.ts

@@ -174,3 +174,60 @@ sentryTest(
     );
   },
 );
+
+sentryTest(
+  'replay recording should contain an "options" breadcrumb for Replay SDK configuration',
+  async ({ forceFlushReplay, getLocalTestPath, page, browserName }) => {
+    // TODO(replay): This is flakey on firefox and webkit where clicks are flakey
+    if (shouldSkipReplayTest() || ['firefox', 'webkit'].includes(browserName)) {
+      sentryTest.skip();
+    }
+
+    const reqPromise0 = waitForReplayRequest(page, 0);
+    const reqPromise1 = waitForReplayRequest(page, 1);
+
+    await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'test-id' }),
+      });
+    });
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+    await forceFlushReplay();
+
+    await page.click('#error');
+    await forceFlushReplay();
+
+    const req0 = await reqPromise0;
+    const content0 = getReplayRecordingContent(req0);
+
+    expect(content0.optionsEvents).toEqual([
+      {
+        tag: 'options',
+        payload: {
+          sessionSampleRate: 1,
+          errorSampleRate: 0,
+          useCompressionOption: false,
+          blockAllMedia: false,
+          maskAllText: true,
+          maskAllInputs: true,
+          useCompression: false,
+          networkDetailHasUrls: false,
+          networkCaptureBodies: true,
+          networkRequestHasHeaders: true,
+          networkResponseHasHeaders: true,
+        },
+      },
+    ]);
+
+    const req1 = await reqPromise1;
+    const content1 = getReplayRecordingContent(req1);
+
+    // Should only be on first segment
+    expect(content1.optionsEvents).toEqual([]);
+  },
+);

packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts

@@ -84,7 +84,6 @@ sentryTest(
 
     expect(event0).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
         error_ids: [errorEventId!],
         replay_type: 'buffer',
       }),
@@ -119,7 +118,6 @@ sentryTest(
 
     expect(event1).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
         replay_type: 'buffer', // although we're in session mode, we still send 'error' as replay_type
         segment_id: 1,
         urls: [],
@@ -134,7 +132,6 @@ sentryTest(
     // we continue recording everything
     expect(event2).toEqual(
       getExpectedReplayEvent({
-        contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
         replay_type: 'buffer',
         segment_id: 2,
         urls: [],

packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -38,7 +38,6 @@ const DEFAULT_REPLAY_EVENT = {
     },
   },
   platform: 'javascript',
-  contexts: { replay: { session_sample_rate: 1, error_sample_rate: 0 } },
 };
 
 /**

packages/browser-integration-tests/utils/replayHelpers.ts

@@ -160,6 +160,7 @@ type CustomRecordingContent = {
 type RecordingContent = {
   fullSnapshots: RecordingSnapshot[];
   incrementalSnapshots: RecordingSnapshot[];
+  optionsEvents: CustomRecordingEvent[];
 } & CustomRecordingContent;
 
 /**
@@ -207,6 +208,11 @@ export function getIncrementalRecordingSnapshots(resOrReq: Request | Response):
   return events.filter(isIncrementalSnapshot);
 }
 
+function getOptionsEvents(replayRequest: Request): CustomRecordingEvent[] {
+  const events = getDecompressedRecordingEvents(replayRequest);
+  return getAllCustomRrwebRecordingEvents(events).filter(data => data.tag === 'options');
+}
+
 function getDecompressedRecordingEvents(resOrReq: Request | Response): RecordingSnapshot[] {
   const replayRequest = getRequest(resOrReq);
   return (
@@ -227,8 +233,9 @@ export function getReplayRecordingContent(resOrReq: Request | Response): Recordi
   const fullSnapshots = getFullRecordingSnapshots(replayRequest);
   const incrementalSnapshots = getIncrementalRecordingSnapshots(replayRequest);
   const customEvents = getCustomRecordingEvents(replayRequest);
+  const optionsEvents = getOptionsEvents(replayRequest);
 
-  return { fullSnapshots, incrementalSnapshots, ...customEvents };
+  return { fullSnapshots, incrementalSnapshots, optionsEvents, ...customEvents };
 }
 
 /**

packages/e2e-tests/test-applications/standard-frontend-react/tests/fixtures/ReplayRecordingData.ts

@@ -7,6 +7,26 @@ export const ReplayRecordingData = [
       data: { href: expect.stringMatching(/http:\/\/localhost:\d+\//), width: 1280, height: 720 },
       timestamp: expect.any(Number),
     },
+    {
+      data: {
+        payload: {
+          blockAllMedia: true,
+          errorSampleRate: 0,
+          maskAllInputs: true,
+          maskAllText: true,
+          networkCaptureBodies: true,
+          networkDetailHasUrls: false,
+          networkRequestHasHeaders: true,
+          networkResponseHasHeaders: true,
+          sessionSampleRate: 1,
+          useCompression: false,
+          useCompressionOption: true,
+        },
+        tag: 'options',
+      },
+      timestamp: expect.any(Number),
+      type: 5,
+    },
     {
       type: 2,
       data: {

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 'sync';
+  }
+
   /** @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.