feat(browser): Add support for propagateTraceparent SDK option

.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,
+});

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

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

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-without-performance-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 tracing without performance (TWP) 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: undefined,
+    });
+
+    expect(requestHeaders).toMatchObject({
+      'sentry-trace': `${traceparentData?.traceId}-${traceparentData?.parentSpanId}`,
+      baggage: expect.stringContaining(`sentry-trace_id=${traceparentData?.traceId}`),
+      traceparent: `00-${traceparentData?.traceId}-${traceparentData?.parentSpanId}-00`,
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-with-custom-sentry-headers-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-with-custom-sentry-headers-propagateTraceparent/subject.js

@@ -0,0 +1,3 @@
+fetch('http://sentry-test-site.example/api/test/', {
+  headers: { 'sentry-trace': 'abc-123-1', baggage: 'sentry-trace_id=abc', traceparent: '00-abc-123-01' },
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-with-custom-sentry-headers-propagateTraceparent/test.ts

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  "instrumentation doesn't override manually added traceparent header, if `propagateTraceparent` is true",
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const requestPromise = page.waitForRequest('http://sentry-test-site.example/api/test/');
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.goto(url);
+
+    const request = await requestPromise;
+
+    const headers = await request.allHeaders();
+
+    expect(headers['sentry-trace']).toBe('abc-123-1');
+    expect(headers.baggage).toBe('sentry-trace_id=abc');
+    expect(headers.traceparent).toBe('00-abc-123-01');
+  },
+);

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

@@ -41,7 +41,7 @@ sentryTest('should create spans for fetch requests', async ({ getLocalTestUrl, p
   );
 });
 
-sentryTest('should attach `sentry-trace` header to fetch requests', async ({ getLocalTestUrl, page }) => {
+sentryTest('attaches `sentry-trace` and `baggage` headers to fetch requests', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
@@ -65,6 +65,8 @@ sentryTest('should attach `sentry-trace` header to fetch requests', async ({ get
     'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-1$/),
     baggage: expect.any(String),
   });
+  // traceparent must only be attached if propagateTraceparent is `true`
+  expect(requestHeaders1).not.toHaveProperty('traceparent');
 
   const request2 = requests[1];
   const requestHeaders2 = request2.headers();
@@ -73,11 +75,13 @@ sentryTest('should attach `sentry-trace` header to fetch requests', async ({ get
     baggage: expect.any(String),
     'x-test-header': 'existing-header',
   });
+  expect(requestHeaders2).not.toHaveProperty('traceparent');
 
   const request3 = requests[2];
   const requestHeaders3 = request3.headers();
   expect(requestHeaders3).toMatchObject({
     'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-1$/),
     baggage: expect.any(String),
   });
+  expect(requestHeaders3).not.toHaveProperty('traceparent');
 });

dev-packages/browser-integration-tests/suites/tracing/request/xhr-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/xhr-propagateTraceparent/subject.js

@@ -0,0 +1,12 @@
+const xhr_1 = new XMLHttpRequest();
+xhr_1.open('GET', 'http://sentry-test-site.example/0');
+xhr_1.send();
+
+const xhr_2 = new XMLHttpRequest();
+xhr_2.open('GET', 'http://sentry-test-site.example/1');
+xhr_2.setRequestHeader('X-Test-Header', 'existing-header');
+xhr_2.send();
+
+const xhr_3 = new XMLHttpRequest();
+xhr_3.open('GET', 'http://sentry-test-site.example/2');
+xhr_3.send();

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

@@ -0,0 +1,58 @@
+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 XHR requests if `propagateTraceparent` is true',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    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/xhr-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/xhr-tracing-unsampled-propagateTraceparent/subject.js

@@ -0,0 +1,3 @@
+const xhr_1 = new XMLHttpRequest();
+xhr_1.open('GET', 'http://sentry-test-site.example/0');
+xhr_1.send();