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

.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';