add tests for requests and spans after initial pageload span ended

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/dsc-txn-name-update/test.ts

@@ -166,6 +166,7 @@ async function makeRequestAndGetBaggageItems(page: Page): Promise<string[]> {
   const request = await requestPromise;
 
   const baggage = await request.headerValue('baggage');
+
   return baggage?.split(',').sort() ?? [];
 }
 

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

@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test';
+import { expect, request } from '@playwright/test';
 import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
 import type { EventAndTraceHeader } from '../../../../utils/helpers';
@@ -294,6 +294,149 @@ sentryTest(
   },
 );
 
+sentryTest(
+  'outgoing fetch request after pageload has pageload traceId in headers',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.route('http://example.com/**', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({}),
+      });
+    });
+
+    const pageloadEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
+      page,
+      undefined,
+      eventAndTraceHeaderRequestParser,
+    );
+    await page.goto(url);
+    const [pageloadEvent, pageloadTraceHeader] = await pageloadEventPromise;
+
+    const pageloadTraceContext = pageloadEvent.contexts?.trace;
+    const pageloadTraceId = pageloadTraceContext?.trace_id;
+
+    expect(pageloadEvent.type).toEqual('transaction');
+    expect(pageloadTraceContext).toMatchObject({
+      op: 'pageload',
+      trace_id: expect.stringMatching(/^[0-9a-f]{32}$/),
+      span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+    });
+    expect(pageloadTraceContext).not.toHaveProperty('parent_span_id');
+
+    expect(pageloadTraceHeader).toEqual({
+      environment: 'production',
+      public_key: 'public',
+      sample_rate: '1',
+      sampled: 'true',
+      trace_id: pageloadTraceId,
+    });
+
+    const requestPromise = page.waitForRequest('http://example.com/*');
+    await page.locator('#xhrBtn').click();
+    const request = await requestPromise;
+
+    const headers = request.headers();
+
+    // sampling decision is propagated from active span sampling decision
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}-1$`));
+    expect(headers['baggage']).toEqual(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId},sentry-sample_rate=1,sentry-sampled=true`,
+    );
+  },
+);
+
+sentryTest(
+  'custom span and request headers after pageload have pageload traceId ',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.route('http://example.com/**', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({}),
+      });
+    });
+
+    const pageloadEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
+      page,
+      undefined,
+      eventAndTraceHeaderRequestParser,
+    );
+
+    await page.goto(url);
+
+    const [pageloadEvent, pageloadTraceHeader] = await pageloadEventPromise;
+
+    const pageloadTraceContext = pageloadEvent.contexts?.trace;
+    const pageloadTraceId = pageloadTraceContext?.trace_id;
+
+    expect(pageloadEvent.type).toEqual('transaction');
+    expect(pageloadTraceContext).toMatchObject({
+      op: 'pageload',
+      trace_id: expect.stringMatching(/^[0-9a-f]{32}$/),
+      span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+    });
+    expect(pageloadTraceContext).not.toHaveProperty('parent_span_id');
+
+    expect(pageloadTraceHeader).toEqual({
+      environment: 'production',
+      public_key: 'public',
+      sample_rate: '1',
+      sampled: 'true',
+      trace_id: pageloadTraceId,
+    });
+
+    const requestPromise = page.waitForRequest('http://example.com/**');
+    const customTransactionEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
+      page,
+      undefined,
+      eventAndTraceHeaderRequestParser,
+    );
+
+    await page.locator('#spanAndFetchBtn').click();
+
+    const [[customTransactionEvent, customTransactionTraceHeader], request] = await Promise.all([
+      customTransactionEventPromise,
+      requestPromise,
+    ]);
+
+    const customTransactionTraceContext = customTransactionEvent.contexts?.trace;
+
+    expect(customTransactionEvent.type).toEqual('transaction');
+    expect(customTransactionTraceContext).toMatchObject({
+      trace_id: pageloadTraceId,
+    });
+
+    expect(customTransactionTraceHeader).toEqual({
+      environment: 'production',
+      public_key: 'public',
+      sample_rate: '1',
+      sampled: 'true',
+      trace_id: pageloadTraceId,
+    });
+
+    const headers = request.headers();
+
+    // sampling decision is propagated from active span sampling decision
+    expect(headers['sentry-trace']).toMatch(new RegExp(`^${pageloadTraceId}-[0-9a-f]{16}-1$`));
+    expect(headers['baggage']).toEqual(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${pageloadTraceId},sentry-sample_rate=1,sentry-sampled=true`,
+    );
+  },
+);
+
 sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
     sentryTest.skip();

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

@@ -14,3 +14,10 @@ xhrBtn.addEventListener('click', () => {
   xhr.open('GET', 'http://example.com');
   xhr.send();
 });
+
+const spanAndFetchBtn = document.getElementById('spanAndFetchBtn');
+spanAndFetchBtn.addEventListener('click', () => {
+  Sentry.startSpan({ name: 'custom-root-span' }, async () => {
+    await fetch('http://example.com');
+  });
+});

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

@@ -7,5 +7,6 @@
     <button id="errorBtn">Throw Error</button>
     <button id="fetchBtn">Fetch Request</button>
     <button id="xhrBtn">XHR Request</button>
+    <button id="spanAndFetchBtn">Start Span and Fetch Request</button>
   </body>
 </html>