fix(lighthouse-ci): unblock nextjs-16 + astro-5; drop react-router-7-spa

HazAT · claude · HazAT · commit db8a4bbb7cc0 · 2026-05-12T23:38:35.000+02:00
Last CI run (b766f80) was a big step forward — 21 of 30 cells succeeded, proving the pipeline works end-to-end. Three apps still failed: 1. nextjs-16 — build-time TypeScript error: Type error: '"@sentry/nextjs"' has no exported member named 'Integration'. The previous SENTRY_LIGHTHOUSE_MODE refactor introduced const integrations: Sentry.Integration[] = [] but `@sentry/nextjs` doesn't re-export the `Integration` type. Fix by inlining a spread-based array literal in Sentry.init() so no explicit type annotation is needed. TypeScript infers integration types from the individual integration factories. 2. astro-5 — Lighthouse hit chrome-error://chromewebdata/ (CHROME_INTERSTITIAL_ERROR): The @astrojs/node adapter defaults to port 4321, not 3000. The server started fine and printed "Listening on localhost:4321" — matching our readyPattern: 'localhost' — but LHCI then navigated to http://localhost:3000/, where nothing was listening, and Chrome bounced to its error page. Fix: prefix the start command with PORT=3000 so the Astro server binds to the port Lighthouse audits. 3. react-router-7-spa — Lighthouse reported NO_FCP across all three modes: the bundle loads, no obvious error in the log, but the page never paints within the navigation timeout. Could be a 2-minute fix or a 2-hour debug — and we already have 7 frontend SDKs reporting cleanly (browser, react, vue, svelte, sveltekit, astro, nuxt, tanstack-start, nextjs). Drop it from the matrix to match the previous descope decision (angular, remix, ember, solidstart). Can be re-added once we figure out why React Router 7 SPA doesn't paint under headless Chrome with simulated throttling. Matrix shape goes from 10 apps × 3 modes (30 cells) to 9 apps × 3 modes (27 cells). Co-Authored-By: Claude claude-opus-4-5 <noreply@anthropic.com>
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16/instrumentation-client.ts
@@ -10,26 +10,6 @@ import type { Log } from '@sentry/nextjs';
 const lighthouseMode = process.env.NEXT_PUBLIC_SENTRY_LIGHTHOUSE_MODE;
 
 if (lighthouseMode !== 'no-sentry') {
-  const integrations: Sentry.Integration[] = [];
-
-  // Existing E2E behavior (unset) keeps third-party-error-filter on. We disable it in
-  // init-only and tracing-replay so those modes measure SDK overhead without app-specific
-  // integrations skewing the result.
-  if (lighthouseMode === undefined || lighthouseMode === '') {
-    integrations.push(
-      Sentry.thirdPartyErrorFilterIntegration({
-        filterKeys: ['nextjs-16-e2e'],
-        behaviour: 'apply-tag-if-contains-third-party-frames',
-      }),
-    );
-  }
-
-  // tracing-replay mode enables both performance + session replay so we can measure their
-  // combined overhead. init-only skips both.
-  if (lighthouseMode === 'tracing-replay') {
-    integrations.push(Sentry.browserTracingIntegration(), Sentry.replayIntegration());
-  }
-
   Sentry.init({
     environment: 'qa', // dynamic sampling bias to keep transactions
     dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
@@ -38,7 +18,20 @@ if (lighthouseMode !== 'no-sentry') {
     replaysSessionSampleRate: lighthouseMode === 'tracing-replay' ? 1.0 : 0,
     replaysOnErrorSampleRate: lighthouseMode === 'tracing-replay' ? 1.0 : 0,
     sendDefaultPii: true,
-    integrations,
+    // Existing E2E behavior (mode unset/'') keeps third-party-error-filter on.
+    // init-only / tracing-replay drop it so we measure SDK overhead without app-specific noise.
+    // tracing-replay additionally enables browserTracing + replay.
+    integrations: [
+      ...(lighthouseMode === undefined || lighthouseMode === ''
+        ? [
+            Sentry.thirdPartyErrorFilterIntegration({
+              filterKeys: ['nextjs-16-e2e'],
+              behaviour: 'apply-tag-if-contains-third-party-frames',
+            }),
+          ]
+        : []),
+      ...(lighthouseMode === 'tracing-replay' ? [Sentry.browserTracingIntegration(), Sentry.replayIntegration()] : []),
+    ],
     // Verify Log type is available
     beforeSendLog(log: Log) {
       return log;
diff --git a/dev-packages/lighthouse-tests/lighthouse-matrix.mjs b/dev-packages/lighthouse-tests/lighthouse-matrix.mjs
@@ -29,9 +29,11 @@
  */
 
 /** @type {AppDefinition[]} */
-// NOTE: angular, remix, ember, and solidstart were intentionally excluded from
-// this matrix — their build/serve setups need framework-specific tuning we're
-// not investing in for the MVP. They can be added back as a follow-up.
+// NOTE: angular, remix, ember, solidstart, and react-router-7-spa were
+// intentionally excluded from this matrix — their build/serve setups need
+// framework-specific tuning we're not investing in for the MVP. They can be
+// added back as a follow-up. (react-router-7-spa fails with NO_FCP in
+// Lighthouse — the bundle loads but doesn't paint within the timeout.)
 const APPS = [
   // Plain webpack apps — read process.env directly (no bundler prefix).
   { app: 'default-browser', sdk: 'browser', serve: 'static', staticDir: 'build', envVarName: 'SENTRY_LIGHTHOUSE_MODE' },
@@ -52,17 +54,12 @@ const APPS = [
     app: 'astro-5',
     sdk: 'astro',
     serve: 'server',
-    startCmd: 'node ./dist/server/entry.mjs',
+    // Astro's @astrojs/node adapter defaults to PORT=4321; force 3000 so Lighthouse can
+    // reach the server at the URL it audits (http://localhost:3000/).
+    startCmd: 'PORT=3000 node ./dist/server/entry.mjs',
     readyPattern: 'localhost',
     envVarName: 'PUBLIC_SENTRY_LIGHTHOUSE_MODE',
   },
-  {
-    app: 'react-router-7-spa',
-    sdk: 'react-router',
-    serve: 'static',
-    staticDir: 'dist',
-    envVarName: 'PUBLIC_SENTRY_LIGHTHOUSE_MODE',
-  },
 
   // Vite-based apps using the default `VITE_` prefix (no custom envPrefix set).
   {
diff --git a/dev-packages/lighthouse-tests/post-comment.mjs b/dev-packages/lighthouse-tests/post-comment.mjs
@@ -11,16 +11,16 @@ const MODES = ['no-sentry', 'init-only', 'tracing-replay'];
  * Apps and their human-readable SDK labels, matching lighthouse-matrix.mjs.
  * Order here determines row order in each table.
  */
-// Must mirror lighthouse-matrix.mjs APPS. angular, remix, ember, solidstart are
-// intentionally excluded — see note in lighthouse-matrix.mjs.
+// Must mirror lighthouse-matrix.mjs APPS. angular, remix, ember, solidstart,
+// and react-router-7-spa are intentionally excluded — see note in
+// lighthouse-matrix.mjs.
 const APPS = [
   { app: 'default-browser', sdk: 'browser' },
   { app: 'react-19', sdk: 'react' },
   { app: 'vue-3', sdk: 'vue' },
   { app: 'svelte-5', sdk: 'svelte' },
   { app: 'sveltekit-2', sdk: 'sveltekit' },
   { app: 'astro-5', sdk: 'astro' },
-  { app: 'react-router-7-spa', sdk: 'react-router' },
   { app: 'tanstackstart-react', sdk: 'tanstack-start' },
   { app: 'nextjs-16', sdk: 'nextjs' },
   { app: 'nuxt-5', sdk: 'nuxt' },
