feat(browser)!: Use http.client span op for streamed fetch bodies

Streaming changes response behaviour, not the operation category. The
sibling span is now marked with `http.response.body.streaming` instead
of an `http.client.stream` op.

Ref: JS-3105

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: msonnb

MIGRATION.md

@@ -270,6 +270,7 @@ Span operations (`sentry.op`) were aligned with the values defined in `@sentry/c
   - Runloop spans now use `ui.task` instead of `ui.ember.runloop.<queue>`. The queue is available on the new `ember.runloop.queue` attribute.
 - Browser SDKs: Paint spans (`first-paint`, `first-contentful-paint`) now use the registered `browser.paint` op instead of `paint`. This does not affect Session Replay, whose performance entries keep their own `paint` type.
 - `@sentry/aws-serverless`: Lambda invocation spans now use the `function.aws` op instead of `function.aws.lambda`.
+- `@sentry/browser`: The sibling span created by `fetchStreamPerformanceIntegration` now uses `http.client` instead of `http.client.stream`. It is distinguished from the regular request span by the new `http.response.body.streaming` attribute.
 
 If you reference these operations in dashboards, alerts, or `beforeSendSpan`, update them to the new values.
 

dev-packages/browser-integration-tests/suites/tracing/request/fetch-streamed-track-stream-performance/test.ts

@@ -3,10 +3,11 @@ import type { AddressInfo } from 'net';
 import { expect } from '@playwright/test';
 import { sentryTest } from '../../../../utils/fixtures';
 import { shouldSkipTracingTest } from '../../../../utils/helpers';
+import type { SerializedStreamedSpan } from '@sentry/core';
 import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
 
 sentryTest(
-  'creates an http.client.stream sibling span when fetchStreamPerformanceIntegration is used',
+  'creates a streaming http.client sibling span when fetchStreamPerformanceIntegration is used',
   async ({ getLocalTestUrl, page }) => {
     sentryTest.skip(shouldSkipTracingTest());
 
@@ -36,9 +37,18 @@ sentryTest(
 
       const url = await getLocalTestUrl({ testDir: __dirname });
 
-      // Wait for each span type separately since they may arrive in different envelopes
-      const httpSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'http.client');
-      const streamSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'http.client.stream');
+      // Wait for each span type separately since they may arrive in different envelopes.
+      // Both spans share the `http.client` op, so the streaming attribute is what tells them apart.
+      const isStreamSpan = (span: SerializedStreamedSpan): boolean =>
+        span.attributes['http.response.body.streaming']?.value === true;
+      const httpSpanPromise = waitForStreamedSpan(
+        page,
+        span => getSpanOp(span) === 'http.client' && !isStreamSpan(span),
+      );
+      const streamSpanPromise = waitForStreamedSpan(
+        page,
+        span => getSpanOp(span) === 'http.client' && isStreamSpan(span),
+      );
 
       await page.goto(url);
 
@@ -55,6 +65,7 @@ sentryTest(
           'http.method': { type: 'string', value: 'GET' },
           url: { type: 'string', value: 'http://sentry-test-site.example/delayed' },
           type: { type: 'string', value: 'fetch' },
+          'http.response.body.streaming': { type: 'boolean', value: true },
         }),
       });
 

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

@@ -13,8 +13,10 @@ test('Waits for sse streaming when creating spans', async ({ page }) => {
 
   const rootSpan = await transactionPromise;
   const sseFetchCall = rootSpan.spans?.filter(span => span.description === 'sse fetch call')[0]!;
-  const httpGet = rootSpan.spans?.filter(span => span.description === 'GET http://localhost:8080/sse')[0]!;
-  const httpStream = rootSpan.spans?.filter(span => span.op === 'http.client.stream')[0]!;
+  const httpGet = rootSpan.spans?.filter(
+    span => span.description === 'GET http://localhost:8080/sse' && !span.data?.['http.response.body.streaming'],
+  )[0]!;
+  const httpStream = rootSpan.spans?.filter(span => span.data?.['http.response.body.streaming'])[0]!;
 
   expect(sseFetchCall).toBeDefined();
   expect(httpGet).toBeDefined();
@@ -26,7 +28,7 @@ test('Waits for sse streaming when creating spans', async ({ page }) => {
   // http.client span ends at header arrival (~0s)
   const httpGetDuration = Math.round((httpGet.timestamp as number) - httpGet.start_timestamp);
 
-  // body streaming duration is captured in the sibling http.client.stream span (~2s)
+  // body streaming duration is captured in the sibling streaming http.client span (~2s)
   const streamDuration = Math.round((httpStream.timestamp as number) - httpStream.start_timestamp);
 
   expect(resolveDuration).toBe(0);
@@ -46,7 +48,9 @@ test('Waits for sse streaming when sse has been explicitly aborted', async ({ pa
 
   const rootSpan = await transactionPromise;
   const sseFetchCall = rootSpan.spans?.filter(span => span.description === 'sse fetch call')[0]!;
-  const httpGet = rootSpan.spans?.filter(span => span.description === 'GET http://localhost:8080/sse')[0]!;
+  const httpGet = rootSpan.spans?.filter(
+    span => span.description === 'GET http://localhost:8080/sse' && !span.data?.['http.response.body.streaming'],
+  )[0]!;
 
   expect(sseFetchCall).toBeDefined();
   expect(httpGet).toBeDefined();
@@ -86,7 +90,10 @@ test('Aborts when stream takes longer than 5s, by not updating the span duration
 
   const rootSpan = await transactionPromise;
   const sseFetchCall = rootSpan.spans?.filter(span => span.description === 'sse fetch call')[0]!;
-  const httpGet = rootSpan.spans?.filter(span => span.description === 'GET http://localhost:8080/sse-timeout')[0]!;
+  const httpGet = rootSpan.spans?.filter(
+    span =>
+      span.description === 'GET http://localhost:8080/sse-timeout' && !span.data?.['http.response.body.streaming'],
+  )[0]!;
 
   expect(sseFetchCall).toBeDefined();
   expect(httpGet).toBeDefined();

packages/browser/src/integrations/fetchStreamPerformance.ts

@@ -1,3 +1,4 @@
+import { WEB_SERVER_HTTP_CLIENT_SPAN_OP } from '@sentry/conventions/op';
 import type { IntegrationFn, Span } from '@sentry/core';
 import {
   addFetchEndInstrumentationHandler,
@@ -20,15 +21,16 @@ const STREAM_RESOLVE_FALLBACK_MS = 90_000;
 const STREAMING_CONTENT_TYPES = ['text/event-stream', 'application/x-ndjson', 'application/stream+json'];
 
 /**
- * Tracks streamed fetch response bodies by creating an `http.client.stream` sibling span.
+ * Tracks streamed fetch response bodies by creating a sibling `http.client` span,
+ * marked with `http.response.body.streaming`.
  *
  * The regular `http.client` span ends when response headers arrive. This integration adds
  * a span that starts at header arrival and ends when the body fully resolves:
  *
  * ```
  * --------- pageload --------------------------------
  *     -- http.client --
- *                       -- http.client.stream -------
+ *                       -- http.client (streaming) --
  * ```
  */
 export const fetchStreamPerformanceIntegration = defineIntegration(() => {
@@ -83,7 +85,8 @@ export const fetchStreamPerformanceIntegration = defineIntegration(() => {
               url: stripDataUrlContent(url),
               'http.method': method,
               type: 'fetch',
-              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client.stream',
+              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: WEB_SERVER_HTTP_CLIENT_SPAN_OP,
+              'http.response.body.streaming': true,
               [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser.stream',
             },
           });