snappy-prerender 2.6.0 → 2.8.0

package/src/core/verify.js

@@ -1,27 +1,19 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
 import { blockThirdPartyRequests } from './blocking.js';
+import { installClock, installClockScripts } from './clock.js';
 import { DEFAULTS } from './config.js';
-import { isPageEmpty } from './page-content.js';
-import { toServerUrl } from './routes.js';
-import { mapLimit } from './scheduler.js';
+import { frameworkFromMarkers, isHydrationError } from './frameworks.js';
+import { compareContainers } from './hydration-diff.js';
+import { isHydrationAllowed, resolveHydrationPolicy } from './hydration-policy.js';
+import { localeContextOptions, localeStorageState, seedLocaleContext } from './locale-context.js';
+import { activeLocale } from './locales.js';
+import { routeToFile } from './output.js';
+import { CONTAINER_SELECTOR, readBootState } from './page-content.js';
+import { resolveRouteConfig } from './route-config.js';
+import { normaliseRoute, toServerUrl } from './routes.js';
 import { settlePage, trackNetwork } from './settle.js';
 
-const HYDRATION_PATTERNS = [
-  /hydrat/i,
-  /text content did not match/i,
-  /prop [`"].+?[`"] did not match/i,
-  /server-rendered HTML/i,
-  // React 16 and 17 phrase their mismatch warnings differently and never use the
-  // minified codes, which only exist from React 18 on.
-  /did not expect server HTML/i,
-  /expected server HTML to contain/i,
-  /react\.dev\/errors\/(418|419|421|422|423|424|425)/i,
-  /Minified React error #(418|419|421|422|423|424|425)\b/i,
-];
-
-// Containers used by the common React setups, so the probe can find the prerendered
-// subtree without configuration.
-const CONTAINER_SELECTOR = '#root, #app, #__next';
-
 /**
  * Page-side probe installed before navigation. It remembers the first prerendered
  * child of the app container, which is what lets the verifier tell hydration from a
@@ -48,19 +40,9 @@ function bootProbe() {
   });
 }
 
-/**
- * Classifies a console or page error as a React hydration failure. Exported so the
- * pattern set is testable without a browser. Patterns stay narrow on purpose: a
- * false positive fails a user's build, so unrelated 4xx React codes and generic
- * "does not match" messages are deliberately not treated as hydration errors.
- */
-export function isHydrationError(message) {
-  return HYDRATION_PATTERNS.some((pattern) => pattern.test(message));
-}
-
 /**
  * Classifies how a prerendered page booted. `hydrated` means the app adopted the
- * markup, `re-rendered` means it discarded it, `undetected` means no React root was
+ * markup, `re-rendered` means it discarded it, `undetected` means no framework root was
  * found on the container, and `unknown` means the prerendered child was never seen.
  */
 export function classifyBoot({ markupPreserved, frameworkMounted }) {
@@ -74,54 +56,132 @@ export function classifyBoot({ markupPreserved, frameworkMounted }) {
  * hydration errors plus how each route booted. This is the pass that catches markup
  * that only breaks once the app re-attaches, and apps that never attach to it at all.
  */
-export async function verifyRoutes({ browser, origin, routes, config }) {
-  const { results, errors } = await mapLimit(routes, config.concurrency, (route) =>
-    verifyRoute({ browser, origin, route, config }),
+export async function verifyRoutes({
+  browser,
+  origin,
+  routes,
+  config,
+  outputDir = null,
+  routeLocales = new Map(),
+}) {
+  const policySkipped = routes.filter((route) => resolveHydrationPolicy(config, route) === 'skip');
+  const policySkippedSet = new Set(policySkipped);
+  const toVerify = routes.filter((route) => !policySkippedSet.has(route));
+  const results = new Array(toVerify.length).fill(undefined);
+  const errors = [];
+  let cursor = 0;
+  const canReuse = config.reuseVerificationContext && !config.locales && !config.seoLocale;
+  const workerCount = Math.max(1, Math.min(config.concurrency, toVerify.length || 1));
+  await Promise.all(
+    Array.from({ length: workerCount }, async () => {
+      let sharedContext = null;
+      try {
+        if (canReuse && toVerify.length > 0) {
+          sharedContext = await createContext(browser, config, activeLocale(config.locales));
+        }
+        while (cursor < toVerify.length) {
+          const index = cursor;
+          cursor += 1;
+          const route = toVerify[index];
+          try {
+            results[index] = await verifyRoute({
+              browser,
+              origin,
+              route,
+              config: resolveRouteConfig(config, route),
+              outputDir,
+              context: sharedContext,
+              locale:
+                routeLocales.get(route)?.locale ??
+                (config.locales?.mode === 'single' ? activeLocale(config.locales) : null),
+            });
+          } catch (error) {
+            errors.push({ item: route, error });
+          }
+        }
+      } finally {
+        if (sharedContext) await sharedContext.close();
+      }
+    }),
   );
   const verified = results.filter(Boolean);
   const modes = { hydrated: 0, 're-rendered': 0, undetected: 0, unknown: 0 };
-  for (const entry of verified) modes[entry.mode] += 1;
+  const frameworks = {};
+  for (const entry of verified) {
+    modes[entry.mode] += 1;
+    const name = entry.framework ?? 'unknown';
+    frameworks[name] = (frameworks[name] ?? 0) + 1;
+  }
   return {
     routes: verified,
     modes,
+    frameworks,
+    allowed: verified.filter((entry) => entry.allowed).length,
+    allowedRerender: verified.filter((entry) => entry.allowed && entry.mode === 're-rendered')
+      .length,
+    skippedRoutes: policySkipped,
     ok: verified.every((entry) => entry.ok) && errors.length === 0,
     errors: errors.map(({ item, error }) => ({ route: item, message: error.message })),
   };
 }
 
-/**
- * Verifies one route against the same request rules as the render pass, so what is
- * verified matches what was rendered.
- */
-async function verifyRoute({ browser, origin, route, config }) {
-  const context = await browser.newContext({
+// Creates the browser context a verification worker reuses across routes.
+function createContext(browser, config, locale = null) {
+  return browser.newContext({
     viewport: config.viewport,
-    storageState: config.storageState ?? undefined,
+    storageState: localeStorageState(config, locale),
     userAgent:
       config.userAgent === DEFAULTS.userAgent ? undefined : (config.userAgent ?? undefined),
     ignoreHTTPSErrors: config.ignoreHTTPSErrors,
     reducedMotion: config.freezeAnimations ? 'reduce' : 'no-preference',
     serviceWorkers: 'block',
+    ...localeContextOptions(config, locale),
   });
-  const page = await context.newPage();
-  const hydrationErrors = [];
-  const consoleErrors = [];
-  const pageErrors = [];
-  // Hydration messages arrive through either channel, so both are classified the same way.
-  const collect = (message, target) => {
-    if (isHydrationError(message)) hydrationErrors.push(message);
-    else target.push(message);
-  };
+}
+
+/**
+ * Verifies one route against the same request rules as the render pass, so what is
+ * verified matches what was rendered. A supplied context is reused by the worker; the
+ * page is always fresh.
+ */
+async function verifyRoute({
+  browser,
+  origin,
+  route,
+  config,
+  outputDir,
+  context = null,
+  locale = null,
+}) {
+  const ownsContext = context === null;
+  const activeContext = context ?? (await createContext(browser, config, locale));
+  const page = await activeContext.newPage();
+  await installClock(page, config.fixedTime ?? null);
+  await installClockScripts(page, {
+    fixedTime: config.fixedTime ?? null,
+    randomSeed: config.randomSeed ?? null,
+  });
+  const consoleMessages = [];
+  const pageMessages = [];
   page.on('console', (message) => {
-    if (message.type() === 'error') collect(message.text(), consoleErrors);
+    if (message.type() === 'error') consoleMessages.push(message.text());
   });
-  page.on('pageerror', (error) => collect(error.message, pageErrors));
+  page.on('pageerror', (error) => pageMessages.push(error.message));
 
   const tracker = trackNetwork(page);
   try {
     if (config.blockThirdParty) {
       await blockThirdPartyRequests(page, origin, config.allowedHosts);
     }
+    await seedLocaleContext({
+      page,
+      context: activeContext,
+      origin,
+      config,
+      route,
+      locale,
+      phase: 'verify',
+    });
     await page.addInitScript(bootProbe);
     const response = await page.goto(toServerUrl(route, config.base, origin), {
       waitUntil: 'domcontentloaded',
@@ -129,34 +189,67 @@ async function verifyRoute({ browser, origin, route, config }) {
     });
     const status = response?.status() ?? null;
     await settlePage(page, config, tracker);
-    const empty = await isPageEmpty(page);
+    const { empty, statusCode, markers, markupPreserved } = await readBootState(page);
+    const notFoundRoute = config.notFoundRoute ? normaliseRoute(config.notFoundRoute) : null;
+    const isNotFoundRoute = notFoundRoute !== null && normaliseRoute(route) === notFoundRoute;
+    const notFound = statusCode === 404 || isNotFoundRoute;
 
-    const boot = await page.evaluate((selector) => {
-      const probe = window.__snappyBoot ?? {};
-      const container =
-        document.querySelector(selector) ?? document.body?.firstElementChild ?? null;
-      const frameworkMounted = container
-        ? Object.keys(container).some(
-            (key) => key.startsWith('__reactContainer') || key === '_reactRootContainer',
-          )
-        : false;
-      const child = probe.prerenderedChild ?? null;
-      return { frameworkMounted, markupPreserved: child ? child.isConnected : null };
-    }, CONTAINER_SELECTOR);
+    const detected = frameworkFromMarkers(markers, config.framework);
+    // Classify only after the framework is known, so an explicit `framework` choice and
+    // the detected framework select the matching message patterns.
+    const hydrationErrors = [];
+    const consoleErrors = [];
+    const pageErrors = [];
+    for (const message of consoleMessages) {
+      if (isHydrationError(message, detected.name ?? 'auto')) hydrationErrors.push(message);
+      else consoleErrors.push(message);
+    }
+    for (const message of pageMessages) {
+      if (isHydrationError(message, detected.name ?? 'auto')) hydrationErrors.push(message);
+      else pageErrors.push(message);
+    }
+    const mode = classifyBoot({
+      markupPreserved,
+      frameworkMounted: detected.mounted,
+    });
+    let firstMismatch = null;
+    if (outputDir && (hydrationErrors.length > 0 || mode === 're-rendered')) {
+      const liveHtml = await page.evaluate((selector) => {
+        const container = document.querySelector(selector) ?? document.body;
+        return container?.outerHTML ?? null;
+      }, CONTAINER_SELECTOR);
+      const file = path.join(outputDir, routeToFile(route, config));
+      const expectedHtml = await fs.readFile(file, 'utf8').catch(() => null);
+      if (liveHtml && expectedHtml) firstMismatch = compareContainers(expectedHtml, liveHtml);
+    }
+    const hydrationPolicy = resolveHydrationPolicy(config, route);
+    const allowed = isHydrationAllowed(hydrationPolicy, { mode, hydrationErrors });
+    const effectiveHydrationErrors = allowed ? [] : hydrationErrors;
 
     return {
       route,
       status,
+      statusCode,
+      notFound,
+      framework: detected.name,
       empty,
-      hydrationErrors,
+      hydrationErrors: effectiveHydrationErrors,
+      ignoredHydrationErrors: allowed ? hydrationErrors : [],
+      hydrationPolicy,
+      allowed,
       consoleErrors,
       pageErrors,
-      ok: hydrationErrors.length === 0 && (status === null || status < 400) && !empty,
-      mode: classifyBoot(boot),
-      markupPreserved: boot.markupPreserved,
+      ok:
+        effectiveHydrationErrors.length === 0 &&
+        (status === null || status < 400 || (isNotFoundRoute && status === 404)) &&
+        !empty,
+      mode,
+      firstMismatch,
+      markupPreserved,
     };
   } finally {
     tracker.stop();
-    await context.close();
+    await page.close();
+    if (ownsContext) await activeContext.close();
   }
 }