feat(replay): Capture fetch body size for replay events

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

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest('parses response_body_size from Content-Length header if available', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -22,7 +26,17 @@ sentryTest('parses response_body_size from Content-Length header if available',
     });
   });
 
+  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);
 
@@ -58,4 +72,20 @@ sentryTest('parses response_body_size from Content-Length header if available',
       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: 'GET',
+        responseBodySize: 789,
+        statusCode: 200,
+      },
+      description: 'http://localhost:7654/foo',
+      endTimestamp: expect.any(Number),
+      op: 'resource.fetch',
+      startTimestamp: expect.any(Number),
+    },
+  ]);
 });

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

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest('does not capture response_body_size without Content-Length header', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -22,7 +26,17 @@ sentryTest('does not capture response_body_size without Content-Length header',
     });
   });
 
+  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);
 
@@ -57,4 +71,20 @@ sentryTest('does not capture response_body_size without Content-Length header',
       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: 'GET',
+        responseBodySize: 29,
+        statusCode: 200,
+      },
+      description: 'http://localhost:7654/foo',
+      endTimestamp: expect.any(Number),
+      op: 'resource.fetch',
+      startTimestamp: expect.any(Number),
+    },
+  ]);
 });

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

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -19,7 +23,17 @@ sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestP
     });
   });
 
+  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);
 
@@ -60,4 +74,21 @@ sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestP
       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',
+        requestBodySize: 26,
+        responseBodySize: 24,
+        statusCode: 200,
+      },
+      description: 'http://localhost:7654/foo',
+      endTimestamp: expect.any(Number),
+      op: 'resource.fetch',
+      startTimestamp: expect.any(Number),
+    },
+  ]);
 });

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

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest('captures request_body_size when body is sent', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -12,16 +16,23 @@ sentryTest('captures request_body_size when body is sent', async ({ getLocalTest
   await page.route('**/foo', route => {
     return route.fulfill({
       status: 200,
-      body: JSON.stringify({
-        userNames: ['John', 'Jane'],
-      }),
       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);
 
@@ -48,5 +59,32 @@ sentryTest('captures request_body_size when body is sent', async ({ getLocalTest
   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,
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
   expect(eventData!.breadcrumbs![0].data!.request_body_size).toEqual(13);
+
+  const replayReq1 = await replayRequestPromise1;
+  const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+  expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+    {
+      data: {
+        method: 'POST',
+        requestBodySize: 13,
+        statusCode: 200,
+      },
+      description: 'http://localhost:7654/foo',
+      endTimestamp: expect.any(Number),
+      op: 'resource.fetch',
+      startTimestamp: expect.any(Number),
+    },
+  ]);
 });

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

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest(
   'parses response_body_size from Content-Length header if available',
@@ -25,7 +29,17 @@ sentryTest(
       });
     });
 
+    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);
 
@@ -65,5 +79,21 @@ sentryTest(
         url: 'http://localhost:7654/foo',
       },
     });
+
+    const replayReq1 = await replayRequestPromise1;
+    const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+    expect(performanceSpans1.filter(span => span.op === 'resource.xhr')).toEqual([
+      {
+        data: {
+          method: 'GET',
+          responseBodySize: 789,
+          statusCode: 200,
+        },
+        description: 'http://localhost:7654/foo',
+        endTimestamp: expect.any(Number),
+        op: 'resource.xhr',
+        startTimestamp: expect.any(Number),
+      },
+    ]);
   },
 );

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

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest(
   'captures response_body_size without Content-Length header',
@@ -25,7 +29,17 @@ sentryTest(
       });
     });
 
+    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);
 
@@ -65,5 +79,21 @@ sentryTest(
         url: 'http://localhost:7654/foo',
       },
     });
+
+    const replayReq1 = await replayRequestPromise1;
+    const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+    expect(performanceSpans1.filter(span => span.op === 'resource.xhr')).toEqual([
+      {
+        data: {
+          method: 'GET',
+          responseBodySize: 29,
+          statusCode: 200,
+        },
+        description: 'http://localhost:7654/foo',
+        endTimestamp: expect.any(Number),
+        op: 'resource.xhr',
+        startTimestamp: expect.any(Number),
+      },
+    ]);
   },
 );

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/nonTextBody/test.ts

@@ -2,7 +2,11 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
-import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+import {
+  getCustomRecordingEvents,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../../utils/replayHelpers';
 
 sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestPath, page, browserName }) => {
   // These are a bit flaky on non-chromium browsers
@@ -20,7 +24,17 @@ sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestP
     });
   });
 
+  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);
 
@@ -63,4 +77,21 @@ sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestP
       url: 'http://localhost:7654/foo',
     },
   });
+
+  const replayReq1 = await replayRequestPromise1;
+  const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
+  expect(performanceSpans1.filter(span => span.op === 'resource.xhr')).toEqual([
+    {
+      data: {
+        method: 'POST',
+        requestBodySize: 26,
+        responseBodySize: 24,
+        statusCode: 200,
+      },
+      description: 'http://localhost:7654/foo',
+      endTimestamp: expect.any(Number),
+      op: 'resource.xhr',
+      startTimestamp: expect.any(Number),
+    },
+  ]);
 });