feat(browser): Allow to capture request payload/responses

packages/browser/src/integrations/breadcrumbs.ts

@@ -14,8 +14,13 @@ import {
 
 import { WINDOW } from '../helpers';
 
+interface XhrFetchOptions {
+  captureRequestPayload: boolean;
+  captureResponsePayload: boolean;
+}
+
 /** JSDoc */
-interface BreadcrumbsOptions {
+interface BreadcrumbsOptions extends XhrFetchOptions {
   console: boolean;
   dom:
     | boolean
@@ -66,6 +71,8 @@ export class Breadcrumbs implements Integration {
       history: true,
       sentry: true,
       xhr: true,
+      captureRequestPayload: false,
+      captureResponsePayload: false,
       ...options,
     };
   }
@@ -86,10 +93,10 @@ export class Breadcrumbs implements Integration {
       addInstrumentationHandler('dom', _domBreadcrumb(this.options.dom));
     }
     if (this.options.xhr) {
-      addInstrumentationHandler('xhr', _xhrBreadcrumb);
+      addInstrumentationHandler('xhr', _xhrBreadcrumb(this.options));
     }
     if (this.options.fetch) {
-      addInstrumentationHandler('fetch', _fetchBreadcrumb);
+      addInstrumentationHandler('fetch', _fetchBreadcrumb(this.options));
     }
     if (this.options.history) {
       addInstrumentationHandler('history', _historyBreadcrumb);
@@ -217,79 +224,111 @@ function _consoleBreadcrumb(handlerData: { [key: string]: any }): void {
  * Creates breadcrumbs from XHR API calls
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function _xhrBreadcrumb(handlerData: { [key: string]: any }): void {
-  if (handlerData.endTimestamp) {
-    // We only capture complete, non-sentry requests
-    if (handlerData.xhr.__sentry_own_request__) {
-      return;
-    }
+function _xhrBreadcrumb(options: XhrFetchOptions): (handlerData: { [key: string]: any }) => void {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (handlerData: { [key: string]: any }): 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__ || {};
+      const { method, url, status_code, body } = handlerData.xhr.__sentry_xhr__ || {};
 
-    getCurrentHub().addBreadcrumb(
-      {
-        category: 'xhr',
-        data: {
-          method,
-          url,
-          status_code,
+      const xhrData: { [key: string]: unknown } = {
+        method,
+        url,
+        status_code,
+      };
+
+      if (options.captureRequestPayload && body) {
+        xhrData.request_payload = body;
+      }
+
+      if (options.captureResponsePayload && handlerData.xhr.responseText) {
+        xhrData.response_payload = handlerData.xhr.responseText;
+      }
+
+      getCurrentHub().addBreadcrumb(
+        {
+          category: 'xhr',
+          data: xhrData,
+          type: 'http',
         },
-        type: 'http',
-      },
-      {
-        xhr: handlerData.xhr,
-        input: body,
-      },
-    );
+        {
+          xhr: handlerData.xhr,
+          input: body,
+        },
+      );
 
-    return;
-  }
+      return;
+    }
+  };
 }
-
 /**
  * Creates breadcrumbs from fetch API calls
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function _fetchBreadcrumb(handlerData: { [key: string]: any }): void {
-  // We only capture complete fetch requests
-  if (!handlerData.endTimestamp) {
-    return;
-  }
+function _fetchBreadcrumb(options: XhrFetchOptions): (handlerData: { [key: string]: any }) => Promise<void> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return async (handlerData: { [key: string]: any }): Promise<void> => {
+    // We only capture complete fetch requests
+    if (!handlerData.endTimestamp) {
+      return;
+    }
 
-  if (handlerData.fetchData.url.match(/sentry_key/) && handlerData.fetchData.method === 'POST') {
-    // We will not create breadcrumbs for fetch requests that contain `sentry_key` (internal sentry requests)
-    return;
-  }
+    if (handlerData.fetchData.url.match(/sentry_key/) && handlerData.fetchData.method === 'POST') {
+      // We will not create breadcrumbs for fetch requests that contain `sentry_key` (internal sentry requests)
+      return;
+    }
 
-  if (handlerData.error) {
-    getCurrentHub().addBreadcrumb(
-      {
-        category: 'fetch',
-        data: handlerData.fetchData,
-        level: 'error',
-        type: 'http',
-      },
-      {
-        data: handlerData.error,
-        input: handlerData.args,
-      },
-    );
-  } else {
-    getCurrentHub().addBreadcrumb(
-      {
-        category: 'fetch',
-        data: {
-          ...handlerData.fetchData,
-          status_code: handlerData.response.status,
+    if (options.captureRequestPayload && handlerData.args[1] && handlerData.args[1].body) {
+      handlerData.fetchData.request_payload = handlerData.args[1].body;
+    }
+
+    if (options.captureResponsePayload && handlerData.response) {
+      try {
+        // We need to clone() this in order to avoid consuming the original response body
+        const response = handlerData.response.clone();
+        const text = await response.text();
+        if (text) {
+          handlerData.fetchData.response_payload = text;
+        }
+      } catch (error) {
+        // if something happens here, we don't want to break the whole breadcrumb
+      }
+    }
+
+    if (handlerData.error) {
+      getCurrentHub().addBreadcrumb(
+        {
+          category: 'fetch',
+          data: handlerData.fetchData,
+          level: 'error',
+          type: 'http',
         },
-        type: 'http',
-      },
-      {
-        input: handlerData.args,
-        response: handlerData.response,
-      },
-    );
-  }
+        {
+          data: handlerData.error,
+          input: handlerData.args,
+        },
+      );
+    } else {
+      getCurrentHub().addBreadcrumb(
+        {
+          category: 'fetch',
+          data: {
+            ...handlerData.fetchData,
+            status_code: handlerData.response.status,
+          },
+          type: 'http',
+        },
+        {
+          input: handlerData.args,
+          response: handlerData.response,
+        },
+      );
+    }
+  };
 }
 
 /**

packages/browser/test/integration/suites/breadcrumbs.js

@@ -91,6 +91,7 @@ describe('breadcrumbs', function () {
       assert.equal(summary.breadcrumbs[0].category, 'xhr');
       assert.equal(summary.breadcrumbs[0].data.method, 'POST');
       assert.isUndefined(summary.breadcrumbs[0].data.input);
+      assert.isUndefined(summary.breadcrumbs[0].data.request_payload);
       assert.equal(summary.breadcrumbHints[0].input, '{"foo":"bar"}');
     });
   });

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

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/browser';
+import { Breadcrumbs } from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.breadcrumbs = [];
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Breadcrumbs()],
+  beforeBreadcrumb(breadcrumb) {
+    window.breadcrumbs.push(breadcrumb);
+    return breadcrumb;
+  },
+});

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

@@ -0,0 +1,10 @@
+fetch('http://localhost:7654/foo', {
+  method: 'POST',
+  body: '{"foo":"bar"}',
+})
+  .then(res => {
+    return res.json();
+  })
+  .then(json => {
+    // do something with the response
+  });

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

@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+import type { Breadcrumb } from '@sentry/types';
+
+import { sentryTest } from '../../../../../../utils/fixtures';
+
+sentryTest('works with default options', async ({ getLocalTestPath, page }) => {
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        testApi: 'OK',
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  });
+
+  const request = page.waitForRequest('**/foo');
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+  await request;
+
+  const breadcrumbs = await page.evaluate(() => {
+    return (window as unknown as Window & { breadcrumbs: Breadcrumb[] }).breadcrumbs;
+  });
+
+  expect(breadcrumbs).toEqual([
+    {
+      category: 'fetch',
+      data: {
+        method: 'POST',
+        status_code: 200,
+        url: 'http://localhost:7654/foo',
+      },
+      timestamp: expect.any(Number),
+      type: 'http',
+    },
+  ]);
+});

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

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/browser';
+import { Breadcrumbs } from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.breadcrumbs = [];
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Breadcrumbs({ captureRequestPayload: true })],
+  beforeBreadcrumb(breadcrumb) {
+    window.breadcrumbs.push(breadcrumb);
+    return breadcrumb;
+  },
+});

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

@@ -0,0 +1,10 @@
+fetch('http://localhost:7654/foo', {
+  method: 'POST',
+  body: '{"foo":"bar"}',
+})
+  .then(res => {
+    return res.json();
+  })
+  .then(json => {
+    // do something with the response
+  });

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

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import type { Breadcrumb } from '@sentry/types';
+
+import { sentryTest } from '../../../../../../utils/fixtures';
+
+sentryTest('captures request_payload breadcrumb if configured', async ({ getLocalTestPath, page }) => {
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        testApi: 'OK',
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  });
+
+  const request = page.waitForRequest('**/foo');
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+  await request;
+
+  const breadcrumbs = await page.evaluate(() => {
+    return (window as unknown as Window & { breadcrumbs: Breadcrumb[] }).breadcrumbs;
+  });
+
+  expect(breadcrumbs).toEqual([
+    {
+      category: 'fetch',
+      data: {
+        method: 'POST',
+        request_payload: '{"foo":"bar"}',
+        status_code: 200,
+        url: 'http://localhost:7654/foo',
+      },
+      timestamp: expect.any(Number),
+      type: 'http',
+    },
+  ]);
+});

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

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/browser';
+import { Breadcrumbs } from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.breadcrumbs = [];
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Breadcrumbs({ captureResponsePayload: true })],
+  beforeBreadcrumb(breadcrumb) {
+    window.breadcrumbs.push(breadcrumb);
+    return breadcrumb;
+  },
+});

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

@@ -0,0 +1,10 @@
+fetch('http://localhost:7654/foo', {
+  method: 'POST',
+  body: '{"foo":"bar"}',
+})
+  .then(res => {
+    return res.json();
+  })
+  .then(json => {
+    // do something with the response
+  });