test(e2e): Update react-router-6 test to avoid sending to Sentry (#…

…12313)

Part of #11910

I renamed `standard-frontend-react` to `react-router-6` as this is more
descriptive (what does standard frontend even mean?).

This test now also uses the event proxy.

.github/workflows/build.yml

@@ -1012,7 +1012,7 @@ jobs:
             'react-create-hash-router',
             'react-router-6-use-routes',
             'react-router-5',
-            'standard-frontend-react',
+            'react-router-6',
             'svelte-5',
             'sveltekit',
             'sveltekit-2',
@@ -1039,9 +1039,9 @@ jobs:
           - test-application: 'create-react-app'
             build-command: 'test:build-ts3.8'
             label: 'create-react-app (TS 3.8)'
-          - test-application: 'standard-frontend-react'
+          - test-application: 'react-router-6'
             build-command: 'test:build-ts3.8'
-            label: 'standard-frontend-react (TS 3.8)'
+            label: 'react-router-6 (TS 3.8)'
           - test-application: 'create-next-app'
             build-command: 'test:build-13'
             label: 'create-next-app (next@13)'

.github/workflows/canary.yml

@@ -92,9 +92,9 @@ jobs:
           - test-application: 'react-create-hash-router'
             build-command: 'test:build-canary'
             label: 'react-create-hash-router (canary)'
-          - test-application: 'standard-frontend-react'
+          - test-application: 'react-router-6'
             build-command: 'test:build-canary'
-            label: 'standard-frontend-react (canary)'
+            label: 'react-router-6 (canary)'
 
     steps:
       - name: Check out current commit

dev-packages/e2e-tests/test-applications/standard-frontend-react/package.json → dev-packages/e2e-tests/test-applications/react-router-6/package.json

@@ -1,22 +1,16 @@
 {
-  "name": "standard-frontend-react-test",
+  "name": "react-router-6-test",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@sentry/react": "latest || *",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "13.0.0",
-    "@testing-library/user-event": "13.2.1",
-    "@types/jest": "27.0.1",
-    "@types/node": "16.7.13",
     "@types/react": "18.0.0",
     "@types/react-dom": "18.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
-    "typescript": "4.9.5",
-    "web-vitals": "2.1.0"
+    "typescript": "4.9.5"
   },
   "scripts": {
     "build": "react-scripts build",
@@ -48,6 +42,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
     "serve": "14.0.1"
   },
   "volta": {

dev-packages/e2e-tests/test-applications/react-router-6/playwright.config.mjs

@@ -0,0 +1,7 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: `pnpm start`,
+});
+
+export default config;

dev-packages/e2e-tests/test-applications/standard-frontend-react/src/index.tsx → dev-packages/e2e-tests/test-applications/react-router-6/src/index.tsx

@@ -36,21 +36,8 @@ Sentry.init({
   // Always capture replays, so we can test this properly
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
-});
-
-Sentry.addEventProcessor(event => {
-  if (
-    event.type === 'transaction' &&
-    (event.contexts?.trace?.op === 'pageload' || event.contexts?.trace?.op === 'navigation')
-  ) {
-    const eventId = event.event_id;
-    if (eventId) {
-      window.recordedTransactions = window.recordedTransactions || [];
-      window.recordedTransactions.push(eventId);
-    }
-  }
 
-  return event;
+  tunnel: 'http://localhost:3031',
 });
 
 const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);

dev-packages/e2e-tests/test-applications/standard-frontend-react/src/pages/Index.tsx → dev-packages/e2e-tests/test-applications/react-router-6/src/pages/Index.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react';
 // biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
 import * as React from 'react';
 import { Link } from 'react-router-dom';
@@ -11,8 +10,7 @@ const Index = () => {
         value="Capture Exception"
         id="exception-button"
         onClick={() => {
-          const eventId = Sentry.captureException(new Error('I am an error!'));
-          window.capturedExceptionId = eventId;
+          throw new Error('I am an error!');
         }}
       />
       <Link to="/user/5" id="navigation">

dev-packages/e2e-tests/test-applications/react-router-6/start-event-proxy.mjs

@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'react-router-6',
+});

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

@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test';
+import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Sends correct error event', async ({ page }) => {
+  const errorEventPromise = waitForError('react-router-6', event => {
+    return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
+  });
+
+  await page.goto('/');
+
+  const exceptionButton = page.locator('id=exception-button');
+  await exceptionButton.click();
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');
+
+  expect(errorEvent.request).toEqual({
+    headers: expect.any(Object),
+    url: 'http://localhost:3030/',
+  });
+
+  expect(errorEvent.transaction).toEqual('/');
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: expect.any(String),
+    span_id: expect.any(String),
+  });
+});
+
+test('Sets correct transactionName', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-6', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  const errorEventPromise = waitForError('react-router-6', event => {
+    return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
+  });
+
+  await page.goto('/');
+  const transactionEvent = await transactionPromise;
+
+  // Only capture error once transaction was sent
+  const exceptionButton = page.locator('id=exception-button');
+  await exceptionButton.click();
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');
+
+  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 || ''),
+  });
+});

dev-packages/e2e-tests/test-applications/react-router-6/tests/transactions.test.ts

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('sends a pageload transaction with a parameterized URL', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-6', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto(`/`);
+
+  const rootSpan = await transactionPromise;
+
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'pageload',
+        origin: 'auto.pageload.react.reactrouter_v6',
+      },
+    },
+    transaction: '/',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});
+
+test('sends a navigation transaction with a parameterized URL', async ({ page }) => {
+  page.on('console', msg => console.log(msg.text()));
+  const pageloadTxnPromise = waitForTransaction('react-router-6', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  const navigationTxnPromise = waitForTransaction('react-router-6', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto(`/`);
+  await pageloadTxnPromise;
+
+  const linkElement = page.locator('id=navigation');
+
+  const [_, navigationTxn] = await Promise.all([linkElement.click(), navigationTxnPromise]);
+
+  expect(navigationTxn).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'navigation',
+        origin: 'auto.navigation.react.reactrouter_v6',
+      },
+    },
+    transaction: '/user/:id',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});