feat: Add request_body_size & response_body_size to fetch/xhr

Author: mydea

packages/browser/src/integrations/breadcrumbs.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable max-lines */
 import { getCurrentHub } from '@sentry/core';
-import type { Event as SentryEvent, HandlerDataFetch, Integration, SentryWrappedXMLHttpRequest } from '@sentry/types';
+import type { Event as SentryEvent, HandlerDataFetch, HandlerDataXhr, Integration } from '@sentry/types';
 import {
   addInstrumentationHandler,
   getEventDescription,
@@ -10,6 +10,7 @@ import {
   parseUrl,
   safeJoin,
   severityLevelFromString,
+  dropUndefinedKeys,
 } from '@sentry/utils';
 
 import { WINDOW } from '../helpers';
@@ -216,33 +217,31 @@ function _consoleBreadcrumb(handlerData: HandlerData & { args: unknown[]; level:
 /**
  * Creates breadcrumbs from XHR API calls
  */
-function _xhrBreadcrumb(handlerData: HandlerData & { xhr: SentryWrappedXMLHttpRequest }): void {
-  if (handlerData.endTimestamp) {
-    // We only capture complete, non-sentry requests
-    if (handlerData.xhr.__sentry_own_request__) {
-      return;
-    }
-
-    const { method, url, status_code, body } = handlerData.xhr.__sentry_xhr__ || {};
-
-    getCurrentHub().addBreadcrumb(
-      {
-        category: 'xhr',
-        data: {
-          method,
-          url,
-          status_code,
-        },
-        type: 'http',
-      },
-      {
-        xhr: handlerData.xhr,
-        input: body,
-      },
-    );
-
+function _xhrBreadcrumb(handlerData: HandlerData & HandlerDataXhr): void {
+  // We only capture complete, non-sentry requests
+  if (!handlerData.endTimestamp || !handlerData.xhr.__sentry_xhr__) {
     return;
   }
+
+  const { method, url, status_code, body, request_body_size, response_body_size } = handlerData.xhr.__sentry_xhr__;
+
+  getCurrentHub().addBreadcrumb(
+    {
+      category: 'xhr',
+      data: dropUndefinedKeys({
+        method,
+        url,
+        status_code,
+        request_body_size,
+        response_body_size,
+      }),
+      type: 'http',
+    },
+    {
+      xhr: handlerData.xhr,
+      input: body,
+    },
+  );
 }
 
 /**
@@ -263,7 +262,7 @@ function _fetchBreadcrumb(handlerData: HandlerData & HandlerDataFetch): void {
     getCurrentHub().addBreadcrumb(
       {
         category: 'fetch',
-        data: handlerData.fetchData,
+        data: dropUndefinedKeys(handlerData.fetchData),
         level: 'error',
         type: 'http',
       },
@@ -277,7 +276,7 @@ function _fetchBreadcrumb(handlerData: HandlerData & HandlerDataFetch): void {
       {
         category: 'fetch',
         data: {
-          ...handlerData.fetchData,
+          ...dropUndefinedKeys(handlerData.fetchData),
           status_code: handlerData.response && handlerData.response.status,
         },
         type: 'http',

packages/integration-tests/suites/integrations/browser/breadcrumbs/fetch/contentLengthHeader/subject.js

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

packages/integration-tests/suites/integrations/browser/breadcrumbs/fetch/contentLengthHeader/test.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../../utils/helpers';
+
+sentryTest('parses response_body_size from Content-Length header if available', 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': '789',
+      },
+    });
+  });
+
+  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',
+      response_body_size: 789,
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

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

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

packages/integration-tests/suites/integrations/browser/breadcrumbs/fetch/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('adds a breadcrumb for basic fetch 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',
+      response_body_size: 29,
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

packages/integration-tests/suites/integrations/browser/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()],
+  tracesSampleRate: 1,
+});

packages/integration-tests/suites/integrations/browser/breadcrumbs/fetch/nonTextBody/subject.js

@@ -0,0 +1,15 @@
+const xhr = new XMLHttpRequest();
+
+const blob = new Blob(['<html>Hello world!!</html>'], { type: 'text/html' });
+
+fetch('http://localhost:7654/foo', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    Cache: 'no-cache',
+  },
+  body: blob,
+}).then(() => {
+  Sentry.captureException('test error');
+});

packages/integration-tests/suites/integrations/browser/breadcrumbs/fetch/nonTextBody/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('calculates body sizes for non-string bodies', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.route('**/foo', async route => {
+    return route.fulfill({
+      status: 200,
+      body: Buffer.from('<html>Hello world</html>'),
+      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',
+      request_body_size: 26,
+      response_body_size: 24,
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});

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

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

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

@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../../utils/helpers';
+
+sentryTest('adds a breadcrumb for basic fetch 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',
+        '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: 'fetch',
+    type: 'http',
+    data: {
+      method: 'POST',
+      request_body_size: 13,
+      // No response_body_size without Content-Length header!
+      status_code: 200,
+      url: 'http://localhost:7654/foo',
+    },
+  });
+});