test(tanstackstart-react): Initialize Sentry from a dedicated client init file (#21397)

Changes the setup to a dedicated init file that is imported first to
ensure that Sentry init is run first. This guarantees `Sentry.init()`
runs before any other import's side effects.

Fixes #21088

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: nicohrubec

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

@@ -1,16 +1,10 @@
-import * as Sentry from '@sentry/browser';
+// Imported first so Sentry.init() runs before any other import's side effects.
+import './instrument.client';
+import './early-side-effect';
 import { StartClient } from '@tanstack/react-start/client';
 import { StrictMode, startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
-Sentry.init({
-  environment: 'qa',
-  dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  tracesSampleRate: 1.0,
-  release: 'e2e-test',
-  tunnel: 'http://localhost:3031/',
-});
-
 console.log('early-breadcrumb-from-client-entry');
 
 if (window.location.pathname === '/crash-before-hydration') {

dev-packages/e2e-tests/test-applications/tanstackstart-react-cloudflare/src/early-side-effect.ts

@@ -0,0 +1,7 @@
+// Simulates a third-party import whose side effects run at module-evaluation time,
+// i.e. before the client entry's body (and before hydration).
+console.log('early-breadcrumb-from-imported-module');
+
+if (typeof window !== 'undefined' && window.location.pathname === '/crash-in-imported-module') {
+  throw new Error('Imported Module Side Effect Crash');
+}

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

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  environment: 'qa',
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1.0,
+  release: 'e2e-test',
+  tunnel: 'http://localhost:3031/',
+});

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

@@ -21,3 +21,24 @@ test('should capture errors thrown in client entry before hydration', async ({ p
 
   expect(consoleBreadcrumbs?.length).toBeGreaterThanOrEqual(1);
 });
+
+test('should capture errors thrown in a module imported by the client entry before hydration', async ({ page }) => {
+  const errorEventPromise = waitForError('tanstackstart-react-cloudflare', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Imported Module Side Effect Crash';
+  });
+
+  await page.goto('/crash-in-imported-module');
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Imported Module Side Effect Crash',
+  });
+
+  const consoleBreadcrumbs = errorEvent.breadcrumbs?.filter(
+    b => b.category === 'console' && b.message?.includes('early-breadcrumb-from-imported-module'),
+  );
+
+  expect(consoleBreadcrumbs?.length).toBeGreaterThanOrEqual(1);
+});

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

@@ -1,18 +1,10 @@
-import * as Sentry from '@sentry/tanstackstart-react';
+// Imported first so Sentry.init() runs before any other import's side effects.
+import './instrument.client';
+import './early-side-effect';
 import { StartClient } from '@tanstack/react-start/client';
 import { StrictMode, startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
-Sentry.init({
-  environment: 'qa', // dynamic sampling bias to keep transactions
-  dsn: __APP_DSN__,
-  // We recommend adjusting this value in production, or using tracesSampler
-  // for finer control
-  tracesSampleRate: 1.0,
-  release: 'e2e-test',
-  tunnel: __APP_TUNNEL__,
-});
-
 console.log('early-breadcrumb-from-client-entry');
 
 if (window.location.pathname === '/crash-before-hydration') {

dev-packages/e2e-tests/test-applications/tanstackstart-react/src/early-side-effect.ts

@@ -0,0 +1,7 @@
+// Simulates a third-party import whose side effects run at module-evaluation time,
+// i.e. before the client entry's body (and before hydration).
+console.log('early-breadcrumb-from-imported-module');
+
+if (typeof window !== 'undefined' && window.location.pathname === '/crash-in-imported-module') {
+  throw new Error('Imported Module Side Effect Crash');
+}

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

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/tanstackstart-react';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: __APP_DSN__,
+  tracesSampleRate: 1.0,
+  release: 'e2e-test',
+  tunnel: __APP_TUNNEL__,
+});

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

@@ -26,3 +26,24 @@ test('should capture errors thrown in client entry before hydration', async ({ p
 
   expect(consoleBreadcrumbs?.length).toBeGreaterThanOrEqual(1);
 });
+
+test('should capture errors thrown in a module imported by the client entry before hydration', async ({ page }) => {
+  const errorEventPromise = waitForError('tanstackstart-react', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Imported Module Side Effect Crash';
+  });
+
+  await page.goto('/crash-in-imported-module');
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Imported Module Side Effect Crash',
+  });
+
+  const consoleBreadcrumbs = errorEvent.breadcrumbs?.filter(
+    b => b.category === 'console' && b.message?.includes('early-breadcrumb-from-imported-module'),
+  );
+
+  expect(consoleBreadcrumbs?.length).toBeGreaterThanOrEqual(1);
+});