feat(browser): Add support for streamed spans in httpContextIntegration (#20464)

This PR adds span processing support for the `httpContextIntegration `:
- register a `processSegmentSpan` callback on `httpContextIntegration `
that adds the attributes. All attributes are already registered in
sentry conventions:
https://getsentry.github.io/sentry-conventions/attributes/url/#url-full
and
https://getsentry.github.io/sentry-conventions/attributes/http/#http-request-header-key
- adds a span streaming-specific integration test in addition to the
already existing error/event-based integration test

Closes #20378

Author: nicohrubec

.size-limit.js

@@ -59,7 +59,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '83 KB',
+    limit: '84 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - with treeshaking flags',
@@ -96,7 +96,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '100 KB',
+    limit: '101 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
@@ -138,7 +138,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'metrics', 'logger'),
     gzip: true,
-    limit: '28 KB',
+    limit: '29 KB',
   },
   // React SDK (ESM)
   {
@@ -197,7 +197,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Logs, Metrics)',
     path: createCDNPath('bundle.logs.metrics.min.js'),
     gzip: true,
-    limit: '30 KB',
+    limit: '31 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Logs, Metrics)',
@@ -209,7 +209,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Replay, Logs, Metrics)',
     path: createCDNPath('bundle.replay.logs.metrics.min.js'),
     gzip: true,
-    limit: '69 KB',
+    limit: '70 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',
@@ -255,7 +255,7 @@ module.exports = [
     path: createCDNPath('bundle.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '88 KB',
+    limit: '89 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed',
@@ -283,21 +283,21 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '258.5 KB',
+    limit: '259 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed',
     path: createCDNPath('bundle.tracing.replay.feedback.min.js'),
     gzip: false,
     brotli: false,
-    limit: '268 KB',
+    limit: '269 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed',
     path: createCDNPath('bundle.tracing.replay.feedback.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '271.5 KB',
+    limit: '272 KB',
   },
   // Next.js SDK (ESM)
   {

dev-packages/browser-integration-tests/suites/integrations/httpContext-streamed/init.js

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.spanStreamingIntegration(), Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1.0,
+});

dev-packages/browser-integration-tests/suites/integrations/httpContext-streamed/test.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpans } from '../../../utils/spanUtils';
+
+sentryTest('httpContextIntegration captures url, user-agent, and referer', async ({ getLocalTestUrl, page }) => {
+  sentryTest.skip(shouldSkipTracingTest());
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const spansPromise = waitForStreamedSpans(page, spans => spans.some(s => getSpanOp(s) === 'pageload'));
+
+  await page.goto(url, { referer: 'https://sentry.io/' });
+
+  const spans = await spansPromise;
+
+  const pageloadSpan = spans.find(s => getSpanOp(s) === 'pageload');
+
+  expect(pageloadSpan!.attributes?.['url.full']).toEqual({ type: 'string', value: expect.any(String) });
+  expect(pageloadSpan!.attributes?.['http.request.header.user_agent']).toEqual({
+    type: 'string',
+    value: expect.any(String),
+  });
+  expect(pageloadSpan!.attributes?.['http.request.header.referer']).toEqual({
+    type: 'string',
+    value: 'https://sentry.io/',
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/startSpan/streamed/test.ts

@@ -179,6 +179,14 @@ sentryTest(
             type: 'string',
             value: expect.any(String),
           },
+          'http.request.header.user_agent': {
+            type: 'string',
+            value: expect.any(String),
+          },
+          'url.full': {
+            type: 'string',
+            value: expect.any(String),
+          },
           [SEMANTIC_ATTRIBUTE_SENTRY_OP]: {
             type: 'string',
             value: 'test',

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions-streamed/test.ts

@@ -52,6 +52,14 @@ sentryTest('captures streamed interaction span tree. @firefox', async ({ browser
         type: 'string',
         value: expect.any(String),
       },
+      'http.request.header.user_agent': {
+        type: 'string',
+        value: expect.any(String),
+      },
+      'url.full': {
+        type: 'string',
+        value: expect.any(String),
+      },
       [SEMANTIC_ATTRIBUTE_SENTRY_IDLE_SPAN_FINISH_REASON]: {
         type: 'string',
         value: 'idleTimeout',

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-streamed/test.ts

@@ -81,6 +81,14 @@ sentryTest('starts a streamed navigation span on page navigation', async ({ brow
         type: 'string',
         value: expect.any(String),
       },
+      'http.request.header.user_agent': {
+        type: 'string',
+        value: expect.any(String),
+      },
+      'url.full': {
+        type: 'string',
+        value: expect.any(String),
+      },
       'device.processor_count': {
         type: expect.stringMatching(/^(integer)|(double)$/),
         value: expect.any(Number),

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/pageload-streamed/test.ts

@@ -74,6 +74,14 @@ sentryTest(
           type: 'string',
           value: expect.any(String),
         },
+        'http.request.header.user_agent': {
+          type: 'string',
+          value: expect.any(String),
+        },
+        'url.full': {
+          type: 'string',
+          value: expect.any(String),
+        },
         // formerly known as 'hardwareConcurrency'
         'device.processor_count': {
           type: expect.stringMatching(/^(integer)|(double)$/),

packages/browser/src/integrations/httpcontext.ts

@@ -1,4 +1,4 @@
-import { defineIntegration } from '@sentry/core';
+import { defineIntegration, safeSetSpanJSONAttributes } from '@sentry/core';
 import { getHttpRequestData, WINDOW } from '../helpers';
 
 /**
@@ -26,5 +26,21 @@ export const httpContextIntegration = defineIntegration(() => {
         headers,
       };
     },
+    processSegmentSpan(span) {
+      // if none of the information we want exists, don't bother
+      if (!WINDOW.navigator && !WINDOW.location && !WINDOW.document) {
+        return;
+      }
+
+      const reqData = getHttpRequestData();
+
+      safeSetSpanJSONAttributes(span, {
+        // Coerce empty string to undefined so the helper's nullish check drops it,
+        // rather than writing an empty `url.full` attribute onto the span.
+        'url.full': reqData.url || undefined,
+        'http.request.header.user_agent': reqData.headers['User-Agent'],
+        'http.request.header.referer': reqData.headers['Referer'],
+      });
+    },
   };
 });

packages/core/src/index.ts

@@ -73,6 +73,7 @@ export { createCheckInEnvelope } from './checkin';
 export { hasSpansEnabled } from './utils/hasSpansEnabled';
 export { withStreamedSpan } from './tracing/spans/beforeSendSpan';
 export { isStreamedBeforeSendSpanCallback } from './tracing/spans/beforeSendSpan';
+export { safeSetSpanJSONAttributes } from './tracing/spans/captureSpan';
 export { isSentryRequestUrl } from './utils/isSentryRequestUrl';
 export { handleCallbackErrors } from './utils/handleCallbackErrors';
 export { parameterize, fmt } from './utils/parameterize';