feat(replay): Add request_body_size & response_body_size to fetch/xhr (#7407)

Author: mydea

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/get/subject.js

@@ -0,0 +1,5 @@
+const xhr = new XMLHttpRequest();
+
+fetch('http://localhost:7654/foo').then(() => {
+  Sentry.captureException('test error');
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/get/test.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  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: 'GET',
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  defaultIntegrations: false,
+  integrations: [new Sentry.Integrations.Breadcrumbs()],
+  sampleRate: 1,
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/post/subject.js

@@ -0,0 +1,13 @@
+const xhr = new XMLHttpRequest();
+
+fetch('http://localhost:7654/foo', {
+  method: 'POST',
+  body: '{"my":"body"}',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    Cache: 'no-cache',
+  },
+}).then(() => {
+  Sentry.captureException('test error');
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/post/test.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  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',
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/get/subject.js

@@ -0,0 +1,10 @@
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'http://localhost:7654/foo');
+xhr.send();
+
+xhr.addEventListener('readystatechange', function () {
+  if (xhr.readyState === 4) {
+    Sentry.captureException('test error');
+  }
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/get/test.ts

@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': '',
+      },
+    });
+  });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.exception?.values).toHaveLength(1);
+
+  expect(eventData?.breadcrumbs?.length).toBe(1);
+  expect(eventData!.breadcrumbs![0]).toEqual({
+    timestamp: expect.any(Number),
+    category: 'xhr',
+    type: 'http',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  defaultIntegrations: false,
+  integrations: [new Sentry.Integrations.Breadcrumbs()],
+  sampleRate: 1,
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/post/subject.js

@@ -0,0 +1,12 @@
+const xhr = new XMLHttpRequest();
+
+xhr.open('POST', 'http://localhost:7654/foo');
+xhr.setRequestHeader('Accept', 'application/json');
+xhr.setRequestHeader('Content-Type', 'application/json');
+xhr.send('{"my":"body"}');
+
+xhr.addEventListener('readystatechange', function () {
+  if (xhr.readyState === 4) {
+    Sentry.captureException('test error');
+  }
+});

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/post/test.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.exception?.values).toHaveLength(1);
+
+  expect(eventData?.breadcrumbs?.length).toBe(1);
+  expect(eventData!.breadcrumbs![0]).toEqual({
+    timestamp: expect.any(Number),
+    category: 'xhr',
+    type: 'http',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

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

@@ -12,7 +12,7 @@ import {
 
 sentryTest(
   '[session-mode] replay event should contain an error id of an error that occurred during session recording',
-  async ({ getLocalTestPath, page, browserName }) => {
+  async ({ getLocalTestPath, page, browserName, forceFlushReplay }) => {
     // TODO(replay): This is flakey on firefox where clicks are flakey
     if (shouldSkipReplayTest() || ['firefox'].includes(browserName)) {
       sentryTest.skip();
@@ -43,7 +43,7 @@ sentryTest(
     const req0 = await reqPromise0;
 
     await page.click('#error');
-    await page.click('#go-background');
+    await forceFlushReplay();
     const req1 = await reqPromise1;
 
     const event0 = getReplayEvent(req0);
@@ -86,7 +86,7 @@ sentryTest(
 
 sentryTest(
   '[session-mode] replay event should not contain an error id of a dropped error while recording',
-  async ({ getLocalTestPath, page }) => {
+  async ({ getLocalTestPath, page, forceFlushReplay }) => {
     if (shouldSkipReplayTest()) {
       sentryTest.skip();
     }
@@ -108,7 +108,7 @@ sentryTest(
     await reqPromise0;
 
     await page.click('#drop');
-    await page.click('#go-background');
+    await forceFlushReplay();
     const req1 = await reqPromise1;
 
     const event1 = getReplayEvent(req1);

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

@@ -0,0 +1,61 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
+import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+
+sentryTest('parses response_body_size from Content-Length header if available', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': '789',
+      },
+    });
+  });
+
+  const requestPromise = waitForErrorRequest(page);
+  const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
+
+  await page.evaluate(() => {
+    /* eslint-disable */
+    fetch('http://localhost:7654/foo', {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Cache: 'no-cache',
+      },
+    }).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: 'GET',
+      response_body_size: 789,
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

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

@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+});
+
+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/noContentLengthHeader/test.ts

@@ -0,0 +1,60 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
+import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
+
+sentryTest('does not capture response_body_size without Content-Length header', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': '',
+      },
+    });
+  });
+
+  const requestPromise = waitForErrorRequest(page);
+  const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
+
+  await page.evaluate(() => {
+    /* eslint-disable */
+    fetch('http://localhost:7654/foo', {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Cache: 'no-cache',
+      },
+    }).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: 'GET',
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});