test(browser-integration-tests): Test trace lifetime for outgoing fetch requests

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/init.js

@@ -5,5 +5,6 @@ window.Sentry = Sentry;
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://example.com'],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/navigation/test.ts

@@ -45,10 +45,9 @@ sentryTest('error after navigation has navigation traceId', async ({ getLocalTes
   const navigationTraceId = navigationEvent.contexts?.trace?.trace_id;
   expect(navigationTraceId).toMatch(/^[0-9a-f]{32}$/);
 
-  const [, errorEvent] = await Promise.all([
-    page.locator('#errorBtn').click(),
-    getFirstSentryEnvelopeRequest<Event>(page),
-  ]);
+  const errorEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+  await page.locator('#errorBtn').click();
+  const errorEvent = await errorEventPromise;
 
   const errorTraceId = errorEvent.contexts?.trace?.trace_id;
   expect(errorTraceId).toBe(navigationTraceId);
@@ -80,3 +79,67 @@ sentryTest('error during navigation has new navigation traceId', async ({ getLoc
   const errorTraceId = errorEvent?.contexts?.trace?.trace_id;
   expect(errorTraceId).toBe(navigationTraceId);
 });
+
+sentryTest(
+  'outgoing fetch request after navigation has navigation traceId in headers',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    // ensure navigation transaction is finished
+    await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+    const navigationEvent = await getFirstSentryEnvelopeRequest<Event>(page, `${url}#foo`);
+    expect(navigationEvent.contexts?.trace?.op).toBe('navigation');
+
+    const navigationTraceId = navigationEvent.contexts?.trace?.trace_id;
+    expect(navigationTraceId).toMatch(/^[0-9a-f]{32}$/);
+
+    const requestPromise = page.waitForRequest('http://example.com/*');
+    await page.locator('#fetchBtn').click();
+    const request = await requestPromise;
+    const headers = request.headers();
+
+    // sampling decision is deferred b/c of no active span at the time of request
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}$`));
+    expect(headers['baggage']).toEqual(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId}`,
+    );
+  },
+);
+
+sentryTest(
+  'outgoing fetch request during navigation has navigation traceId in headers',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    // ensure navigation transaction is finished
+    await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+    const navigationEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+    const requestPromise = page.waitForRequest('http://example.com/*');
+    await page.goto(`${url}#foo`);
+    await page.locator('#fetchBtn').click();
+    const [navigationEvent, request] = await Promise.all([navigationEventPromise, requestPromise]);
+
+    expect(navigationEvent.contexts?.trace?.op).toBe('navigation');
+
+    const navigationTraceId = navigationEvent.contexts?.trace?.trace_id;
+    expect(navigationTraceId).toMatch(/^[0-9a-f]{32}$/);
+
+    const headers = request.headers();
+
+    // sampling decision is propagated from active span sampling decision
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}-1$`));
+    expect(headers['baggage']).toEqual(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId},sentry-sample_rate=1,sentry-sampled=true`,
+    );
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload/test.ts

@@ -76,3 +76,61 @@ sentryTest('error during pageload has pageload traceId', async ({ getLocalTestPa
   const errorTraceId = errorEvent?.contexts?.trace?.trace_id;
   expect(errorTraceId).toBe(pageloadTraceId);
 });
+
+sentryTest(
+  'outgoing fetch request after pageload has pageload traceId in headers',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const pageloadEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);
+    expect(pageloadEvent.contexts?.trace?.op).toBe('pageload');
+
+    const pageloadTraceId = pageloadEvent.contexts?.trace?.trace_id;
+    expect(pageloadTraceId).toMatch(/^[0-9a-f]{32}$/);
+
+    const requestPromise = page.waitForRequest('http://example.com/*');
+    await page.locator('#fetchBtn').click();
+    const request = await requestPromise;
+    const headers = request.headers();
+
+    // sampling decision is deferred b/c of no active span at the time of request
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}$`));
+    expect(headers['baggage']).toEqual(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId}`,
+    );
+  },
+);
+
+sentryTest(
+  'outgoing fetch request during pageload has pageload traceId in headers',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const pageloadEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+    const requestPromise = page.waitForRequest('http://example.com/*');
+    await page.goto(url);
+    await page.locator('#fetchBtn').click();
+    const [pageloadEvent, request] = await Promise.all([pageloadEventPromise, requestPromise]);
+
+    expect(pageloadEvent.contexts?.trace?.op).toBe('pageload');
+
+    const navigationTraceId = pageloadEvent.contexts?.trace?.trace_id;
+    expect(navigationTraceId).toMatch(/^[0-9a-f]{32}$/);
+
+    const headers = request.headers();
+
+    // sampling decision is propagated from active span sampling decision
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${navigationTraceId}-[0-9a-f]{16}-1$`));
+    expect(headers['baggage']).toEqual(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${navigationTraceId},sentry-sample_rate=1,sentry-sampled=true`,
+    );
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/subject.js

@@ -2,3 +2,8 @@ const errorBtn = document.getElementById('errorBtn');
 errorBtn.addEventListener('click', () => {
   throw new Error('Sentry Test Error');
 });
+
+const fetchBtn = document.getElementById('fetchBtn');
+fetchBtn.addEventListener('click', async () => {
+  await fetch('http://example.com');
+});

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/template.html

@@ -5,5 +5,6 @@
   </head>
   <body>
     <button id="errorBtn">Throw Error</button>
+    <button id="fetchBtn">Fetch Request</button>
   </body>
 </html>