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,
@@ -216,33 +216,29 @@ function _consoleBreadcrumb(handlerData: HandlerData & { args: unknown[]; level:
 /**
  * Creates breadcrumbs from XHR API calls
  */
-function _xhrBreadcrumb(handlerData: HandlerData & { xhr: XMLHttpRequest & SentryWrappedXMLHttpRequest }): void {
-  if (handlerData.endTimestamp) {
-    // We only capture complete, non-sentry requests
-    if (handlerData.xhr.__sentry_own_request__) {
-      return;
-    }
+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 } = handlerData.xhr.__sentry_xhr__ || {};
+  const { method, url, status_code, body } = handlerData.xhr.__sentry_xhr__;
 
-    getCurrentHub().addBreadcrumb(
-      {
-        category: 'xhr',
-        data: {
-          method,
-          url,
-          status_code,
-        },
-        type: 'http',
+  getCurrentHub().addBreadcrumb(
+    {
+      category: 'xhr',
+      data: {
+        method,
+        url,
+        status_code,
       },
-      {
-        xhr: handlerData.xhr,
-        input: body,
-      },
-    );
-
-    return;
-  }
+      type: 'http',
+    },
+    {
+      xhr: handlerData.xhr,
+      input: body,
+    },
+  );
 }
 
 /**

packages/core/src/baseclient.ts

@@ -1,5 +1,7 @@
 /* eslint-disable max-lines */
 import type {
+  Breadcrumb,
+  BreadcrumbHint,
   Client,
   ClientOptions,
   DataCategory,
@@ -363,6 +365,9 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   /** @inheritdoc */
   public on(hook: 'beforeEnvelope', callback: (envelope: Envelope) => void): void;
 
+  /** @inheritdoc */
+  public on(hook: 'beforeBreadcrumb', callback: (breadcrumb: Breadcrumb, hint?: BreadcrumbHint) => void): void;
+
   /** @inheritdoc */
   public on(hook: string, callback: unknown): void {
     if (!this._hooks[hook]) {
@@ -379,6 +384,9 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   /** @inheritdoc */
   public emit(hook: 'beforeEnvelope', envelope: Envelope): void;
 
+  /** @inheritdoc */
+  public emit(hook: 'beforeBreadcrumb', breadcrumb: Breadcrumb, hint?: BreadcrumbHint): void;
+
   /** @inheritdoc */
   public emit(hook: string, ...rest: unknown[]): void {
     if (this._hooks[hook]) {

packages/core/src/hub.ts

@@ -271,6 +271,10 @@ export class Hub implements HubInterface {
 
     if (finalBreadcrumb === null) return;
 
+    if (client.emit) {
+      client.emit('beforeBreadcrumb', finalBreadcrumb, hint);
+    }
+
     scope.addBreadcrumb(finalBreadcrumb, maxBreadcrumbs);
   }
 

packages/integration-tests/suites/integrations/ExtendedNetworkBreadcrumbs/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/ExtendedNetworkBreadcrumbs/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/ExtendedNetworkBreadcrumbs/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/ExtendedNetworkBreadcrumbs/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/ExtendedNetworkBreadcrumbs/fetch/init.js

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

packages/integration-tests/suites/integrations/ExtendedNetworkBreadcrumbs/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/ExtendedNetworkBreadcrumbs/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',
+    },
+  });
+});