fix(dev-overlay): surface attribute-only hydration mismatches as Cons…

[MaxtuneLee]

Problem

Fixes #2705

React 19 reports an attribute-only hydration mismatch through console.error only. vinext's dev overlay listened to onCaughtError/onUncaughtError, window error/unhandledrejection events, and Vite HMR errors, but not console.error, so this case surfaced nothing in the overlay.

What changed

• Wired onRecoverableError (devOnRecoverableError) for the first time, so recoverable hydration mismatches (text/element-tree) surface as Recoverable Error instead of falling through to the window error listener and getting mislabeled as Unhandled Script Error.
• Patched console.error, only messages matching React's attribute-only hydration regex (isAttributeOnlyHydrationWarningMessage in dev-console-error.ts) open the overlay, as a new console-error source labeled Console Error. Every other console.error call is left exactly as before.
• Added structural duplicate detection to the overlay store (dev-error-overlay-store.ts's reportToOverlay / isSameReportedError): two reports only count as the same failure when message, stack, and React's owner stack (captureOwnerStack(), captured synchronously at report time) all match. This replaces an earlier text-plus-1s-window dedup approach, and this will still keep the same attribute warning from two different components (identical message text) from collapsing into one entry.
• Wired the console.error patch into both routers through the shared installDevErrorOverlay() installer: App Router via app-browser-entry.ts, Pages Router via pages-dev-hydration.ts / pages-client-entry.ts.

Correspondence with Next.js

• devOnRecoverableError mirrors client/react-client-callbacks/on-recoverable-error.ts's onRecoverableError.
• The dedup is ported directly from next-devtools/dev-overlay/shared.ts and stitched-error.ts; vinext stores the owner stack as a plain string field instead of a WeakMap<Error, string> since the overlay store never retains the raw Error object.

Testing

• Unit: tests/dev-console-error.test.ts, tests/app-browser-entry.test.ts, all green.
• E2E: tests/e2e/app-router/dev-error-overlay.spec.ts and new tests/e2e/pages-router/dev-overlay-hydration.spec.ts, against new fixtures (tests/fixtures/app-basic/app/dev-overlay-hydration/*, tests/fixtures/pages-basic/pages/dev-overlay-hydration.tsx) reproducing the attribute-only mismatch. All green.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vinext/cloudflare@2706

npm i https://pkg.pr.new/create-vinext-app@2706

npm i https://pkg.pr.new/@vinext/types@2706

npm i https://pkg.pr.new/vinext@2706

commit: 434d4e5

[github-actions]

Performance benchmarks

Compared 434d4e5 against base 05eee9f using alternating same-runner rounds. Next.js was unchanged and skipped.

0 improved · 0 regressed · 6 within ±1.5%

Scenario	Framework	Baseline	Current	Change
Client bundle size (gzip)	vinext	132.4 KB	132.4 KB	⚫ -0.0%
Client entry size (gzip)	vinext	119.7 KB	119.7 KB	⚫ -0.0%
Dev server cold start	vinext	2.78 s	2.77 s	⚫ -0.4%
Production build time	vinext	3.08 s	3.05 s	⚫ -1.0%
RSC entry closure size (gzip)	vinext	103.3 KB	103.3 KB	⚫ -0.0%
Server bundle size (gzip)	vinext	177.8 KB	177.8 KB	⚫ -0.0%

View detailed results and traces

_{🟢 improvement · 🔴 regression · ⚫ change below 1.5% · paired base/head}