test(e2e): Port React Router v5 and v6 E2E apps to span streaming

dev-packages/e2e-tests/test-applications/react-router-5/src/index.tsx

@@ -11,7 +11,6 @@ const replay = Sentry.replayIntegration();
 const history = createBrowserHistory();
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn:
     process.env.REACT_APP_E2E_TEST_DSN ||

dev-packages/e2e-tests/test-applications/react-router-5/tests/errors.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForError, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('Sends correct error event', async ({ page }) => {
   const errorEventPromise = waitForError('react-router-5', event => {
@@ -30,18 +30,18 @@ test('Sends correct error event', async ({ page }) => {
 });
 
 test('Sets correct transactionName', async ({ page }) => {
-  const transactionPromise = waitForTransaction('react-router-5', async transactionEvent => {
-    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  const pageloadSpanPromise = waitForStreamedSpan('react-router-5', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   const errorEventPromise = waitForError('react-router-5', event => {
     return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
   });
 
   await page.goto('/');
-  const transactionEvent = await transactionPromise;
+  const pageloadSpan = await pageloadSpanPromise;
 
-  // Only capture error once transaction was sent
+  // Only capture error once the pageload span was sent
   const exceptionButton = page.locator('id=exception-button');
   await exceptionButton.click();
 
@@ -53,7 +53,7 @@ test('Sets correct transactionName', async ({ page }) => {
   expect(errorEvent.transaction).toEqual('/');
 
   expect(errorEvent.contexts?.trace).toEqual({
-    trace_id: transactionEvent.contexts?.trace?.trace_id,
-    span_id: expect.not.stringContaining(transactionEvent.contexts?.trace?.span_id || ''),
+    trace_id: pageloadSpan.trace_id,
+    span_id: expect.not.stringContaining(pageloadSpan.span_id),
   });
 });

dev-packages/e2e-tests/test-applications/react-router-5/tests/spans.test.ts

@@ -0,0 +1,50 @@
+import { expect, test } from '@playwright/test';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+test('sends a pageload span with a parameterized URL', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('react-router-5', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto(`/`);
+
+  const span = await spanPromise;
+
+  expect(span.name).toBe('/');
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.react.reactrouter_v5', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.template': { value: '/', type: 'string' },
+    'url.path': { value: '/', type: 'string' },
+    'url.full': { value: expect.stringMatching(/^https?:\/\/localhost:\d+\/$/), type: 'string' },
+  });
+});
+
+test('sends a navigation span with a parameterized URL', async ({ page }) => {
+  page.on('console', msg => console.log(msg.text()));
+  const pageloadSpanPromise = waitForStreamedSpan('react-router-5', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  const navigationSpanPromise = waitForStreamedSpan('react-router-5', span => {
+    return getSpanOp(span) === 'navigation' && span.is_segment;
+  });
+
+  await page.goto(`/`);
+  await pageloadSpanPromise;
+
+  const linkElement = page.locator('id=navigation');
+
+  const [_, navigationSpan] = await Promise.all([linkElement.click(), navigationSpanPromise]);
+
+  expect(navigationSpan.name).toBe('/user/:id');
+  expect(navigationSpan.attributes).toMatchObject({
+    'sentry.op': { value: 'navigation', type: 'string' },
+    'sentry.origin': { value: 'auto.navigation.react.reactrouter_v5', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.template': { value: '/user/:id', type: 'string' },
+    'url.path': { value: '/user/5', type: 'string' },
+    'url.full': { value: expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/), type: 'string' },
+  });
+});

dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/index.tsx

@@ -16,7 +16,6 @@ import Index from './pages/Index';
 const replay = Sentry.replayIntegration();
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [