feat: add route-level error boundaries with retry and copyable error reference - #24
Merged
Meshmulla merged 1 commit intoJul 16, 2026
Conversation
…reference - Add RouteErrorBoundary class component that isolates render failures to a single route, preventing a crash from blanking the whole app shell - Add withRouteErrorBoundary helper (and HOC variant) to wrap route elements concisely in App.tsx - Wrap every top-level route in src/App.tsx with RouteErrorBoundary via the routePage alias, covering all ~40 routes with a context label (Route:/path) - Replace Layout's ComponentErrorBoundary around <Outlet /> with a RouteOutlet component that uses RouteErrorBoundary keyed by pathname so error state does not persist across navigation - Extend ErrorFallback to display a copyable error reference id (uses the existing CopyButton component) with data-testid attributes for tests - Extend errorReporting.ts / logError to always emit the reference id to console in both dev (grouped) and prod (structured) modes - Add RouteErrorBoundaryProps to types.ts - Export RouteErrorBoundary, withRouteErrorBoundary, withRouteErrorBoundaryHoc from the ErrorBoundary barrel index - Add RouteErrorBoundary.test.tsx with full coverage: children render, fallback UI, error logging with reference id, copyable reference, retry remount recovery, onError callback, and sibling isolation - Update ErrorFallback.test.tsx and errorReporting.test.ts to cover new behaviour Closes stellar-kracken#15
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.
Summary
Closes #15
A render error in any single route could blank the entire app with no recovery path. This PR wraps every top-level route in a dedicated
RouteErrorBoundaryso a crash stays isolated to that page, offers a remount-based retry, and surfaces a short copyable error reference id for support.Changes
New files
src/components/ErrorBoundary/RouteErrorBoundary.tsx— class component that catches render errors, shows a friendly fallback, increments aretryKeyon reset so the route tree fully remounts, logs vialogError()with reference id, and re-logs to console in dev mode so errors are not silently swallowed.src/components/ErrorBoundary/withRouteErrorBoundary.tsx— thin helper used inApp.tsxto wrap a route element:routePage(<Page />, 'Route:/path').src/components/ErrorBoundary/RouteErrorBoundary.test.tsx— full test coverage: children render, crash fallback, error log + reference id, copyable reference, retry/remount recovery,onErrorcallback, sibling isolation.Modified files
src/App.tsx— importswithRouteErrorBoundary, aliases asroutePage, and wraps every one of the ~40 top-level route elements.src/components/Layout.tsx— replacesComponentErrorBoundaryaround<Outlet />with aRouteOutletcomponent that usesRouteErrorBoundarykeyed bypathname, so the shell (nav, banners) survives a crash and error state clears on navigation.src/components/ErrorBoundary/types.ts— addsRouteErrorBoundaryPropsinterface.src/components/ErrorBoundary/index.ts— exportsRouteErrorBoundary,withRouteErrorBoundary,withRouteErrorBoundaryHoc.src/components/ErrorBoundary/ErrorFallback.tsx— adds copyable error reference id section (uses existingCopyButton) withdata-testidattributes.src/components/ErrorBoundary/errorReporting.ts— always emits reference id to console (grouped in dev, structured object in prod).src/components/ErrorBoundary/ErrorFallback.test.tsx+errorReporting.test.ts— updated to cover new behaviour.Acceptance criteria
RouteErrorBoundary;GlobalErrorBoundary+ Layout shell remain intactretryKeyto force full remountErrorFallbackrenders the id withCopyButton;logError()emits it to consolecomponentDidCatchre-logs viaconsole.errorin DEV mode with full stackTesting / validation
RouteErrorBoundary.test.tsxcovers all 7 scenarios from the acceptance criteriauseLiquidity.test.tsxfails with an MSWconfigure()conflict that exists onorigin/mainbefore this PR — unrelated to this feature