feat(core): Adapt spans for client-side fetch to streaming responses

.size-limit.js

@@ -107,7 +107,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '38 KB',
+    limit: '39 KB',
   },
   // Vue SDK (ESM)
   {

dev-packages/e2e-tests/test-applications/react-router-6/package.json

@@ -6,6 +6,7 @@
     "@sentry/react": "latest || *",
     "@types/react": "18.0.0",
     "@types/react-dom": "18.0.0",
+    "express": "4.19.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.4.1",
@@ -14,7 +15,9 @@
   },
   "scripts": {
     "build": "react-scripts build",
-    "start": "serve -s build",
+    "start": "run-p start:client start:server",
+    "start:client": "node server/app.js",
+    "start:server": "serve -s build",
     "test": "playwright test",
     "clean": "npx rimraf node_modules pnpm-lock.yaml",
     "test:build": "pnpm install && npx playwright install && pnpm build",
@@ -43,7 +46,8 @@
   "devDependencies": {
     "@playwright/test": "^1.44.1",
     "@sentry-internal/test-utils": "link:../../../test-utils",
-    "serve": "14.0.1"
+    "serve": "14.0.1",
+    "npm-run-all2": "^6.2.0"
   },
   "volta": {
     "extends": "../../package.json"

dev-packages/e2e-tests/test-applications/react-router-6/server/app.js

@@ -0,0 +1,47 @@
+const express = require('express');
+
+const app = express();
+const PORT = 8080;
+
+const wait = time => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, time);
+  });
+};
+
+async function sseHandler(request, response, timeout = false) {
+  response.headers = {
+    'Content-Type': 'text/event-stream',
+    Connection: 'keep-alive',
+    'Cache-Control': 'no-cache',
+    'Access-Control-Allow-Origin': '*',
+  };
+
+  response.setHeader('Cache-Control', 'no-cache');
+  response.setHeader('Content-Type', 'text/event-stream');
+  response.setHeader('Access-Control-Allow-Origin', '*');
+  response.setHeader('Connection', 'keep-alive');
+
+  response.flushHeaders();
+
+  await wait(2000);
+
+  for (let index = 0; index < 10; index++) {
+    response.write(`data: ${new Date().toISOString()}\n\n`);
+    if (timeout) {
+      await wait(10000);
+    }
+  }
+
+  response.end();
+}
+
+app.get('/sse', (req, res) => sseHandler(req, res));
+
+app.get('/sse-timeout', (req, res) => sseHandler(req, res, true));
+
+app.listen(PORT, () => {
+  console.log(`SSE service listening at http://localhost:${PORT}`);
+});

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

@@ -11,6 +11,7 @@ import {
   useNavigationType,
 } from 'react-router-dom';
 import Index from './pages/Index';
+import SSE from './pages/SSE';
 import User from './pages/User';
 
 const replay = Sentry.replayIntegration();
@@ -48,6 +49,7 @@ root.render(
     <SentryRoutes>
       <Route path="/" element={<Index />} />
       <Route path="/user/:id" element={<User />} />
+      <Route path="/sse" element={<SSE />} />
     </SentryRoutes>
   </BrowserRouter>,
 );

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

@@ -0,0 +1,49 @@
+import * as Sentry from '@sentry/react';
+// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
+import * as React from 'react';
+
+const fetchSSE = async ({ timeout }: { timeout: boolean }) => {
+  Sentry.startSpanManual({ name: 'sse stream using fetch' }, async span => {
+    const res = await Sentry.startSpan({ name: 'sse fetch call' }, async () => {
+      const endpoint = `http://localhost:8080/${timeout ? 'sse-timeout' : 'sse'}`;
+      return await fetch(endpoint);
+    });
+
+    const stream = res.body;
+    const reader = stream?.getReader();
+
+    const readChunk = async () => {
+      const readRes = await reader?.read();
+      if (readRes?.done) {
+        return;
+      }
+
+      new TextDecoder().decode(readRes?.value);
+
+      await readChunk();
+    };
+
+    try {
+      await readChunk();
+    } catch (error) {
+      console.error('Could not fetch sse', error);
+    }
+
+    span.end();
+  });
+};
+
+const SSE = () => {
+  return (
+    <>
+      <button id="fetch-button" onClick={() => fetchSSE({ timeout: false })}>
+        Fetch SSE
+      </button>
+      <button id="fetch-timeout-button" onClick={() => fetchSSE({ timeout: true })}>
+        Fetch timeout SSE
+      </button>
+    </>
+  );
+};
+
+export default SSE;

dev-packages/e2e-tests/test-applications/react-router-6/tests/sse.test.ts

@@ -0,0 +1,69 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+import { SpanJSON } from '@sentry/types';
+
+test('Waits for sse streaming when creating spans', async ({ page }) => {
+  await page.goto('/sse');
+
+  const transactionPromise = waitForTransaction('react-router-6', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  const fetchButton = page.locator('id=fetch-button');
+  await fetchButton.click();
+
+  const rootSpan = await transactionPromise;
+  const sseFetchCall = rootSpan.spans?.filter(span => span.description === 'sse fetch call')[0] as SpanJSON;
+  const httpGet = rootSpan.spans?.filter(span => span.description === 'GET http://localhost:8080/sse')[0] as SpanJSON;
+
+  expect(sseFetchCall).toBeDefined();
+  expect(httpGet).toBeDefined();
+
+  expect(sseFetchCall?.timestamp).toBeDefined();
+  expect(sseFetchCall?.start_timestamp).toBeDefined();
+  expect(httpGet?.timestamp).toBeDefined();
+  expect(httpGet?.start_timestamp).toBeDefined();
+
+  // http headers get sent instantly from the server
+  const resolveDuration = Math.round((sseFetchCall.timestamp as number) - sseFetchCall.start_timestamp);
+
+  // body streams after 2s
+  const resolveBodyDuration = Math.round((httpGet.timestamp as number) - httpGet.start_timestamp);
+
+  expect(resolveDuration).toBe(0);
+  expect(resolveBodyDuration).toBe(2);
+});
+
+test('Aborts when stream takes longer than 5s', async ({ page }) => {
+  await page.goto('/sse');
+
+  const transactionPromise = waitForTransaction('react-router-6', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  const fetchButton = page.locator('id=fetch-timeout-button');
+  await fetchButton.click();
+
+  const rootSpan = await transactionPromise;
+  const sseFetchCall = rootSpan.spans?.filter(span => span.description === 'sse fetch call')[0] as SpanJSON;
+  const httpGet = rootSpan.spans?.filter(
+    span => span.description === 'GET http://localhost:8080/sse-timeout',
+  )[0] as SpanJSON;
+
+  expect(sseFetchCall).toBeDefined();
+  expect(httpGet).toBeDefined();
+
+  expect(sseFetchCall?.timestamp).toBeDefined();
+  expect(sseFetchCall?.start_timestamp).toBeDefined();
+  expect(httpGet?.timestamp).toBeDefined();
+  expect(httpGet?.start_timestamp).toBeDefined();
+
+  // http headers get sent instantly from the server
+  const resolveDuration = Math.round((sseFetchCall.timestamp as number) - sseFetchCall.start_timestamp);
+
+  // body streams after 10s but client should abort reading after 5s
+  const resolveBodyDuration = Math.round((httpGet.timestamp as number) - httpGet.start_timestamp);
+
+  expect(resolveDuration).toBe(0);
+  expect(resolveBodyDuration).toBe(7);
+});

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -398,7 +398,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         registerInpInteractionListener();
       }
 
-      instrumentOutgoingRequests({
+      instrumentOutgoingRequests(client, {
         traceFetch,
         traceXHR,
         tracePropagationTargets: client.getOptions().tracePropagationTargets,

packages/browser/src/tracing/request.ts

@@ -23,6 +23,7 @@ import {
 import type { Client, HandlerDataXhr, SentryWrappedXMLHttpRequest, Span } from '@sentry/types';
 import {
   BAGGAGE_HEADER_NAME,
+  addFetchEndInstrumentationHandler,
   addFetchInstrumentationHandler,
   browserPerformanceTimeOrigin,
   dynamicSamplingContextToSentryBaggageHeader,
@@ -93,14 +94,17 @@ export interface RequestInstrumentationOptions {
   shouldCreateSpanForRequest?(this: void, url: string): boolean;
 }
 
+const responseToSpanId = new WeakMap<object, string>();
+const spanIdToEndTimestamp = new Map<string, number>();
+
 export const defaultRequestInstrumentationOptions: RequestInstrumentationOptions = {
   traceFetch: true,
   traceXHR: true,
   enableHTTPTimings: true,
 };
 
 /** Registers span creators for xhr and fetch requests  */
-export function instrumentOutgoingRequests(_options?: Partial<RequestInstrumentationOptions>): void {
+export function instrumentOutgoingRequests(client: Client, _options?: Partial<RequestInstrumentationOptions>): void {
   const { traceFetch, traceXHR, shouldCreateSpanForRequest, enableHTTPTimings, tracePropagationTargets } = {
     traceFetch: defaultRequestInstrumentationOptions.traceFetch,
     traceXHR: defaultRequestInstrumentationOptions.traceXHR,
@@ -115,8 +119,39 @@ export function instrumentOutgoingRequests(_options?: Partial<RequestInstrumenta
   const spans: Record<string, Span> = {};
 
   if (traceFetch) {
+    // Keeping track of http requests, whose body payloads resolved later than the intial resolved request
+    // e.g. streaming using server sent events (SSE)
+    client.addEventProcessor(event => {
+      if (event.type === 'transaction' && event.spans) {
+        event.spans.forEach(span => {
+          if (span.op === 'http.client') {
+            const updatedTimestamp = spanIdToEndTimestamp.get(span.span_id);
+            if (updatedTimestamp) {
+              span.timestamp = updatedTimestamp / 1000;
+              spanIdToEndTimestamp.delete(span.span_id);
+            }
+          }
+        });
+      }
+      return event;
+    });
+
+    addFetchEndInstrumentationHandler(handlerData => {
+      if (handlerData.response) {
+        const span = responseToSpanId.get(handlerData.response);
+        if (span && handlerData.endTimestamp) {
+          spanIdToEndTimestamp.set(span, handlerData.endTimestamp);
+        }
+      }
+    });
+
     addFetchInstrumentationHandler(handlerData => {
       const createdSpan = instrumentFetchRequest(handlerData, shouldCreateSpan, shouldAttachHeadersWithTargets, spans);
+
+      if (handlerData.response && handlerData.fetchData.__span) {
+        responseToSpanId.set(handlerData.response, handlerData.fetchData.__span);
+      }
+
       // We cannot use `window.location` in the generic fetch instrumentation,
       // but we need it for reliable `server.address` attribute.
       // so we extend this in here

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

@@ -1,4 +1,5 @@
 import * as browserUtils from '@sentry-internal/browser-utils';
+import type { Client } from '@sentry/types';
 import * as utils from '@sentry/utils';
 import { WINDOW } from '../../../src/helpers';
 
@@ -10,16 +11,27 @@ beforeAll(() => {
   global.Request = {};
 });
 
+class MockClient implements Partial<Client> {
+  public addEventProcessor: () => void;
+  constructor() {
+    // Mock addEventProcessor function
+    this.addEventProcessor = jest.fn();
+  }
+}
+
 describe('instrumentOutgoingRequests', () => {
+  let client: Client;
+
   beforeEach(() => {
     jest.clearAllMocks();
+    client = new MockClient() as unknown as Client;
   });
 
   it('instruments fetch and xhr requests', () => {
     const addFetchSpy = jest.spyOn(utils, 'addFetchInstrumentationHandler');
     const addXhrSpy = jest.spyOn(browserUtils, 'addXhrInstrumentationHandler');
 
-    instrumentOutgoingRequests();
+    instrumentOutgoingRequests(client);
 
     expect(addFetchSpy).toHaveBeenCalledWith(expect.any(Function));
     expect(addXhrSpy).toHaveBeenCalledWith(expect.any(Function));
@@ -28,15 +40,15 @@ describe('instrumentOutgoingRequests', () => {
   it('does not instrument fetch requests if traceFetch is false', () => {
     const addFetchSpy = jest.spyOn(utils, 'addFetchInstrumentationHandler');
 
-    instrumentOutgoingRequests({ traceFetch: false });
+    instrumentOutgoingRequests(client, { traceFetch: false });
 
     expect(addFetchSpy).not.toHaveBeenCalled();
   });
 
   it('does not instrument xhr requests if traceXHR is false', () => {
     const addXhrSpy = jest.spyOn(browserUtils, 'addXhrInstrumentationHandler');
 
-    instrumentOutgoingRequests({ traceXHR: false });
+    instrumentOutgoingRequests(client, { traceXHR: false });
 
     expect(addXhrSpy).not.toHaveBeenCalled();
   });

packages/sveltekit/test/client/browserTracingIntegration.test.ts

@@ -60,7 +60,7 @@ describe('browserTracingIntegration', () => {
       return createdRootSpan as Span;
     });
 
-  const fakeClient = { getOptions: () => ({}), on: () => {} };
+  const fakeClient = { getOptions: () => ({}), on: () => {}, addEventProcessor: () => {} };
 
   const mockedRoutingSpan = {
     end: () => {},