feat(browser): Add support for propagateTraceparent SDK option (#17509)

This PR adds support for a new browser SDK init option,
`propagateTraceparent`, as [spec'd out in our develop
docs](https://develop.sentry.dev/sdk/telemetry/traces/#propagatetraceparent)

If users opt into `propagateTraceparent`, browser SDKs will attach a W3C
compliant `traceparent` header to outgoing fetch and XHR requests, in
addition to `sentry-trace` and `baggage` headers.

Author: Lms24

.size-limit.js

@@ -75,7 +75,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '83 KB',
+    limit: '84 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback)',
@@ -120,7 +120,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '42 KB',
+    limit: '43 KB',
   },
   // Vue SDK (ESM)
   {
@@ -206,7 +206,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '44 KB',
+    limit: '45 KB',
   },
   // SvelteKit SDK (ESM)
   {

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/tracePropagationTargets/defaultTargetsNoMatch/init.js

@@ -6,4 +6,5 @@ Sentry.init({
   dsn: 'https://[email protected]/1337',
   integrations: [Sentry.browserTracingIntegration()],
   tracesSampleRate: 1,
+  propagateTraceparent: true,
 });

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/tracePropagationTargets/defaultTargetsNoMatch/test.ts

@@ -3,7 +3,7 @@ import { sentryTest } from '../../../../../utils/fixtures';
 import { shouldSkipTracingTest } from '../../../../../utils/helpers';
 
 sentryTest(
-  'should not attach `sentry-trace` and `baggage` header to cross-origin requests when no tracePropagationTargets are defined',
+  "doesn't attach `sentry-trace` and `baggage` or `traceparent` (if `propagateTraceparent` is true) header to cross-origin requests when no tracePropagationTargets are defined",
   async ({ getLocalTestUrl, page }) => {
     if (shouldSkipTracingTest()) {
       sentryTest.skip();
@@ -25,6 +25,7 @@ sentryTest(
       expect(requestHeaders).not.toMatchObject({
         'sentry-trace': expect.any(String),
         baggage: expect.any(String),
+        traceparent: expect.any(String),
       });
     }
   },

dev-packages/browser-integration-tests/suites/tracing/request/fetch-propagateTraceparent/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 1,
+  propagateTraceparent: true,
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-propagateTraceparent/subject.js

@@ -0,0 +1,5 @@
+fetch('http://sentry-test-site.example/0').then(
+  fetch('http://sentry-test-site.example/1', { headers: { 'X-Test-Header': 'existing-header' } }).then(
+    fetch('http://sentry-test-site.example/2'),
+  ),
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-propagateTraceparent/test.ts

@@ -0,0 +1,60 @@
+import { expect } from '@playwright/test';
+import { extractTraceparentData } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'attaches traceparent header to fetch requests if `propagateTraceparent` is true',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    await page.route('http://sentry-test-site.example/*', route => route.fulfill({ body: 'ok' }));
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://sentry-test-site.example/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    const request1 = requests[0];
+    const requestHeaders1 = request1.headers();
+    const traceparentData1 = extractTraceparentData(requestHeaders1['sentry-trace']);
+    expect(traceparentData1).toMatchObject({
+      traceId: expect.stringMatching(/^([a-f0-9]{32})$/),
+      parentSpanId: expect.stringMatching(/^([a-f0-9]{16})$/),
+      parentSampled: true,
+    });
+
+    expect(requestHeaders1).toMatchObject({
+      'sentry-trace': `${traceparentData1?.traceId}-${traceparentData1?.parentSpanId}-1`,
+      baggage: expect.stringContaining(`sentry-trace_id=${traceparentData1?.traceId}`),
+      traceparent: `00-${traceparentData1?.traceId}-${traceparentData1?.parentSpanId}-01`,
+    });
+
+    const request2 = requests[1];
+    const requestHeaders2 = request2.headers();
+    const traceparentData2 = extractTraceparentData(requestHeaders2['sentry-trace']);
+    expect(requestHeaders2).toMatchObject({
+      'sentry-trace': `${traceparentData2?.traceId}-${traceparentData2?.parentSpanId}-1`,
+      baggage: expect.stringContaining(`sentry-trace_id=${traceparentData2?.traceId}`),
+      traceparent: `00-${traceparentData2?.traceId}-${traceparentData2?.parentSpanId}-01`,
+      'x-test-header': 'existing-header',
+    });
+
+    const request3 = requests[2];
+    const requestHeaders3 = request3.headers();
+    const traceparentData3 = extractTraceparentData(requestHeaders3['sentry-trace']);
+    expect(requestHeaders3).toMatchObject({
+      'sentry-trace': `${traceparentData3?.traceId}-${traceparentData3?.parentSpanId}-1`,
+      baggage: expect.stringContaining(`sentry-trace_id=${traceparentData3?.traceId}`),
+      traceparent: `00-${traceparentData3?.traceId}-${traceparentData3?.parentSpanId}-01`,
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-unsampled-propagateTraceparent/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 0,
+  propagateTraceparent: true,
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-unsampled-propagateTraceparent/subject.js

@@ -0,0 +1 @@
+fetch('http://sentry-test-site.example/0');

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-unsampled-propagateTraceparent/test.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test';
+import { extractTraceparentData } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'attaches traceparent header to unsampled fetch requests if `propagateTraceparent` is true',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const [, request] = await Promise.all([page.goto(url), page.waitForRequest('http://sentry-test-site.example/0')]);
+
+    const requestHeaders = request.headers();
+
+    const traceparentData = extractTraceparentData(requestHeaders['sentry-trace']);
+    expect(traceparentData).toMatchObject({
+      traceId: expect.stringMatching(/^([a-f0-9]{32})$/),
+      parentSpanId: expect.stringMatching(/^([a-f0-9]{16})$/),
+      parentSampled: false,
+    });
+
+    expect(requestHeaders).toMatchObject({
+      'sentry-trace': `${traceparentData?.traceId}-${traceparentData?.parentSpanId}-0`,
+      traceparent: `00-${traceparentData?.traceId}-${traceparentData?.parentSpanId}-00`,
+      baggage: expect.stringContaining(`sentry-trace_id=${traceparentData?.traceId}`),
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-without-performance-propagateTraceparent/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  // no tracesSampleRate defined means TWP mode
+  propagateTraceparent: true,
+});