feat(ui): add global ErrorBoundary with navigation-aware auto-reset#1171
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a reusable UI-level React ErrorBoundary to replace “white screen” render crashes with a recovery screen, and wires it into both the app root and route wrappers to improve resilience during navigation and auth/viewer flows.
Changes:
- Introduces
ui/leafwiki-ui/src/components/ErrorBoundary.tsxwith reload + in-app recovery actions and an optionalresetKeyfor auto-reset. - Wraps
RouterProviderat the app root with the newErrorBoundary. - Wraps auth + read-only router wrappers with
ErrorBoundary resetKey={pathname}to reset on route changes.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/leafwiki-ui/src/layout/AppLayout.tsx | Minor formatting change in the layout module. |
| ui/leafwiki-ui/src/features/router/RouterReadOnlyWrapper.tsx | Wraps read-only routes with ErrorBoundary and navigation-based reset. |
| ui/leafwiki-ui/src/features/router/RouterAuthWrapper.tsx | Wraps auth routes with ErrorBoundary (outside RequireAuth) and navigation-based reset. |
| ui/leafwiki-ui/src/components/ErrorBoundary.tsx | New global error boundary UI with reload/recover actions and optional reset key. |
| ui/leafwiki-ui/src/App.tsx | Wraps the router suspense tree with the new ErrorBoundary. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Replaces unhandled React render crashes (white screen) with a user-facing error screen offering reload and soft recovery. The boundary auto-resets on navigation via a resetKey prop tied to pathname — users are not stuck on the error screen when moving to a different page. Placed at two levels: - App root: catches failures outside the router (e.g. RouterProvider crash) - Route wrappers (auth + read-only): catches per-page render errors; sits outside RequireAuth so auth errors are also covered Fixes: error.stack already contains the message on V8, so the details panel no longer renders it twice.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces unhandled React render crashes (white screen) with a user-facing error screen offering reload and soft recovery. The boundary auto-resets on navigation via a resetKey prop tied to pathname — users are not stuck on the error screen when moving to a different page.
Placed at two levels:
Fixes: error.stack already contains the message on V8, so the details panel no longer renders it twice.