fix(replay): Ensure network breadcrumbs have all data (#7491)

Author: mydea

packages/browser-integration-tests/suites/replay/requests/subject.js

@@ -6,7 +6,7 @@ document.getElementById('go-background').addEventListener('click', () => {
 });
 
 document.getElementById('fetch').addEventListener('click', () => {
-  fetch('https://example.com');
+  fetch('https://example.com', { method: 'POST', body: 'foo' });
 });
 
 document.getElementById('xhr').addEventListener('click', () => {

packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -132,23 +132,26 @@ export const expectedFPPerformanceSpan = {
 
 export const expectedFetchPerformanceSpan = {
   op: 'resource.fetch',
-  description: expect.any(String),
+  description: 'https://example.com',
   startTimestamp: expect.any(Number),
   endTimestamp: expect.any(Number),
   data: {
-    method: expect.any(String),
-    statusCode: expect.any(Number),
+    method: 'POST',
+    statusCode: 200,
+    responseBodySize: 11,
+    requestBodySize: 3,
   },
 };
 
 export const expectedXHRPerformanceSpan = {
   op: 'resource.xhr',
-  description: expect.any(String),
+  description: 'https://example.com',
   startTimestamp: expect.any(Number),
   endTimestamp: expect.any(Number),
   data: {
-    method: expect.any(String),
-    statusCode: expect.any(Number),
+    method: 'GET',
+    statusCode: 200,
+    responseBodySize: 11,
   },
 };
 

packages/browser/src/integrations/breadcrumbs.ts

@@ -2,6 +2,12 @@
 /* eslint-disable max-lines */
 import { getCurrentHub } from '@sentry/core';
 import type { Event as SentryEvent, HandlerDataFetch, HandlerDataXhr, Integration } from '@sentry/types';
+import type {
+  FetchBreadcrumbData,
+  FetchBreadcrumbHint,
+  XhrBreadcrumbData,
+  XhrBreadcrumbHint,
+} from '@sentry/types/build/types/breadcrumb';
 import {
   addInstrumentationHandler,
   getEventDescription,
@@ -217,36 +223,46 @@ function _consoleBreadcrumb(handlerData: HandlerData & { args: unknown[]; level:
  * Creates breadcrumbs from XHR API calls
  */
 function _xhrBreadcrumb(handlerData: HandlerData & HandlerDataXhr): void {
+  const { startTimestamp, endTimestamp } = handlerData;
+
   // We only capture complete, non-sentry requests
-  if (!handlerData.endTimestamp || !handlerData.xhr.__sentry_xhr__) {
+  if (!startTimestamp || !endTimestamp || !handlerData.xhr.__sentry_xhr__) {
     return;
   }
 
   const { method, url, status_code, body } = handlerData.xhr.__sentry_xhr__;
 
+  const data: XhrBreadcrumbData = {
+    method,
+    url,
+    status_code,
+  };
+
+  const hint: XhrBreadcrumbHint = {
+    xhr: handlerData.xhr,
+    input: body,
+    startTimestamp,
+    endTimestamp,
+  };
+
   getCurrentHub().addBreadcrumb(
     {
       category: 'xhr',
-      data: {
-        method,
-        url,
-        status_code,
-      },
+      data,
       type: 'http',
     },
-    {
-      xhr: handlerData.xhr,
-      input: body,
-    },
+    hint,
   );
 }
 
 /**
  * Creates breadcrumbs from fetch API calls
  */
 function _fetchBreadcrumb(handlerData: HandlerData & HandlerDataFetch & { response?: Response }): void {
+  const { startTimestamp, endTimestamp } = handlerData;
+
   // We only capture complete fetch requests
-  if (!handlerData.endTimestamp) {
+  if (!endTimestamp) {
     return;
   }
 
@@ -256,32 +272,41 @@ function _fetchBreadcrumb(handlerData: HandlerData & HandlerDataFetch & { respon
   }
 
   if (handlerData.error) {
+    const data: FetchBreadcrumbData = handlerData.fetchData;
+    const hint: FetchBreadcrumbHint = {
+      data: handlerData.error,
+      input: handlerData.args,
+      startTimestamp,
+      endTimestamp,
+    };
+
     getCurrentHub().addBreadcrumb(
       {
         category: 'fetch',
-        data: handlerData.fetchData,
+        data,
         level: 'error',
         type: 'http',
       },
-      {
-        data: handlerData.error,
-        input: handlerData.args,
-      },
+      hint,
     );
   } else {
+    const data: FetchBreadcrumbData = {
+      ...handlerData.fetchData,
+      status_code: handlerData.response && handlerData.response.status,
+    };
+    const hint: FetchBreadcrumbHint = {
+      input: handlerData.args,
+      response: handlerData.response,
+      startTimestamp,
+      endTimestamp,
+    };
     getCurrentHub().addBreadcrumb(
       {
         category: 'fetch',
-        data: {
-          ...handlerData.fetchData,
-          status_code: handlerData.response && handlerData.response.status,
-        },
+        data,
         type: 'http',
       },
-      {
-        input: handlerData.args,
-        response: handlerData.response,
-      },
+      hint,
     );
   }
 }

packages/replay/src/coreHandlers/addNetworkBreadcrumb.ts

@@ -0,0 +1,26 @@
+import type { ReplayContainer, ReplayPerformanceEntry } from '../types';
+import { createPerformanceSpans } from '../util/createPerformanceSpans';
+import { shouldFilterRequest } from '../util/shouldFilterRequest';
+
+/** Add a performance entry breadcrumb */
+export function addNetworkBreadcrumb(replay: ReplayContainer, result: ReplayPerformanceEntry | null): void {
+  if (!replay.isEnabled()) {
+    return;
+  }
+
+  if (result === null) {
+    return;
+  }
+
+  if (shouldFilterRequest(replay, result.name)) {
+    return;
+  }
+
+  replay.addUpdate(() => {
+    createPerformanceSpans(replay, [result]);
+    // Returning true will cause `addUpdate` to not flush
+    // We do not want network requests to cause a flush. This will prevent
+    // recurring/polling requests from keeping the replay session alive.
+    return true;
+  });
+}

packages/replay/src/coreHandlers/handleFetch.ts

@@ -1,8 +1,7 @@
 import type { HandlerDataFetch } from '@sentry/types';
 
 import type { ReplayContainer, ReplayPerformanceEntry } from '../types';
-import { createPerformanceSpans } from '../util/createPerformanceSpans';
-import { shouldFilterRequest } from '../util/shouldFilterRequest';
+import { addNetworkBreadcrumb } from './addNetworkBreadcrumb';
 
 /** only exported for tests */
 export function handleFetch(handlerData: HandlerDataFetch): null | ReplayPerformanceEntry {
@@ -39,20 +38,6 @@ export function handleFetchSpanListener(replay: ReplayContainer): (handlerData:
 
     const result = handleFetch(handlerData);
 
-    if (result === null) {
-      return;
-    }
-
-    if (shouldFilterRequest(replay, result.name)) {
-      return;
-    }
-
-    replay.addUpdate(() => {
-      createPerformanceSpans(replay, [result]);
-      // Returning true will cause `addUpdate` to not flush
-      // We do not want network requests to cause a flush. This will prevent
-      // recurring/polling requests from keeping the replay session alive.
-      return true;
-    });
+    addNetworkBreadcrumb(replay, result);
   };
 }