feat(e2e): Migrate react-router-7-lazy-routes to use Spotlight correctly

Instead of using Playwright's webServer to spawn Spotlight (which runs
in a separate process and can't share the event buffer), tests now call
startSpotlight() directly in beforeAll hooks.

This way:
- Test process spawns Spotlight via `spotlight run -f json`
- Spotlight auto-runs the app and streams events to stdout
- Test process parses stdout and populates the event buffer
- waitForSpotlightTransaction() works because it's in the same process

Changes:
- playwright.config.mjs: Empty webServer (Spotlight handles app startup)
- src/index.tsx: Use Spotlight DSN workaround instead of tunnel
- tests/*.ts: Add beforeAll/afterAll for Spotlight lifecycle
- Deleted start-event-proxy.mjs (no longer needed)

Author: BYK

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/playwright.config.mjs

@@ -1,7 +1,13 @@
 import { getPlaywrightConfig } from '@sentry-internal/test-utils';
 
-const config = getPlaywrightConfig({
-  startCommand: `pnpm start`,
-});
+// No webServer needed - Spotlight spawns the app via `spotlight run`
+// Tests call startSpotlight() directly in beforeAll hooks
+const config = getPlaywrightConfig(
+  {},
+  {
+    // Override webServer to empty - Spotlight handles app startup
+    webServer: [],
+  },
+);
 
 export default config;

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -55,9 +55,11 @@ function getRuntimeConfig(): { lazyRouteTimeout?: number; idleTimeout?: number }
 
 const runtimeConfig = getRuntimeConfig();
 
+// Use Spotlight DSN workaround - sends events directly to Spotlight sidecar
+// Port 8969 is Spotlight's default port
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
-  dsn: process.env.REACT_APP_E2E_TEST_DSN,
+  dsn: 'http://spotlight@localhost:8969/0',
   integrations: [
     Sentry.reactRouterV7BrowserTracingIntegration({
       useEffect: React.useEffect,
@@ -75,8 +77,6 @@ Sentry.init({
   // for finer control
   tracesSampleRate: 1.0,
   release: 'e2e-test',
-
-  tunnel: 'http://localhost:3031',
 });
 
 const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter);

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/start-event-proxy.mjs

@@ -1,8 +1,30 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import {
+  startSpotlight,
+  waitForSpotlightTransaction,
+  clearSpotlightEventBuffer,
+} from '@sentry-internal/test-utils';
+import * as path from 'path';
+
+let spotlight: Awaited<ReturnType<typeof startSpotlight>>;
+
+test.beforeAll(async () => {
+  spotlight = await startSpotlight({
+    cwd: path.resolve(__dirname, '..'),
+    debug: !!process.env.DEBUG,
+  });
+});
+
+test.afterAll(() => {
+  spotlight?.stop();
+});
+
+test.beforeEach(() => {
+  clearSpotlightEventBuffer();
+});
 
 test('lazyRouteTimeout: Routes load within timeout window', async ({ page }) => {
-  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+  const transactionPromise = waitForSpotlightTransaction(async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
       transactionEvent.contexts?.trace?.op === 'navigation' &&
@@ -27,7 +49,7 @@ test('lazyRouteTimeout: Routes load within timeout window', async ({ page }) =>
 });
 
 test('lazyRouteTimeout: Infinity timeout always waits for routes', async ({ page }) => {
-  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+  const transactionPromise = waitForSpotlightTransaction(async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
       transactionEvent.contexts?.trace?.op === 'navigation' &&
@@ -51,7 +73,7 @@ test('lazyRouteTimeout: Infinity timeout always waits for routes', async ({ page
 });
 
 test('idleTimeout: Captures all activity with increased timeout', async ({ page }) => {
-  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+  const transactionPromise = waitForSpotlightTransaction(async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
       transactionEvent.contexts?.trace?.op === 'navigation' &&
@@ -79,7 +101,7 @@ test('idleTimeout: Captures all activity with increased timeout', async ({ page
 });
 
 test('idleTimeout: Finishes prematurely with low timeout', async ({ page }) => {
-  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+  const transactionPromise = waitForSpotlightTransaction(async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
       transactionEvent.contexts?.trace?.op === 'navigation' &&
@@ -107,7 +129,7 @@ test('idleTimeout: Finishes prematurely with low timeout', async ({ page }) => {
 });
 
 test('idleTimeout: Pageload on deeply nested route', async ({ page }) => {
-  const pageloadPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+  const pageloadPromise = waitForSpotlightTransaction(async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
       transactionEvent.contexts?.trace?.op === 'pageload' &&