feat(react-19-e2e): add SENTRY_LIGHTHOUSE_MODE instrumentation

Mirrors the dynamic-import pattern from default-browser/src/index.js so the
react-19 E2E test app can serve as a third (CRA) cell in the Lighthouse
matrix alongside default-browser (webpack) and nextjs-16 (Next.js SSR).

CRA exposes only env vars prefixed REACT_APP_*, so the gate is
process.env.REACT_APP_SENTRY_LIGHTHOUSE_MODE. Three branches:

  - 'no-sentry': sync render with no Sentry import; CRA dead-code-eliminates
    the @sentry/react chunk entirely (the dynamic import in the else branch
    becomes unreachable when the env var inlines to 'no-sentry').
  - 'tracing-replay': Sentry.init + browserTracingIntegration + replayIntegration.
  - 'init-only' / unset: Sentry.init with no integrations, error handlers
    attached to createRoot (preserves the existing E2E behavior when the env
    var is unset).

The createRoot call moves inside the async IIFE in the else branch because
the onUncaughtError / onCaughtError options need the dynamically-imported
Sentry.reactErrorHandler. React handles its own scheduling so the extra
microtask before render is invisible to Playwright tests.

Author: HazAT

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

@@ -1,26 +1,58 @@
-import * as Sentry from '@sentry/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import Index from './pages/Index';
 
-Sentry.init({
-  environment: 'qa', // dynamic sampling bias to keep transactions
-  dsn: process.env.REACT_APP_E2E_TEST_DSN,
-  release: 'e2e-test',
-  tunnel: 'http://localhost:3031/', // proxy server
-});
+const lighthouseMode = process.env.REACT_APP_SENTRY_LIGHTHOUSE_MODE;
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement, {
-  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
-    console.warn(error, errorInfo);
-  }),
-  onCaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
-    console.warn(error, errorInfo);
-  }),
-});
+if (lighthouseMode === 'no-sentry') {
+  // No Sentry at all — sync render so webpack/CRA can fully dead-code-eliminate the
+  // @sentry/react import below. CRA inlines `process.env.REACT_APP_*` at build time,
+  // so this branch becomes the only one in the bundle when the env var is set.
+  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+  root.render(
+    <div>
+      <Index />
+    </div>,
+  );
+} else {
+  // Dynamic-import Sentry so it lives in a separate chunk that webpack/CRA drops
+  // entirely from the no-sentry build above. Preserves existing E2E behavior when
+  // the env var is unset (init + error handlers, no tracing/replay).
+  void (async () => {
+    const Sentry = await import('@sentry/react');
 
-root.render(
-  <div>
-    <Index />
-  </div>,
-);
+    const integrations: unknown[] = [];
+    if (lighthouseMode === 'tracing-replay') {
+      integrations.push(Sentry.browserTracingIntegration());
+      integrations.push(Sentry.replayIntegration());
+    }
+
+    Sentry.init({
+      environment: 'qa', // dynamic sampling bias to keep transactions
+      dsn: process.env.REACT_APP_E2E_TEST_DSN,
+      release: 'e2e-test',
+      tunnel: 'http://localhost:3031/', // proxy server
+      integrations: integrations as Parameters<typeof Sentry.init>[0]['integrations'],
+      tracesSampleRate: lighthouseMode === 'tracing-replay' ? 1.0 : undefined,
+      replaysSessionSampleRate: lighthouseMode === 'tracing-replay' ? 1.0 : 0,
+      replaysOnErrorSampleRate: lighthouseMode === 'tracing-replay' ? 1.0 : 0,
+    });
+
+    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement, {
+      onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
+        // oxlint-disable-next-line no-console
+        console.warn(error, errorInfo);
+      }),
+      onCaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
+        // oxlint-disable-next-line no-console
+        console.warn(error, errorInfo);
+      }),
+    });
+
+    root.render(
+      <div>
+        <Index />
+      </div>,
+    );
+  })();
+}