test(react): Update react-create-hash-router E2E test (#12262)

Instead of just testing to send to Sentry, this now tests the actual
payloads being sent.

This kind of builds on top of
#12259, where we
specifically test the event sending now.

dev-packages/e2e-tests/test-applications/react-create-hash-router/package.json

@@ -46,6 +46,7 @@
     ]
   },
   "devDependencies": {
+    "@sentry-internal/event-proxy-server": "link:../../../event-proxy-server",
     "@playwright/test": "1.26.1",
     "serve": "14.0.1"
   },

dev-packages/e2e-tests/test-applications/react-create-hash-router/playwright.config.ts → dev-packages/e2e-tests/test-applications/react-create-hash-router/playwright.config.mjs

@@ -1,10 +1,12 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
 
+const serverPort = 3030;
+const eventProxyPort = 3031;
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const config: PlaywrightTestConfig = {
+const config = {
   testDir: './tests',
   /* Maximum time one test can run for. */
   timeout: 150_000,
@@ -32,6 +34,9 @@ const config: PlaywrightTestConfig = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://localhost:${serverPort}`,
   },
 
   /* Configure projects for major browsers */
@@ -58,13 +63,19 @@ const config: PlaywrightTestConfig = {
   ],
 
   /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'pnpm start',
-    port: 3030,
-    env: {
-      PORT: '3030',
+  webServer: [
+    {
+      command: 'node start-event-proxy.mjs',
+      port: eventProxyPort,
     },
-  },
+    {
+      command: 'pnpm start',
+      port: serverPort,
+      env: {
+        PORT: '3030',
+      },
+    },
+  ],
 };
 
 export default config;

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

@@ -32,34 +32,15 @@ Sentry.init({
   tracesSampleRate: 1.0,
   release: 'e2e-test',
 
+  tunnel: 'http://localhost:3031',
+
   // Always capture replays, so we can test this properly
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
 
   debug: true,
 });
 
-Object.defineProperty(window, 'sentryReplayId', {
-  get() {
-    return replay['_replay'].session.id;
-  },
-});
-
-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;
-});
-
 const sentryCreateHashRouter = Sentry.wrapCreateBrowserRouter(createHashRouter);
 
 const router = sentryCreateHashRouter([

dev-packages/e2e-tests/test-applications/react-create-hash-router/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-create-hash-router/start-event-proxy.mjs

@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/event-proxy-server';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'react-create-hash-router',
+});

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

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/event-proxy-server';
+
+test('Captures exception correctly', async ({ page }) => {
+  const errorEventPromise = waitForError('react-create-hash-router', 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),
+  });
+});