test(e2e): Port Next.js routing test apps to span streaming (#23797)

## What

Ports the three Next.js client-routing E2E apps (`nextjs-15-basepath`,
`nextjs-15-intl`, `nextjs-16-trailing-slash`) to span streaming: the
`traceLifecycle: 'static'` pin from #22590 is removed and the specs now
assert on streamed spans instead of transactions.

## Why

Span streaming is the default, so the default E2E suite should exercise
it. This is the first slice of #23513; these three apps were picked
because they are near-identical and cover pageload and navigation route
parameterization, which is where span naming changed.

Closes: #23816

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: andreiborza

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/instrumentation-client.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/sentry.edge.config.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/sentry.server.config.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-span.test.ts

@@ -0,0 +1,83 @@
+import { expect, test } from '@playwright/test';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+test('Creates a pageload span for basePath root route with prefix', async ({ page }) => {
+  const pageloadSpanPromise = waitForStreamedSpan('nextjs-15-basepath', span => {
+    return span.name === '/my-app' && getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto('/my-app');
+
+  expect(await pageloadSpanPromise).toBeDefined();
+});
+
+test('Creates a dynamic pageload span for basePath dynamic route with prefix', async ({ page }) => {
+  const randomRoute = String(Math.random());
+
+  const pageloadSpanPromise = waitForStreamedSpan('nextjs-15-basepath', span => {
+    return span.name === '/my-app/dynamic/:parameter' && getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto(`/my-app/dynamic/${randomRoute}`);
+
+  expect(await pageloadSpanPromise).toBeDefined();
+});
+
+test('Creates a dynamic pageload span for basePath dynamic catch-all route with prefix', async ({ page }) => {
+  const randomRoute = String(Math.random());
+
+  const pageloadSpanPromise = waitForStreamedSpan('nextjs-15-basepath', span => {
+    return span.name === '/my-app/dynamic/:parameters*' && getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto(`/my-app/dynamic/${randomRoute}/foo/bar/baz`);
+
+  expect(await pageloadSpanPromise).toBeDefined();
+});
+
+test('Creates a navigation span for basePath router with prefix', async ({ page }) => {
+  const navigationSpanPromise = waitForStreamedSpan('nextjs-15-basepath', span => {
+    return (
+      span.name === '/my-app/navigation/:param/router-push' &&
+      getSpanOp(span) === 'navigation' &&
+      span.is_segment &&
+      span.attributes['navigation.type']?.value === 'router.push'
+    );
+  });
+
+  await page.goto('/my-app/navigation');
+  await page.waitForTimeout(1000);
+  await page.getByText('router.push()').click();
+
+  const navigationSpan = await navigationSpanPromise;
+  expect(navigationSpan).toBeDefined();
+
+  expect(navigationSpan.attributes).toMatchObject({
+    'sentry.op': { value: 'navigation', type: 'string' },
+    'sentry.origin': { value: 'auto.navigation.nextjs.app_router_instrumentation', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.full': {
+      value: expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+      type: 'string',
+    },
+    'url.path': { value: '/my-app/navigation/42/router-push', type: 'string' },
+    'url.template': { value: '/my-app/navigation/:param/router-push', type: 'string' },
+  });
+});
+
+test('Creates a navigation span for basePath <Link> with prefix', async ({ page }) => {
+  const navigationSpanPromise = waitForStreamedSpan('nextjs-15-basepath', span => {
+    return (
+      span.name === '/my-app/navigation/:param/link' &&
+      getSpanOp(span) === 'navigation' &&
+      span.is_segment &&
+      span.attributes['navigation.type']?.value === 'router.push'
+    );
+  });
+
+  await page.goto('/my-app/navigation');
+  await page.waitForTimeout(1000);
+  await page.getByText('Normal Link').click();
+
+  expect(await navigationSpanPromise).toBeDefined();
+});

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa',
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`,

dev-packages/e2e-tests/test-applications/nextjs-15-intl/instrumentation-client.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa',
   dsn: process.env.SENTRY_DSN,
   tunnel: `http://localhost:3031/`,

dev-packages/e2e-tests/test-applications/nextjs-15-intl/sentry.edge.config.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa',
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`,

dev-packages/e2e-tests/test-applications/nextjs-15-intl/sentry.server.config.ts

@@ -1,90 +1,54 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
-test('should create consistent parameterized transaction for default locale without prefix', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-15-intl', async transactionEvent => {
-    return transactionEvent.transaction === '/:locale/i18n-test' && transactionEvent.contexts?.trace?.op === 'pageload';
+test('should create consistent parameterized span for default locale without prefix', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('nextjs-15-intl', span => {
+    return span.name === '/:locale/i18n-test' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/i18n-test`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    transaction: '/:locale/i18n-test',
-    transaction_info: { source: 'route' },
-    contexts: {
-      trace: {
-        data: {
-          'sentry.segment.name.source': 'route',
-        },
-      },
-    },
-  });
+  const span = await spanPromise;
+
+  expect(span.name).toBe('/:locale/i18n-test');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
-test('should create consistent parameterized transaction for non-default locale with prefix', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-15-intl', async transactionEvent => {
-    return transactionEvent.transaction === '/:locale/i18n-test' && transactionEvent.contexts?.trace?.op === 'pageload';
+test('should create consistent parameterized span for non-default locale with prefix', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('nextjs-15-intl', span => {
+    return span.name === '/:locale/i18n-test' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/ar/i18n-test`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    transaction: '/:locale/i18n-test',
-    transaction_info: { source: 'route' },
-    contexts: {
-      trace: {
-        data: {
-          'sentry.segment.name.source': 'route',
-        },
-      },
-    },
-  });
+  const span = await spanPromise;
+
+  expect(span.name).toBe('/:locale/i18n-test');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
 test('should parameterize locale root page correctly for default locale without prefix', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-15-intl', async transactionEvent => {
-    return transactionEvent.transaction === '/:locale' && transactionEvent.contexts?.trace?.op === 'pageload';
+  const spanPromise = waitForStreamedSpan('nextjs-15-intl', span => {
+    return span.name === '/:locale' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    transaction: '/:locale',
-    transaction_info: { source: 'route' },
-    contexts: {
-      trace: {
-        data: {
-          'sentry.segment.name.source': 'route',
-        },
-      },
-    },
-  });
+  const span = await spanPromise;
+
+  expect(span.name).toBe('/:locale');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
 test('should parameterize locale root page correctly for non-default locale with prefix', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-15-intl', async transactionEvent => {
-    return transactionEvent.transaction === '/:locale' && transactionEvent.contexts?.trace?.op === 'pageload';
+  const spanPromise = waitForStreamedSpan('nextjs-15-intl', span => {
+    return span.name === '/:locale' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/fr`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    transaction: '/:locale',
-    transaction_info: { source: 'route' },
-    contexts: {
-      trace: {
-        data: {
-          'sentry.segment.name.source': 'route',
-        },
-      },
-    },
-  });
+  const span = await spanPromise;
+
+  expect(span.name).toBe('/:locale');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });

dev-packages/e2e-tests/test-applications/nextjs-15-intl/tests/i18n-routing.test.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server