@timber-js/app 0.2.0-alpha.146 → 0.2.0-alpha.148

package/src/cache/timber-cache.ts

@@ -1,12 +1,27 @@
 import type { CacheHandler, CacheOptions } from './index';
 import { stableStringify } from './stable-stringify';
 import { createSingleflight } from './singleflight';
+import {
+  currentInvalidationEpoch,
+  lastInvalidationEpochFor,
+  wasInvalidatedSince,
+} from './invalidation-epoch';
 import { addSpanEventSync } from '../server/tracing.js';
 import { logSwrRefetchFailed } from '../server/logger.js';
 import { getWaitUntil } from '../server/waituntil-bridge.js';
 import { fnv1aHash } from './fast-hash.js';
 
-const defaultSingleflight = createSingleflight();
+let defaultSingleflight = createSingleflight();
+
+/**
+ * Set the timeout for the module-level default singleflight.
+ * Called at framework boot with renderTimeoutMs from timber.config.ts so that
+ * cache calls without a per-call timeoutMs still get deadlock protection.
+ * See design/06-caching.md §"Singleflight Timeout — Deadlock Risk".
+ */
+export function setDefaultSingleflightTimeout(timeoutMs: number): void {
+  defaultSingleflight = createSingleflight({ timeoutMs });
+}
 
 /**
  * Generate a cache key from function identity and serialized args.
@@ -35,16 +50,59 @@ function resolveTags<Fn extends (...args: any[]) => any>(
   return opts.tags(...args);
 }
 
-let unstableIdCounter = 0;
-let hasWarnedUnstableId = false;
+/** Per-process count of byte-identical fn sources seen by deriveFallbackFnId. */
+const fallbackIdOccurrences = new Map<string, number>();
+let hasWarnedFallbackId = false;
+
+/**
+ * Derive a fallback fnId for callsites the timber-cache-transform Vite plugin
+ * could not statically detect (aliased bindings, user re-export wrappers).
+ *
+ * The base is fnv1a(fn.toString()) — deterministic across instances and cold
+ * starts of the same build, so two *different* functions can never swap fnIds
+ * by module-evaluation order (the TIM-997 poisoning scenario that the old
+ * process-local counter allowed; see TIM-1054). A per-process occurrence
+ * suffix disambiguates byte-identical duplicate sources. That residue is the
+ * one remaining hazard: closures produced by the same factory share source
+ * text but capture different values, and their occurrence order may differ
+ * across instances — such callsites need an explicit `key` option.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function deriveFallbackFnId(fn: (...args: any[]) => any): string {
+  const sourceHash = fnv1aHash(fn.toString());
+  const occurrence = fallbackIdOccurrences.get(sourceHash) ?? 0;
+  fallbackIdOccurrences.set(sourceHash, occurrence + 1);
+
+  if (!hasWarnedFallbackId && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'test') {
+    hasWarnedFallbackId = true;
+    console.warn(
+      '[timber] cache() callsite has no build-time stable ID and no explicit `key` option — ' +
+        'the call is not statically visible to the timber Vite plugin (e.g. an aliased ' +
+        'binding like `const c = cache` or a re-export wrapper module). Falling back to a ' +
+        'function-source hash for the cache key. With a shared CacheHandler (Redis/KV) this ' +
+        'is safe for distinct functions, but byte-identical closures from a factory can swap ' +
+        'cache entries across instances. Provide an explicit `key` option to make the cache ' +
+        'key contract stable and auditable.'
+    );
+  }
+
+  return `timber-cache:fn:${sourceHash}:${occurrence}`;
+}
 
 /**
  * Creates a cached wrapper around an async function.
  *
- * - SHA-256 default keys with normalized JSON args
- * - Singleflight: concurrent misses → single execution
+ * - FNV-1a default keys with normalized JSON args
+ * - Singleflight: concurrent misses → single execution AND single
+ *   handler.set — the write happens inside the coalesced callback (TIM-1028)
+ * - Writes are skipped when the key/tags were invalidated while fn was in
+ *   flight, so explicit invalidation is never silently undone (TIM-1028)
  * - SWR: serve stale immediately, background refetch
  * - Tags as string[] or function of args
+ * - The handler is resolved per invocation via `getHandler`, never captured
+ *   at wrapper-creation time — module-scope cache() wrappers created before
+ *   the framework's boot wiring calls setCacheHandler() still use the
+ *   configured handler once it arrives (TIM-1029)
  * - No ALS dependency for correctness — cache() works outside a request
  *   context. The waitUntil ALS bridge is read optionally so the SWR
  *   background refetch survives handler return on Workers/Lambda.
@@ -56,44 +114,30 @@ let hasWarnedUnstableId = false;
 export function createCache<Fn extends (...args: any[]) => Promise<any>>(
   fn: Fn,
   opts: CacheOptions<Fn>,
-  handler: CacheHandler,
+  getHandler: () => CacheHandler,
   stableId?: string
 ): Fn {
-  let fnId: string;
-  if (stableId) {
-    fnId = stableId;
-  } else if (opts.key) {
-    // Explicit key function — fnId is only used for singleflight, not for
-    // cache keys, so a counter is acceptable here.
-    fnId = `timber-cache:${unstableIdCounter++}`;
-  } else {
-    fnId = `timber-cache:unstable:${unstableIdCounter++}`;
-    if (
-      !hasWarnedUnstableId &&
-      typeof process !== 'undefined' &&
-      process.env?.NODE_ENV !== 'test'
-    ) {
-      hasWarnedUnstableId = true;
-      console.warn(
-        '[timber] cache() called without a stable ID or explicit key function. ' +
-          'Cache keys will use a process-local counter which is unstable across ' +
-          'cold starts. Run through the timber Vite plugin or provide an explicit ' +
-          '`key` option to fix this.'
-      );
-    }
-  }
-  const sf = opts.timeoutMs
-    ? createSingleflight({ timeoutMs: opts.timeoutMs })
-    : defaultSingleflight;
+  // With an explicit `key` option the fnId never reaches key generation, so
+  // no fallback derivation (or warning) is needed in that case.
+  const fnId = stableId ?? (opts.key ? undefined : deriveFallbackFnId(fn));
+
+  // Per-call timeoutMs gets a dedicated singleflight instance. Otherwise
+  // resolve defaultSingleflight per invocation (not captured at creation
+  // time) so wrappers created before boot pick up the timeout once
+  // setDefaultSingleflightTimeout is called (TIM-1032, same rationale as
+  // getCacheHandler for TIM-1029).
+  const perCallSf =
+    opts.timeoutMs !== undefined ? createSingleflight({ timeoutMs: opts.timeoutMs }) : undefined;
 
   // Cast to Fn to preserve the original function's generic call signature.
   // Without this, generic type parameters (e.g. <T> in apiFetch<T>) are
   // erased and callers lose type safety on the return type.
   return (async (...args: Parameters<Fn>): Promise<Awaited<ReturnType<Fn>>> => {
-    const key = opts.key ? opts.key(...args) : defaultKeyGenerator(fnId, args);
+    const sf = perCallSf ?? defaultSingleflight;
+    const key = opts.key ? opts.key(...args) : defaultKeyGenerator(fnId as string, args);
 
     const cacheStart = performance.now();
-    const cached = await handler.get(key);
+    const cached = await getHandler().get(key);
 
     if (cached && !cached.stale) {
       // Record as OTEL span event on enclosing span (not a child span).
@@ -105,6 +149,30 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
       return cached.value as Awaited<ReturnType<Fn>>;
     }
 
+    // From here fn() will execute (SWR refetch or miss). Scope the
+    // singleflight key by the last invalidation epoch affecting this
+    // key/tags: a caller arriving after an invalidation must not coalesce
+    // onto a flight that started before it — it would receive the
+    // pre-invalidation result the invalidation was issued to discard.
+    // NUL separator: cannot collide with user-provided key strings.
+    const tags = resolveTags(opts, args);
+    const flightKey = `${key}\u0000${lastInvalidationEpochFor(key, tags)}`;
+
+    /**
+     * Run fn and store the result — exactly once per coalesced execution,
+     * inside the singleflight callback. The write is skipped when the key or
+     * any resolved tag was invalidated after fn started: storing would
+     * resurrect just-invalidated data as fresh for the full TTL.
+     */
+    const executeAndStore = async (): Promise<Awaited<ReturnType<Fn>>> => {
+      const startEpoch = currentInvalidationEpoch();
+      const result = await fn(...args);
+      if (!wasInvalidatedSince(startEpoch, key, tags)) {
+        await getHandler().set(key, result, { ttl: opts.ttl, tags });
+      }
+      return result;
+    };
+
     if (cached && cached.stale && opts.staleWhileRevalidate) {
       // Record stale cache hit as OTEL span event (fire-and-forget).
       addSpanEventSync('timber.cache.hit', {
@@ -114,11 +182,9 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
       });
       // Serve stale immediately, trigger background refetch
       const refetch = sf
-        .do(`swr:${key}`, async () => {
+        .do(`swr:${flightKey}`, async () => {
           try {
-            const fresh = await fn(...args);
-            const tags = resolveTags(opts, args);
-            await handler.set(key, fresh, { ttl: opts.ttl, tags });
+            await executeAndStore();
           } catch (err) {
             // Failed refetch — stale entry continues to be served.
             logSwrRefetchFailed({ cacheKey: key, error: err });
@@ -137,10 +203,10 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
       return cached.value as Awaited<ReturnType<Fn>>;
     }
 
-    // Cache miss (or stale without SWR) — execute with singleflight
-    const result = await sf.do(key, () => fn(...args));
-    const tags = resolveTags(opts, args);
-    await handler.set(key, result, { ttl: opts.ttl, tags });
+    // Cache miss (or stale without SWR) — execute with singleflight.
+    // The handler.set lives inside the coalesced callback, so N concurrent
+    // misses produce exactly one write (TIM-1028).
+    const result = await sf.do(flightKey, executeAndStore);
 
     // Record cache miss as OTEL span event (fire-and-forget).
     addSpanEventSync('timber.cache.miss', {
@@ -148,16 +214,6 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
       duration_ms: Math.round(performance.now() - cacheStart),
     });
 
-    return result as Awaited<ReturnType<Fn>>;
+    return result;
   }) as unknown as Fn;
 }
-
-/**
- * Invalidate cache entries by tag or key.
- */
-createCache.invalidate = async function invalidate(
-  handler: CacheHandler,
-  opts: { key?: string; tag?: string }
-): Promise<void> {
-  await handler.invalidate(opts);
-};

package/src/cli-schema-sync.ts

@@ -36,16 +36,113 @@ function walkSegments(node: SegmentNode, segments: Set<string>): void {
   }
 }
 
+/**
+ * Replace comment bodies (and optionally string contents) with spaces,
+ * preserving length and newlines so every index maps 1:1 to the original.
+ * Lets the structural scanning below ignore `segmentParams` mentions and
+ * braces inside comments/strings without a TS parser (fine pre-alpha,
+ * see TIM-1066).
+ *
+ * With `maskStrings`, string contents are blanked too — except literal
+ * 'segmentParams' strings, kept so a quoted property key stays findable.
+ */
+function maskSource(content: string, maskStrings: boolean): string {
+  const out = content.split('');
+  const n = content.length;
+  let i = 0;
+
+  const blank = (from: number, to: number): void => {
+    for (let j = from; j < to; j++) {
+      if (content[j] !== '\n') out[j] = ' ';
+    }
+  };
+
+  while (i < n) {
+    const ch = content[i];
+    const next = content[i + 1];
+    if (ch === '/' && next === '/') {
+      const start = i;
+      while (i < n && content[i] !== '\n') i++;
+      blank(start, i);
+    } else if (ch === '/' && next === '*') {
+      const start = i;
+      i += 2;
+      while (i < n && !(content[i] === '*' && content[i + 1] === '/')) i++;
+      i = Math.min(i + 2, n);
+      blank(start, i);
+    } else if (ch === '"' || ch === "'" || ch === '`') {
+      const start = i;
+      i++;
+      while (i < n && content[i] !== ch) {
+        if (content[i] === '\\') i++;
+        i++;
+      }
+      const end = i; // at closing quote (or n if unterminated)
+      if (maskStrings && content.slice(start + 1, end) !== 'segmentParams') {
+        blank(start + 1, end);
+      }
+      i++;
+    } else {
+      i++;
+    }
+  }
+  return out.join('');
+}
+
+/**
+ * Locate the `segmentParams: { ... }` block in a schema file.
+ * Returns the indices of the opening and matching closing brace, or null
+ * if no segmentParams property is found. Comments and strings are masked
+ * first, so a JSDoc example mentioning `segmentParams: { ... }` above the
+ * real defineSchema call is not mistaken for the block, and braces inside
+ * comments/strings don't skew the depth count. The search is anchored to
+ * the `defineSchema(` call when present, so helper objects with their own
+ * segmentParams property earlier in the file are skipped.
+ */
+export function findSegmentParamsBlock(
+  content: string
+): { openBrace: number; closeBrace: number } | null {
+  const masked = maskSource(content, true);
+
+  const defineCall = /\bdefineSchema\s*\(/.exec(masked);
+  const keyRe = /(['"]?)segmentParams\1\s*:\s*\{/g;
+  keyRe.lastIndex = defineCall ? defineCall.index + defineCall[0].length : 0;
+  const keyMatch = keyRe.exec(masked);
+  if (!keyMatch) return null;
+
+  const openBrace = keyMatch.index + keyMatch[0].length - 1;
+  let depth = 1;
+  let i = openBrace + 1;
+  while (i < masked.length && depth > 0) {
+    if (masked[i] === '{') depth++;
+    else if (masked[i] === '}') depth--;
+    i++;
+  }
+  if (depth > 0) return null;
+  // i now points to just after the closing brace
+  return { openBrace, closeBrace: i - 1 };
+}
+
 /**
  * Parse existing bracket keys from an app/schema.ts file.
- * Uses regex to find keys in segmentParams: { '[key]': ... } blocks.
+ * Scoped to the segmentParams: { ... } block — bracket keys elsewhere in
+ * the file (unrelated objects, comments above defineSchema) are ignored.
+ * Comments inside the block are masked, so a commented-out entry does not
+ * count as registered.
+ *
+ * The key charset matches the route classifier (segment-classify.ts):
+ * any character except `]`, so hyphenated params like '[my-param]' parse.
  */
 export function parseExistingSchemaKeys(content: string): string[] {
+  const block = findSegmentParamsBlock(content);
+  if (!block) return [];
+
+  const blockContent = maskSource(content, false).slice(block.openBrace, block.closeBrace);
   const keys: string[] = [];
   // Match quoted bracket keys like '[artistSlug]', '[...slug]', '[[...topic]]'
-  const re = /['"](\[{1,2}(?:\.{3})?\w+\]{1,2})['"]\s*:/g;
+  const re = /['"](\[{1,2}(?:\.{3})?[^\]]+\]{1,2})['"]\s*:/g;
   let m: RegExpExecArray | null;
-  while ((m = re.exec(content)) !== null) {
+  while ((m = re.exec(blockContent)) !== null) {
     keys.push(m[1]);
   }
   return keys;
@@ -121,31 +218,14 @@ function ensureCodecImport(content: string): string {
 function appendToSchema(content: string, newSegments: string[]): string {
   content = ensureCodecImport(content);
 
-  // Find "segmentParams" key position
-  const spIndex = content.indexOf('segmentParams');
-  if (spIndex === -1) {
+  const block = findSegmentParamsBlock(content);
+  if (!block) {
     throw new Error(
       '[timber] Could not find segmentParams in schema file. ' +
         'Expected a defineSchema({ segmentParams: { ... } }) call.'
     );
   }
-
-  // Find the opening brace after segmentParams
-  const openBrace = content.indexOf('{', spIndex + 'segmentParams'.length);
-  if (openBrace === -1) {
-    throw new Error('[timber] Could not find opening brace for segmentParams.');
-  }
-
-  // Count braces to find the matching close
-  let depth = 1;
-  let i = openBrace + 1;
-  while (i < content.length && depth > 0) {
-    if (content[i] === '{') depth++;
-    else if (content[i] === '}') depth--;
-    i++;
-  }
-  // i now points to just after the closing brace
-  const closeBrace = i - 1;
+  const { openBrace, closeBrace } = block;
 
   // Detect indentation from existing entries
   const existingLine = content.slice(openBrace, closeBrace).match(/^(\s+)['"]\[/m);
@@ -168,21 +248,32 @@ function appendToSchema(content: string, newSegments: string[]): string {
 
 /**
  * Remove entries from the segmentParams block whose keys match `staleSegments`.
- * Removes the entire line including trailing comma/whitespace.
+ * Removes the entire entry including trailing comma/whitespace. Scoped to
+ * the segmentParams block — identical keys in unrelated objects elsewhere
+ * in the file are left untouched.
  */
 function removeFromSchema(content: string, staleSegments: string[]): string {
+  const block = findSegmentParamsBlock(content);
+  if (!block) return content;
+
+  let blockContent = content.slice(block.openBrace, block.closeBrace);
+  // Key matching and the entry walk run on a comment-masked copy (same
+  // length, indices align) so commented-out entries are never removed.
+  // Both copies are spliced in sync to keep indices valid.
+  let blockMasked = maskSource(blockContent, false);
+
   for (const seg of staleSegments) {
     const escaped = seg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const keyRe = new RegExp(`^[ \t]*['"]${escaped}['"][ \t]*:`, 'gm');
     let m: RegExpExecArray | null;
-    while ((m = keyRe.exec(content)) !== null) {
+    while ((m = keyRe.exec(blockMasked)) !== null) {
       const start = m.index;
       let i = m.index + m[0].length;
       let depth = 0;
       let inString: string | null = null;
 
-      while (i < content.length) {
-        const ch = content[i];
+      while (i < blockMasked.length) {
+        const ch = blockMasked[i];
         if (inString) {
           if (ch === '\\') {
             i++;
@@ -205,13 +296,15 @@ function removeFromSchema(content: string, staleSegments: string[]): string {
       }
 
       // Consume trailing newline
-      if (i < content.length && content[i] === '\n') i++;
+      if (i < blockMasked.length && blockMasked[i] === '\n') i++;
 
-      content = content.slice(0, start) + content.slice(i);
+      blockContent = blockContent.slice(0, start) + blockContent.slice(i);
+      blockMasked = blockMasked.slice(0, start) + blockMasked.slice(i);
       keyRe.lastIndex = start;
     }
   }
-  return content;
+
+  return content.slice(0, block.openBrace) + blockContent + content.slice(block.closeBrace);
 }
 
 export interface SchemaSyncResult {

package/src/cli.ts

@@ -17,6 +17,8 @@ type Command = (typeof COMMANDS)[number];
 export interface ParsedArgs {
   command: Command;
   config: string | undefined;
+  /** Positional arguments after the command (used by `timber schema sync`). */
+  rest: string[];
 }
 
 export interface CommandOptions {
@@ -26,6 +28,11 @@ export interface CommandOptions {
 /**
  * Parse CLI arguments into a structured command + options.
  * Accepts: timber <command> [--config|-c <path>]
+ *
+ * Unknown flags are an error, not silently ignored — `timber dev --port 4000`
+ * starting on the default port would contradict fail-loudly. The CLI surface
+ * is intentionally --config-only (design/11-platform.md §CLI); port selection
+ * goes through the PORT env var or server.port in vite.config.ts.
  */
 export function parseArgs(args: string[]): ParsedArgs {
   if (args.length === 0) {
@@ -40,16 +47,31 @@ export function parseArgs(args: string[]): ParsedArgs {
   }
 
   let config: string | undefined;
+  const rest: string[] = [];
   for (let i = 1; i < args.length; i++) {
-    if (args[i] === '--config' || args[i] === '-c') {
+    const arg = args[i];
+    if (arg === '--config' || arg === '-c') {
       config = args[++i];
       if (!config) {
         throw new Error('--config requires a path argument');
       }
+    } else if (arg.startsWith('-')) {
+      const portHint =
+        arg === '--port' || arg === '-p'
+          ? ' To change the port, set the PORT environment variable (PORT=4000 timber dev) ' +
+            'or server.port in vite.config.ts.'
+          : '';
+      throw new Error(
+        `Unknown option: ${arg}. The timber CLI only accepts --config <path>.${portHint}`
+      );
+    } else if (command === 'schema') {
+      rest.push(arg);
+    } else {
+      throw new Error(`Unexpected argument: ${arg}. Usage: timber ${command} [--config <path>]`);
     }
   }
 
-  return { command: command as Command, config };
+  return { command: command as Command, config, rest };
 }
 
 // ─── Command Implementations ─────────────────────────────────────────────────
@@ -105,51 +127,25 @@ export function resolvePreviewStrategy(
   return 'vite';
 }
 
-/**
- * Load timber.config.ts from the project root.
- * Returns the config object with adapter, output, etc.
- * Returns null if no config file is found.
- */
-async function loadTimberConfig(root: string): Promise<{
-  adapter?: import('./adapters/types').TimberPlatformAdapter;
-  output?: string;
-  buildDir?: string;
-} | null> {
-  const { existsSync } = await import('node:fs');
-  const { join } = await import('node:path');
-  const { pathToFileURL } = await import('node:url');
-
-  const configNames = ['timber.config.ts', 'timber.config.js', 'timber.config.mjs'];
-
-  for (const name of configNames) {
-    const configPath = join(root, name);
-    if (existsSync(configPath)) {
-      // Use Vite's built-in config loading to handle TypeScript
-      const mod = await import(pathToFileURL(configPath).href);
-      return mod.default ?? mod;
-    }
-  }
-  return null;
-}
-
 /**
  * Serve the production build for local testing.
  * If the adapter provides a preview() method, it takes priority.
  * Otherwise falls back to Vite's built-in preview server.
+ *
+ * Uses the same loadTimberConfigFile loader as dev/build — one loader,
+ * one set of module semantics. A config file that exists but fails to
+ * load throws (naming the file) instead of silently degrading to plain
+ * Vite preview. See TIM-1066.
  */
 export async function runPreview(options: CommandOptions, _deps?: ViteDeps): Promise<void> {
-  const { join, resolve } = await import('node:path');
+  const { loadTimberConfigFile, resolveBuildDir } = await import('./plugin-context.js');
 
-  // Try to load timber config for adapter-specific preview
   const root = process.cwd();
-  const config = await loadTimberConfig(root).catch(() => null);
+  const config = loadTimberConfigFile(root);
   const adapter = config?.adapter as import('./adapters/types').TimberPlatformAdapter | undefined;
 
   if (resolvePreviewStrategy(adapter) === 'adapter') {
-    // Resolve build directory: timber config > default .timber/dist
-    const buildDir = config?.buildDir
-      ? resolve(root, config.buildDir)
-      : join(root, '.timber', 'dist');
+    const buildDir = resolveBuildDir(root, config?.buildDir);
     const timberConfig = { output: (config?.output ?? 'server') as 'server' | 'static' };
     await adapter!.preview!(timberConfig, buildDir);
     return;
@@ -259,7 +255,7 @@ async function main(): Promise<void> {
       await runCheck(options);
       break;
     case 'schema':
-      await runSchema(process.argv.slice(3));
+      await runSchema(parsed.rest);
       break;
   }
 }

package/src/client/browser-entry/hmr.ts

@@ -57,17 +57,6 @@ export function setupHmr(router: RouterInstance): void {
     });
   });
 
-  // Listen for dev warnings forwarded from the server via WebSocket.
-  // See dev-warnings.ts — emitOnce() sends these via server.hot.send().
-  hot.on('timber:dev-warning', (data: unknown) => {
-    const warning = data as { level: string; message: string };
-    if (warning.level === 'error') {
-      console.error(warning.message);
-    } else {
-      console.warn(warning.message);
-    }
-  });
-
   // Listen for server console logs forwarded via WebSocket.
   // Replays them in the browser console with a [SERVER] prefix
   // so developers can see server output without switching to the terminal.

package/src/client/browser-entry/hydrate.ts

@@ -33,6 +33,44 @@ import type { TopLoaderConfig } from '../top-loader.js';
 
 import type { RscStreamResult } from './rsc-stream.js';
 
+let showHydrationError: ((error: unknown) => void) | null = null;
+let isHydrationError: ((error: unknown) => boolean) | null = null;
+let pendingHydrationErrors: unknown[] = [];
+
+// React 19 emits attribute-only hydration mismatches via console.error
+// with format substitution: console.error(fmt, link, diff). We must
+// intercept before hydrateRoot() to catch errors during initial hydration.
+const ATTR_MISMATCH_RE =
+  /A tree hydrated but some attributes of the server rendered HTML didn't match/;
+if (process.env.NODE_ENV !== 'production') {
+  const origConsoleError = console.error;
+  console.error = (...args: unknown[]) => {
+    origConsoleError.apply(console, args);
+    if (typeof args[0] === 'string' && ATTR_MISMATCH_RE.test(args[0])) {
+      const message = args
+        .slice(1)
+        .reduce<string>((s, arg) => s.replace('%s', String(arg)), args[0] as string);
+      queueOrShowHydrationError(new Error(message));
+    }
+  };
+  import('../../dev-tools/hydration-overlay.js').then((m) => {
+    showHydrationError = m.showHydrationError;
+    isHydrationError = m.isHydrationError;
+    for (const err of pendingHydrationErrors) {
+      if (m.isHydrationError(err)) m.showHydrationError(err);
+    }
+    pendingHydrationErrors = [];
+  });
+}
+
+function queueOrShowHydrationError(error: unknown): void {
+  if (showHydrationError && isHydrationError) {
+    if (isHydrationError(error)) showHydrationError(error);
+  } else {
+    pendingHydrationErrors.push(error);
+  }
+}
+
 interface HydrateOptions {
   /** RSC stream result (null if no inlined payload) */
   rscResult: RscStreamResult | null;
@@ -116,13 +154,9 @@ export function hydrateApp({ rscResult, config }: HydrateOptions): void {
       // the shell is flushed). React replays the error during hydration
       // but the server HTML is already correct — no recovery needed.
       onRecoverableError(error: unknown) {
-        // Suppress errors during page unload (refresh/navigate away).
-        // The aborted stream causes incomplete HTML which React flags
-        // as a recoverable error — but the page is being replaced.
         if (isPageUnloading()) return;
-        // Only log in dev — in production these are expected for
-        // deny() inside Suspense and streaming error boundaries.
         if (process.env.NODE_ENV === 'development') {
+          queueOrShowHydrationError(error);
           console.debug('[timber] Hydration recoverable error:', error);
         }
       },