Skip to content

feat: add route-level error boundaries with retry and copyable error reference - #24

Merged
Meshmulla merged 1 commit into
stellar-kracken:mainfrom
Mona-i:feat/route-error-boundaries-retry-ref-15
Jul 16, 2026
Merged

feat: add route-level error boundaries with retry and copyable error reference#24
Meshmulla merged 1 commit into
stellar-kracken:mainfrom
Mona-i:feat/route-error-boundaries-retry-ref-15

Conversation

@Mona-i

@Mona-i Mona-i commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

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 RouteErrorBoundary so 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 a retryKey on reset so the route tree fully remounts, logs via logError() 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 in App.tsx to 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, onError callback, sibling isolation.

Modified files

  • src/App.tsx — imports withRouteErrorBoundary, aliases as routePage, and wraps every one of the ~40 top-level route elements.
  • src/components/Layout.tsx — replaces ComponentErrorBoundary around <Outlet /> with a RouteOutlet component that uses RouteErrorBoundary keyed by pathname, so the shell (nav, banners) survives a crash and error state clears on navigation.
  • src/components/ErrorBoundary/types.ts — adds RouteErrorBoundaryProps interface.
  • src/components/ErrorBoundary/index.ts — exports RouteErrorBoundary, withRouteErrorBoundary, withRouteErrorBoundaryHoc.
  • src/components/ErrorBoundary/ErrorFallback.tsx — adds copyable error reference id section (uses existing CopyButton) with data-testid attributes.
  • 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

Criterion Status
A render error in one route no longer blanks the whole app ✅ Each route wrapped with RouteErrorBoundary; GlobalErrorBoundary + Layout shell remain intact
Fallback offers a working retry ✅ "Try Again" increments retryKey to force full remount
A copyable error reference id is shown and logged ErrorFallback renders the id with CopyButton; logError() emits it to console
Boundary does not swallow errors in development componentDidCatch re-logs via console.error in DEV mode with full stack

Testing / validation

  • 511 tests pass across 48 test files
  • RouteErrorBoundary.test.tsx covers all 7 scenarios from the acceptance criteria
  • Pre-existing failure: useLiquidity.test.tsx fails with an MSW configure() conflict that exists on origin/main before this PR — unrelated to this feature
  • TypeScript strict mode — no type errors introduced

…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
@Meshmulla
Meshmulla merged commit d6162e3 into stellar-kracken:main Jul 16, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add route-level error boundaries with retry and a copyable error reference

2 participants