[PR #1029] [MERGED] feat(dev): React-based runtime error overlay #1033

New issue

Closed

opened 2026-05-06 13:11:39 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:11:39 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/1029
Author: @james-elicx
Created: 5/2/2026
Status: ✅ Merged
Merged: 5/3/2026
Merged by: @james-elicx

Base: main ← Head: claude/mystifying-goldberg-20355c

📝 Commits (1)

52dcf5c feat(dev): add React-based runtime error overlay

📊 Changes

21 files changed (+1380 additions, -41 deletions)

View changed files

📝 packages/vinext/src/server/app-browser-entry.ts (+65 -3)
📝 packages/vinext/src/server/app-browser-error.ts (+5 -16)
📝 packages/vinext/src/server/app-browser-navigation-controller.ts (+10 -0)
➕ packages/vinext/src/server/dev-error-overlay-store.ts (+79 -0)
➕ packages/vinext/src/server/dev-error-overlay.tsx (+703 -0)
📝 packages/vinext/src/shims/error-boundary.tsx (+84 -0)
📝 tests/app-browser-entry.test.ts (+2 -4)
➕ tests/e2e/app-router/dev-error-overlay.spec.ts (+231 -0)
📝 tests/e2e/app-router/error-interactive.spec.ts (+3 -14)
📝 tests/e2e/app-router/layout-persistence.spec.ts (+5 -1)
📝 tests/e2e/app-router/navigation-flows.spec.ts (+5 -1)
📝 tests/e2e/app-router/nextjs-compat/error-nav.spec.ts (+5 -1)
➕ tests/e2e/app-with-src/dev-overlay-recovery.spec.ts (+52 -0)
📝 tests/e2e/helpers.ts (+21 -0)
➕ tests/fixtures/app-basic/app/dev-overlay-broken/broken-client.tsx (+5 -0)
➕ tests/fixtures/app-basic/app/dev-overlay-broken/page.tsx (+13 -0)
➕ tests/fixtures/app-basic/app/dev-overlay-test/dev-overlay-triggers.tsx (+42 -0)
➕ tests/fixtures/app-basic/app/dev-overlay-test/page.tsx (+20 -0)
➕ tests/fixtures/app-with-src/src/app/dev-overlay-recovery/page.tsx (+15 -0)
➕ tests/fixtures/app-with-src/src/app/dev-overlay-recovery/throw-on-render.tsx (+5 -0)

...and 1 more files

📄 Description

Summary

Adds a React-based dev-only runtime error overlay that surfaces three error sources currently only visible in the devtools console: React render errors caught by an error.tsx boundary (onCaughtError), render errors with no boundary above them (onUncaughtError), and plain script errors / unhandled promise rejections via window listeners.
The overlay renders into a separate createRoot mounted on a detached <div> appended to body, so it survives an unmount of the main hydrateRoot(document, …) tree — necessary because most errors we want to surface take that tree down.
Includes a /dev-overlay-test fixture page and a Playwright spec covering each error source plus dismiss and prev/next pagination across multiple errors.

Test plan

PLAYWRIGHT_PROJECT=app-router npx playwright test tests/e2e/app-router/dev-error-overlay.spec.ts — 7 passing
PLAYWRIGHT_PROJECT=app-router npx playwright test tests/e2e/app-router/error-handling.spec.ts tests/e2e/app-router/error-interactive.spec.ts — 13 passing (no regression in existing error tests)
pnpm exec vp check --fix clean

🤖 Generated with Claude Code

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/1029 **Author:** [@james-elicx](https://github.com/james-elicx) **Created:** 5/2/2026 **Status:** ✅ Merged **Merged:** 5/3/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `claude/mystifying-goldberg-20355c` --- ### 📝 Commits (1) - [`52dcf5c`](https://github.com/cloudflare/vinext/commit/52dcf5c648e34345290282dd69f45b476de2a0a0) feat(dev): add React-based runtime error overlay ### 📊 Changes **21 files changed** (+1380 additions, -41 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/server/app-browser-entry.ts` (+65 -3) 📝 `packages/vinext/src/server/app-browser-error.ts` (+5 -16) 📝 `packages/vinext/src/server/app-browser-navigation-controller.ts` (+10 -0) ➕ `packages/vinext/src/server/dev-error-overlay-store.ts` (+79 -0) ➕ `packages/vinext/src/server/dev-error-overlay.tsx` (+703 -0) 📝 `packages/vinext/src/shims/error-boundary.tsx` (+84 -0) 📝 `tests/app-browser-entry.test.ts` (+2 -4) ➕ `tests/e2e/app-router/dev-error-overlay.spec.ts` (+231 -0) 📝 `tests/e2e/app-router/error-interactive.spec.ts` (+3 -14) 📝 `tests/e2e/app-router/layout-persistence.spec.ts` (+5 -1) 📝 `tests/e2e/app-router/navigation-flows.spec.ts` (+5 -1) 📝 `tests/e2e/app-router/nextjs-compat/error-nav.spec.ts` (+5 -1) ➕ `tests/e2e/app-with-src/dev-overlay-recovery.spec.ts` (+52 -0) 📝 `tests/e2e/helpers.ts` (+21 -0) ➕ `tests/fixtures/app-basic/app/dev-overlay-broken/broken-client.tsx` (+5 -0) ➕ `tests/fixtures/app-basic/app/dev-overlay-broken/page.tsx` (+13 -0) ➕ `tests/fixtures/app-basic/app/dev-overlay-test/dev-overlay-triggers.tsx` (+42 -0) ➕ `tests/fixtures/app-basic/app/dev-overlay-test/page.tsx` (+20 -0) ➕ `tests/fixtures/app-with-src/src/app/dev-overlay-recovery/page.tsx` (+15 -0) ➕ `tests/fixtures/app-with-src/src/app/dev-overlay-recovery/throw-on-render.tsx` (+5 -0) _...and 1 more files_ </details> ### 📄 Description ## Summary - Adds a React-based dev-only runtime error overlay that surfaces three error sources currently only visible in the devtools console: React render errors caught by an `error.tsx` boundary (`onCaughtError`), render errors with no boundary above them (`onUncaughtError`), and plain script errors / unhandled promise rejections via `window` listeners. - The overlay renders into a separate `createRoot` mounted on a detached `<div>` appended to `body`, so it survives an unmount of the main `hydrateRoot(document, …)` tree — necessary because most errors we want to surface take that tree down. - Includes a `/dev-overlay-test` fixture page and a Playwright spec covering each error source plus dismiss and prev/next pagination across multiple errors. ## Test plan - [x] `PLAYWRIGHT_PROJECT=app-router npx playwright test tests/e2e/app-router/dev-error-overlay.spec.ts` — 7 passing - [x] `PLAYWRIGHT_PROJECT=app-router npx playwright test tests/e2e/app-router/error-handling.spec.ts tests/e2e/app-router/error-interactive.spec.ts` — 13 passing (no regression in existing error tests) - [x] `pnpm exec vp check --fix` clean 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>