feat(core): Make stream instrumentation opt-in

CHANGELOG.md

@@ -10,6 +10,11 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+- feat(core): Make stream instrumentation opt-in ([#13951](https://github.com/getsentry/sentry-javascript/pull/13951))
+
+This change adds a new option `traceStreams` to the browser tracing integration. Only when set to `true`, Sentry will
+instrument streams via fetch.
+
 ## 8.34.0
 
 ### Important Changes

dev-packages/e2e-tests/test-applications/react-router-6/src/index.tsx

@@ -26,6 +26,7 @@ Sentry.init({
       useNavigationType,
       createRoutesFromChildren,
       matchRoutes,
+      traceStreams: true,
     }),
     replay,
   ],

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -132,6 +132,13 @@ export interface BrowserTracingOptions {
    */
   traceXHR: boolean;
 
+  /**
+   * Flag to disable tracking of long-lived streams, like server-sent events (SSE) via fetch.
+   *
+   * Default: false
+   */
+  trackFetchStreamPerformance: boolean;
+
   /**
    * If true, Sentry will capture http timings and add them to the corresponding http spans.
    *
@@ -200,6 +207,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     markBackgroundSpan,
     traceFetch,
     traceXHR,
+    trackFetchStreamPerformance,
     shouldCreateSpanForRequest,
     enableHTTPTimings,
     instrumentPageLoad,
@@ -409,6 +417,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
       instrumentOutgoingRequests(client, {
         traceFetch,
         traceXHR,
+        trackFetchStreamPerformance,
         tracePropagationTargets: client.getOptions().tracePropagationTargets,
         shouldCreateSpanForRequest,
         enableHTTPTimings,

packages/browser/src/tracing/request.ts

@@ -78,6 +78,13 @@ export interface RequestInstrumentationOptions {
    */
   traceXHR: boolean;
 
+  /**
+   * Flag to disable tracking of long-lived streams, like server-sent events (SSE) via fetch.
+   *
+   * Default: false
+   */
+  trackFetchStreamPerformance: boolean;
+
   /**
    * If true, Sentry will capture http timings and add them to the corresponding http spans.
    *
@@ -101,13 +108,22 @@ export const defaultRequestInstrumentationOptions: RequestInstrumentationOptions
   traceFetch: true,
   traceXHR: true,
   enableHTTPTimings: true,
+  trackFetchStreamPerformance: false,
 };
 
 /** Registers span creators for xhr and fetch requests  */
 export function instrumentOutgoingRequests(client: Client, _options?: Partial<RequestInstrumentationOptions>): void {
-  const { traceFetch, traceXHR, shouldCreateSpanForRequest, enableHTTPTimings, tracePropagationTargets } = {
+  const {
+    traceFetch,
+    traceXHR,
+    trackFetchStreamPerformance,
+    shouldCreateSpanForRequest,
+    enableHTTPTimings,
+    tracePropagationTargets,
+  } = {
     traceFetch: defaultRequestInstrumentationOptions.traceFetch,
     traceXHR: defaultRequestInstrumentationOptions.traceXHR,
+    trackFetchStreamPerformance: defaultRequestInstrumentationOptions.trackFetchStreamPerformance,
     ..._options,
   };
 
@@ -143,7 +159,7 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
           spanIdToEndTimestamp.set(span, handlerData.endTimestamp);
         }
       }
-    });
+    }, trackFetchStreamPerformance);
 
     addFetchInstrumentationHandler(handlerData => {
       const createdSpan = instrumentFetchRequest(handlerData, shouldCreateSpan, shouldAttachHeadersWithTargets, spans);

packages/browser/test/tracing/request.test.ts

@@ -35,7 +35,7 @@
 
     instrumentOutgoingRequests(client);
 
-    expect(addFetchSpy).toHaveBeenCalledWith(expect.any(Function));
+    expect(addFetchSpy).toHaveBeenCalledWith(expect.any(Function), false);
     expect(addXhrSpy).toHaveBeenCalledWith(expect.any(Function));
   });
 
@@ -54,6 +54,14 @@
 
     expect(addXhrSpy).not.toHaveBeenCalled();
   });
+
+  it('does instrument streaming requests if trackFetchStreamPerformance is true', () => {
+    const addFetchSpy = vi.spyOn(utils, 'addFetchInstrumentationHandler');
+
+    instrumentOutgoingRequests(client, { trackFetchStreamPerformance: true });
+
+    expect(addFetchSpy).toHaveBeenCalledWith(expect.any(Function), true);
+  });
 });
 
 interface ProtocolInfo {

packages/utils/src/instrument/fetch.ts

@@ -35,10 +35,13 @@ export function addFetchInstrumentationHandler(
  * Only used internally
  * @hidden
  */
-export function addFetchEndInstrumentationHandler(handler: (data: HandlerDataFetch) => void): void {
+export function addFetchEndInstrumentationHandler(
+  handler: (data: HandlerDataFetch) => void,
+  trackFetchStreamPerformance?: boolean,
+): void {
   const type = 'fetch-body-resolved';
   addHandler(type, handler);
-  maybeInstrument(type, () => instrumentFetch(streamHandler));
+  maybeInstrument(type, () => instrumentFetch(trackFetchStreamPerformance ? streamHandler : undefined));
 }
 
 function instrumentFetch(onFetchResolved?: (response: Response) => void, skipNativeFetchCheck: boolean = false): void {