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://public@dsn.ingest.sentry.io/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://public@dsn.ingest.sentry.io/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://public@dsn.ingest.sentry.io/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
+ });