feat(replay): Add experiment to capture request/response bodies

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureBodies/init.js

@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  _experiments: {
+    captureNetworkBodies: true,
+  },
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1,
+  // We ensure to sample for errors, so by default nothing is sent
+  replaysSessionSampleRate: 0.0,
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [window.Replay],
+});

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureBodies/test.ts

@@ -0,0 +1,101 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
+
+sentryTest(
+  'captures text requestBody & responseBody when experiment is configured',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipReplayTest()) {
+      sentryTest.skip();
+    }
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 200,
+        body: 'response body',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    });
+
+    await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'test-id' }),
+      });
+    });
+
+    const requestPromise = waitForErrorRequest(page);
+    const replayRequestPromise1 = waitForReplayRequest(page, 0);
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+    await page.goto(url);
+
+    await page.evaluate(() => {
+      /* eslint-disable */
+      fetch('http://localhost:7654/foo', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Cache: 'no-cache',
+        },
+        body: 'input body',
+      }).then(() => {
+        // @ts-ignore Sentry is a global
+        Sentry.captureException('test error');
+      });
+      /* eslint-enable */
+    });
+
+    const request = await requestPromise;
+    const eventData = envelopeRequestParser(request);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    expect(eventData?.breadcrumbs?.length).toBe(1);
+    expect(eventData!.breadcrumbs![0]).toEqual({
+      timestamp: expect.any(Number),
+      category: 'fetch',
+      type: 'http',
+      data: {
+        method: 'POST',
+        request_body_size: 10,
+        response_body_size: 13,
+        status_code: 200,
+        url: 'http://localhost:7654/foo',
+      },
+    });
+
+    const replayReq1 = await replayRequestPromise1;
+    const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+    expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+      {
+        data: {
+          method: 'POST',
+          statusCode: 200,
+          request: {
+            size: 10,
+            body: 'input body',
+          },
+          response: {
+            size: 13,
+            body: 'response body',
+          },
+        },
+        description: 'http://localhost:7654/foo',
+        endTimestamp: expect.any(Number),
+        op: 'resource.fetch',
+        startTimestamp: expect.any(Number),
+      },
+    ]);
+  },
+);

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureBodiesJSON/init.js

@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  _experiments: {
+    captureNetworkBodies: true,
+  },
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1,
+  // We ensure to sample for errors, so by default nothing is sent
+  replaysSessionSampleRate: 0.0,
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [window.Replay],
+});

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureBodiesJSON/test.ts

@@ -0,0 +1,101 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
+
+sentryTest(
+  'captures JSON requestBody & responseBody when experiment is configured',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipReplayTest()) {
+      sentryTest.skip();
+    }
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 200,
+        body: JSON.stringify({ res: 'this' }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    });
+
+    await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'test-id' }),
+      });
+    });
+
+    const requestPromise = waitForErrorRequest(page);
+    const replayRequestPromise1 = waitForReplayRequest(page, 0);
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+    await page.goto(url);
+
+    await page.evaluate(() => {
+      /* eslint-disable */
+      fetch('http://localhost:7654/foo', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Cache: 'no-cache',
+        },
+        body: '{"foo":"bar"}',
+      }).then(() => {
+        // @ts-ignore Sentry is a global
+        Sentry.captureException('test error');
+      });
+      /* eslint-enable */
+    });
+
+    const request = await requestPromise;
+    const eventData = envelopeRequestParser(request);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    expect(eventData?.breadcrumbs?.length).toBe(1);
+    expect(eventData!.breadcrumbs![0]).toEqual({
+      timestamp: expect.any(Number),
+      category: 'fetch',
+      type: 'http',
+      data: {
+        method: 'POST',
+        request_body_size: 13,
+        response_body_size: 14,
+        status_code: 200,
+        url: 'http://localhost:7654/foo',
+      },
+    });
+
+    const replayReq1 = await replayRequestPromise1;
+    const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+    expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+      {
+        data: {
+          method: 'POST',
+          statusCode: 200,
+          request: {
+            size: 13,
+            body: { foo: 'bar' },
+          },
+          response: {
+            size: 14,
+            body: { res: 'this' },
+          },
+        },
+        description: 'http://localhost:7654/foo',
+        endTimestamp: expect.any(Number),
+        op: 'resource.fetch',
+        startTimestamp: expect.any(Number),
+      },
+    ]);
+  },
+);

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureNonTextBodies/init.js

@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  _experiments: {
+    captureNetworkBodies: true,
+  },
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1,
+  // We ensure to sample for errors, so by default nothing is sent
+  replaysSessionSampleRate: 0.0,
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [window.Replay],
+});

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureNonTextBodies/test.ts

@@ -0,0 +1,104 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
+
+sentryTest(
+  'captures non-text fetch requestBody & responseBody when experiment is configured',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipReplayTest()) {
+      sentryTest.skip();
+    }
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 200,
+        body: Buffer.from('<html>Hello world</html>'),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    });
+
+    await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'test-id' }),
+      });
+    });
+
+    const requestPromise = waitForErrorRequest(page);
+    const replayRequestPromise1 = waitForReplayRequest(page, 0);
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+    await page.goto(url);
+
+    await page.evaluate(() => {
+      const body = new URLSearchParams();
+      body.append('name', 'Anne');
+      body.append('age', '32');
+
+      /* eslint-disable */
+      fetch('http://localhost:7654/foo', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          Cache: 'no-cache',
+        },
+        body: body,
+      }).then(() => {
+        // @ts-ignore Sentry is a global
+        Sentry.captureException('test error');
+      });
+      /* eslint-enable */
+    });
+
+    const request = await requestPromise;
+    const eventData = envelopeRequestParser(request);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    expect(eventData?.breadcrumbs?.length).toBe(1);
+    expect(eventData!.breadcrumbs![0]).toEqual({
+      timestamp: expect.any(Number),
+      category: 'fetch',
+      type: 'http',
+      data: {
+        method: 'POST',
+        request_body_size: 16,
+        response_body_size: 24,
+        status_code: 200,
+        url: 'http://localhost:7654/foo',
+      },
+    });
+
+    const replayReq1 = await replayRequestPromise1;
+    const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+    expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+      {
+        data: {
+          method: 'POST',
+          statusCode: 200,
+          request: {
+            size: 16,
+            body: 'name=Anne&age=32',
+          },
+          response: {
+            size: 24,
+            body: '<html>Hello world</html>',
+          },
+        },
+        description: 'http://localhost:7654/foo',
+        endTimestamp: expect.any(Number),
+        op: 'resource.fetch',
+        startTimestamp: expect.any(Number),
+      },
+    ]);
+  },
+);

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/contentLengthHeader/test.ts

@@ -79,8 +79,10 @@ sentryTest('parses response_body_size from Content-Length header if available',
     {
       data: {
         method: 'GET',
-        responseBodySize: 789,
         statusCode: 200,
+        response: {
+          size: 789,
+        },
       },
       description: 'http://localhost:7654/foo',
       endTimestamp: expect.any(Number),

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/noContentLengthHeader/test.ts

@@ -78,8 +78,10 @@ sentryTest('does not capture response_body_size without Content-Length header',
     {
       data: {
         method: 'GET',
-        responseBodySize: 29,
         statusCode: 200,
+        response: {
+          size: 29,
+        },
       },
       description: 'http://localhost:7654/foo',
       endTimestamp: expect.any(Number),