test(browser-integration-tests): Test that errors during pageload/navigation have correct trace id (#11610)

Adds two tests to ensure errors thrown during pageload or navigations
have the correct traceId.

---------

Co-authored-by: Luca Forstner <luca.forstner@sentry.io>

Author: Lms24

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

@@ -1,9 +1,13 @@
 import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+import {
+  getFirstSentryEnvelopeRequest,
+  getMultipleSentryEnvelopeRequests,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
 
-sentryTest('should create a new trace on each navigation', async ({ getLocalTestPath, page }) => {
+sentryTest('creates a new trace on each navigation', async ({ getLocalTestPath, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
@@ -32,13 +36,13 @@ sentryTest('error after navigation has navigation traceId', async ({ getLocalTes
 
   const url = await getLocalTestPath({ testDir: __dirname });
 
-  // ensure navigation transaction is finished
+  // ensure pageload transaction is finished
   await getFirstSentryEnvelopeRequest<Event>(page, url);
 
-  const navigationEvent1 = await getFirstSentryEnvelopeRequest<Event>(page, `${url}#foo`);
-  expect(navigationEvent1.contexts?.trace?.op).toBe('navigation');
+  const navigationEvent = await getFirstSentryEnvelopeRequest<Event>(page, `${url}#foo`);
+  expect(navigationEvent.contexts?.trace?.op).toBe('navigation');
 
-  const navigationTraceId = navigationEvent1.contexts?.trace?.trace_id;
+  const navigationTraceId = navigationEvent.contexts?.trace?.trace_id;
   expect(navigationTraceId).toMatch(/^[0-9a-f]{32}$/);
 
   const [, errorEvent] = await Promise.all([
@@ -49,3 +53,30 @@ sentryTest('error after navigation has navigation traceId', async ({ getLocalTes
   const errorTraceId = errorEvent.contexts?.trace?.trace_id;
   expect(errorTraceId).toBe(navigationTraceId);
 });
+
+sentryTest('error during navigation has new navigation traceId', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  // ensure navigation transaction is finished
+  await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  const envelopeRequestsPromise = getMultipleSentryEnvelopeRequests<Event>(page, 2);
+  await page.goto(`${url}#foo`);
+  await page.locator('#errorBtn').click();
+  const events = await envelopeRequestsPromise;
+
+  const navigationEvent = events.find(event => event.type === 'transaction');
+  const errorEvent = events.find(event => !event.type);
+
+  expect(navigationEvent?.contexts?.trace?.op).toBe('navigation');
+
+  const navigationTraceId = navigationEvent?.contexts?.trace?.trace_id;
+  expect(navigationTraceId).toMatch(/^[0-9a-f]{32}$/);
+
+  const errorTraceId = errorEvent?.contexts?.trace?.trace_id;
+  expect(errorTraceId).toBe(navigationTraceId);
+});

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

@@ -1,7 +1,11 @@
 import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+import {
+  getFirstSentryEnvelopeRequest,
+  getMultipleSentryEnvelopeRequests,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
 
 sentryTest(
   'should create a new trace for a navigation after the initial pageload',
@@ -48,3 +52,27 @@ sentryTest('error after pageload has pageload traceId', async ({ getLocalTestPat
   const errorTraceId = errorEvent.contexts?.trace?.trace_id;
   expect(errorTraceId).toBe(pageloadTraceId);
 });
+
+sentryTest('error during pageload has pageload traceId', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const envelopeRequestsPromise = getMultipleSentryEnvelopeRequests<Event>(page, 2);
+  await page.goto(url);
+  await page.locator('#errorBtn').click();
+  const events = await envelopeRequestsPromise;
+
+  const pageloadEvent = events.find(event => event.type === 'transaction');
+  const errorEvent = events.find(event => !event.type);
+
+  expect(pageloadEvent?.contexts?.trace?.op).toBe('pageload');
+
+  const pageloadTraceId = pageloadEvent?.contexts?.trace?.trace_id;
+  expect(pageloadTraceId).toMatch(/^[0-9a-f]{32}$/);
+
+  const errorTraceId = errorEvent?.contexts?.trace?.trace_id;
+  expect(errorTraceId).toBe(pageloadTraceId);
+});