test(browser): port browser tracing suites to span streaming

Co-Authored-By: GPT-6 <codex@openai.com>

Author: msonnb

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/async-spans/init.js

@@ -3,7 +3,6 @@ import * as Sentry from '@sentry/browser';
 window.Sentry = Sentry;
 
 Sentry.init({
-  traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   integrations: [Sentry.browserTracingIntegration()],
   tracesSampleRate: 1,

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/async-spans/test.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
 
 type WindowWithSpan = Window & {
   firstWaitingSpan: any;
@@ -19,8 +18,7 @@ sentryTest(
     const url = await getLocalTestUrl({ testDir: __dirname });
     await page.goto(url);
 
-    const envelope = await getFirstSentryEnvelopeRequest<Event>(page);
-    expect(envelope).toBeDefined();
+    await page.waitForFunction(() => !!(window as unknown as WindowWithSpan).secondWaitingSpan);
 
     const firstWaitingSpanValue = await page.evaluate(
       () => (window as unknown as WindowWithSpan).firstWaitingSpan.name,

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-custom/init.js

@@ -3,7 +3,6 @@ import * as Sentry from '@sentry/browser';
 window.Sentry = Sentry;
 
 Sentry.init({
-  traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   integrations: [
     Sentry.browserTracingIntegration({

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-custom/test.ts

@@ -3,7 +3,7 @@ import type { StreamedSpanJSON } from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
 import { shouldSkipTracingTest } from '../../../../utils/helpers';
 
-sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestUrl, page }) => {
+sentryTest('should finish a custom span when the page goes background', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-streamed/subject.js

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

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-streamed/template.html

@@ -1,20 +1,18 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
 
-sentryTest('should finish pageload transaction when the page goes background', async ({ getLocalTestUrl, page }) => {
-  if (shouldSkipTracingTest()) {
-    sentryTest.skip();
-  }
+sentryTest('finishes streamed pageload span when the page goes background', async ({ getLocalTestUrl, page }) => {
+  sentryTest.skip(shouldSkipTracingTest());
   const url = await getLocalTestUrl({ testDir: __dirname });
+  const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
 
   await page.goto(url);
   await page.locator('#go-background').click();
+  const pageloadSpan = await pageloadSpanPromise;
 
-  const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page);
-
-  expect(pageloadTransaction.contexts?.trace?.op).toBe('pageload');
-  expect(pageloadTransaction.contexts?.trace?.status).toBe('cancelled');
-  expect(pageloadTransaction.contexts?.trace?.data?.['sentry.cancellation_reason']).toBe('document.hidden');
+  expect(getSpanOp(pageloadSpan)).toBe('pageload');
+  expect(pageloadSpan.status).toBe('ok');
+  expect(pageloadSpan.attributes['sentry.cancellation_reason']?.value).toBe('document.hidden');
 });

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-streamed/test.ts

@@ -2,46 +2,32 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
 import {
-  getMultipleSentryEnvelopeRequests,
+  envelopeRequestParser,
+  waitForErrorRequest,
   runScriptInSandbox,
   shouldSkipTracingTest,
 } from '../../../../utils/helpers';
+import { collectStreamedSpans, getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
 
 sentryTest(
-  'should put the pageload transaction name onto an error event caught during pageload',
+  'puts the page path onto an error caught during pageload',
   async ({ getLocalTestUrl, page, browserName }) => {
-    if (browserName === 'webkit') {
-      // This test fails on Webkit as errors thrown from `runScriptInSandbox` are Script Errors and skipped by Sentry
-      sentryTest.skip();
-    }
-
-    if (shouldSkipTracingTest()) {
-      sentryTest.skip();
-    }
-
+    // WebKit treats errors from runScriptInSandbox as Script Errors, which Sentry skips.
+    sentryTest.skip(shouldSkipTracingTest() || browserName === 'webkit');
     const url = await getLocalTestUrl({ testDir: __dirname });
-
-    const errorEventsPromise = getMultipleSentryEnvelopeRequests<Event>(page, 2);
-
+    const spans = collectStreamedSpans(page);
+    const pageloadPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
+    const errorPromise = waitForErrorRequest(page);
     await page.goto(url);
-
-    await runScriptInSandbox(page, {
-      content: `
-          throw new Error('Error during pageload');
-        `,
-    });
-
-    const [e1, e2] = await errorEventsPromise;
-
-    const pageloadTxnEvent = e1.type === 'transaction' ? e1 : e2;
-    const errorEvent = e1.type === 'transaction' ? e2 : e1;
-
-    expect(pageloadTxnEvent.contexts?.trace?.op).toEqual('pageload');
-    expect(pageloadTxnEvent.spans?.length).toBeGreaterThan(0);
-    expect(errorEvent.exception?.values?.[0]).toBeDefined();
-
-    expect(pageloadTxnEvent.transaction?.endsWith('index.html')).toBe(true);
-
-    expect(errorEvent.transaction).toEqual(pageloadTxnEvent.transaction);
+    await runScriptInSandbox(page, { content: "throw new Error('Error during pageload');" });
+    const [pageload, errorRequest] = await Promise.all([pageloadPromise, errorPromise]);
+    await page.evaluate(() => (window as any).Sentry.flush());
+    expect(getSpanOp(pageload)).toBe('pageload');
+    expect(spans.filter(span => !span.is_segment)).not.toHaveLength(0);
+    const error = envelopeRequestParser<Event>(errorRequest);
+    expect(error.exception?.values?.[0]).toBeDefined();
+    expect(pageload.name).toBe('Pageload');
+    expect(error.transaction).toBe('/index.html');
+    expect(error.transaction).toBe(pageload.attributes['url.path']?.value);
   },
 );