test(e2e): Port React Router SPA E2E apps to span streaming

Removes the `traceLifecycle: 'static'` pin from `react-router-7-spa`,
`react-router-8-spa`, `react-router-7-cross-usage`,
`react-router-8-cross-usage` and `react-router-8-cloudflare`, and rewrites their
specs against streamed span v2.

The Cloudflare mysql spec matches on `db.query.text` now: under streaming a
mysql span is named after its query summary, so both queries in that route are
called `SELECT`.

Author: andreiborza

dev-packages/e2e-tests/test-applications/react-router-7-cross-usage/src/index.tsx

@@ -18,7 +18,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: [

dev-packages/e2e-tests/test-applications/react-router-7-cross-usage/tests/spans.test.ts

@@ -0,0 +1,132 @@
+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-7-cross-usage', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto(`/projects/123/views/234/567`);
+
+  const span = await spanPromise;
+
+  expect((await page.innerHTML('#root')).includes('Details')).toBe(true);
+  expect(span.name).toBe('/projects/:projectId/views/:viewId/:detailId');
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.react.reactrouter', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.template': { value: '/projects/:projectId/views/:viewId/:detailId', type: 'string' },
+    'url.path': { value: '/projects/123/views/234/567', type: 'string' },
+    'url.full': {
+      value: expect.stringMatching(/^https?:\/\/localhost:\d+\/projects\/123\/views\/234\/567$/),
+      type: 'string',
+    },
+  });
+});
+
+test('sends a pageload span with a parameterized URL - alternative route', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('react-router-7-cross-usage', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto(`/projects/234/old-views/234/567`);
+
+  const span = await spanPromise;
+
+  expect((await page.innerHTML('#root')).includes('Details')).toBe(true);
+  expect(span.name).toBe('/projects/:projectId/old-views/:viewId/:detailId');
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.react.reactrouter', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.template': { value: '/projects/:projectId/old-views/:viewId/:detailId', type: 'string' },
+    'url.path': { value: '/projects/234/old-views/234/567', type: 'string' },
+    'url.full': {
+      value: expect.stringMatching(/^https?:\/\/localhost:\d+\/projects\/234\/old-views\/234\/567$/),
+      type: 'string',
+    },
+  });
+});
+
+test('sends a navigation span with a parameterized URL', async ({ page }) => {
+  const pageloadSpanPromise = waitForStreamedSpan('react-router-7-cross-usage', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  const navigationSpanPromise = waitForStreamedSpan('react-router-7-cross-usage', span => {
+    return getSpanOp(span) === 'navigation' && span.is_segment;
+  });
+
+  await page.goto(`/`);
+  const pageloadSpan = await pageloadSpanPromise;
+
+  expect(pageloadSpan.name).toBe('/');
+  expect(pageloadSpan.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.react.reactrouter', 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' },
+  });
+
+  const linkElement = page.locator('id=navigation');
+
+  const [_, navigationSpan] = await Promise.all([linkElement.click(), navigationSpanPromise]);
+
+  expect((await page.innerHTML('#root')).includes('Details')).toBe(true);
+  expect(navigationSpan.name).toBe('/projects/:projectId/views/:viewId/:detailId');
+  expect(navigationSpan.attributes).toMatchObject({
+    'sentry.op': { value: 'navigation', type: 'string' },
+    'sentry.origin': { value: 'auto.navigation.react.reactrouter', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.template': { value: '/projects/:projectId/views/:viewId/:detailId', type: 'string' },
+    'url.path': { value: '/projects/123/views/456/789', type: 'string' },
+    'url.full': {
+      value: expect.stringMatching(/^https?:\/\/localhost:\d+\/projects\/123\/views\/456\/789$/),
+      type: 'string',
+    },
+  });
+});
+
+test('sends a navigation span with a parameterized URL - alternative route', async ({ page }) => {
+  const pageloadSpanPromise = waitForStreamedSpan('react-router-7-cross-usage', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  const navigationSpanPromise = waitForStreamedSpan('react-router-7-cross-usage', span => {
+    return getSpanOp(span) === 'navigation' && span.is_segment;
+  });
+
+  await page.goto(`/`);
+  const pageloadSpan = await pageloadSpanPromise;
+
+  expect(pageloadSpan.name).toBe('/');
+  expect(pageloadSpan.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.react.reactrouter', 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' },
+  });
+
+  const linkElement = page.locator('id=old-navigation');
+
+  const [_, navigationSpan] = await Promise.all([linkElement.click(), navigationSpanPromise]);
+
+  expect((await page.innerHTML('#root')).includes('Details')).toBe(true);
+  expect(navigationSpan.name).toBe('/projects/:projectId/old-views/:viewId/:detailId');
+  expect(navigationSpan.attributes).toMatchObject({
+    'sentry.op': { value: 'navigation', type: 'string' },
+    'sentry.origin': { value: 'auto.navigation.react.reactrouter', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.template': { value: '/projects/:projectId/old-views/:viewId/:detailId', type: 'string' },
+    'url.path': { value: '/projects/123/old-views/345/654', type: 'string' },
+    'url.full': {
+      value: expect.stringMatching(/^https?:\/\/localhost:\d+\/projects\/123\/old-views\/345\/654$/),
+      type: 'string',
+    },
+  });
+});

dev-packages/e2e-tests/test-applications/react-router-7-cross-usage/tests/transactions.test.ts

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

dev-packages/e2e-tests/test-applications/react-router-7-spa/src/main.tsx

@@ -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, baseURL }) => {
   const errorEventPromise = waitForError('react-router-7-spa', event => {
@@ -30,18 +30,18 @@ test('Sends correct error event', async ({ page, baseURL }) => {
 });
 
 test('Sets correct transactionName', async ({ page }) => {
-  const transactionPromise = waitForTransaction('react-router-7-spa', async transactionEvent => {
-    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  const pageloadSpanPromise = waitForStreamedSpan('react-router-7-spa', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   const errorEventPromise = waitForError('react-router-7-spa', 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),
   });
 });