test(tanstackstart-react): Add failing E2E tests for early client init

Reproduces #21088: errors thrown in the client entry before hydration
are silently lost because Sentry.init() runs inside getRouter() which
is called during hydration. The test also verifies that early console
breadcrumbs are attached to the error report.

These tests are expected to fail with the current setup and pass once
Sentry.init() is moved to the client entry point.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: nicohrubec

dev-packages/e2e-tests/test-applications/tanstackstart-react-cloudflare/src/client.tsx

@@ -0,0 +1,18 @@
+import { StartClient } from '@tanstack/react-start/client';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+console.log('early-breadcrumb-from-client-entry');
+
+if (window.location.pathname === '/crash-before-hydration') {
+  throw new Error('Client Entry Crash');
+}
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <StartClient />
+    </StrictMode>,
+  );
+});

dev-packages/e2e-tests/test-applications/tanstackstart-react-cloudflare/src/routes/crash-before-hydration.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/crash-before-hydration')({
+  component: CrashPage,
+});
+
+function CrashPage() {
+  return (
+    <div>
+      <p>This page crashes in client.tsx before hydration</p>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/tanstackstart-react-cloudflare/tests/early-init.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('should capture errors thrown in client entry before hydration', async ({ page }) => {
+  const errorEventPromise = waitForError('tanstackstart-react-cloudflare', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Client Entry Crash';
+  });
+
+  await page.goto('/crash-before-hydration');
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Client Entry Crash',
+  });
+
+  const consoleBreadcrumbs = errorEvent.breadcrumbs?.filter(
+    b => b.category === 'console' && b.message?.includes('early-breadcrumb-from-client-entry'),
+  );
+
+  expect(consoleBreadcrumbs?.length).toBeGreaterThanOrEqual(1);
+});

dev-packages/e2e-tests/test-applications/tanstackstart-react/src/client.tsx

@@ -0,0 +1,18 @@
+import { StartClient } from '@tanstack/react-start/client';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+console.log('early-breadcrumb-from-client-entry');
+
+if (window.location.pathname === '/crash-before-hydration') {
+  throw new Error('Client Entry Crash');
+}
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <StartClient />
+    </StrictMode>,
+  );
+});

dev-packages/e2e-tests/test-applications/tanstackstart-react/src/routes/crash-before-hydration.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/crash-before-hydration')({
+  component: CrashPage,
+});
+
+function CrashPage() {
+  return (
+    <div>
+      <p>This page crashes in client.tsx before hydration</p>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/early-init.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+const usesManagedTunnelRoute =
+  (process.env.E2E_TEST_TUNNEL_ROUTE_MODE ?? 'off') !== 'off' || process.env.E2E_TEST_CUSTOM_TUNNEL_ROUTE === '1';
+
+test.skip(usesManagedTunnelRoute, 'Default e2e suites run only in the proxy variant');
+
+test('should capture errors thrown in client entry before hydration', async ({ page }) => {
+  const errorEventPromise = waitForError('tanstackstart-react', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Client Entry Crash';
+  });
+
+  await page.goto('/crash-before-hydration');
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Client Entry Crash',
+  });
+
+  const consoleBreadcrumbs = errorEvent.breadcrumbs?.filter(
+    b => b.category === 'console' && b.message?.includes('early-breadcrumb-from-client-entry'),
+  );
+
+  expect(consoleBreadcrumbs?.length).toBeGreaterThanOrEqual(1);
+});