Skip to content

Feat/add error boundaries#118

Open
santinoo1919 wants to merge 2 commits intodarkresearch:mainfrom
santinoo1919:feat/add-error-boundaries
Open

Feat/add error boundaries#118
santinoo1919 wants to merge 2 commits intodarkresearch:mainfrom
santinoo1919:feat/add-error-boundaries

Conversation

@santinoo1919
Copy link
Copy Markdown

Description

Implements React error boundaries across the application to prevent complete app crashes when components throw errors. This addresses issue #112 by adding graceful error handling at multiple levels.

Changes:

  • Added react-error-boundary dependency for robust error boundary implementation
  • Created ErrorFallback component with branded UI matching app design (#FFEFE3 background, Satoshi fonts)
  • Implemented root-level error boundary in app/_layout.tsx to catch app-wide errors
  • Added screen-level error boundaries to isolate failures in:
    • Chat screen (app/(main)/chat.tsx)
    • Wallet screen (app/(main)/wallet.tsx)
    • Chat history screen (app/(main)/chat-history.tsx)
  • Implemented proper error recovery with resetKeys and state management for mobile web compatibility
  • Removed temporary test component (ErrorBoundaryTest)

Error Recovery:

  • "Try Again" button resets the error boundary and remounts the component tree
  • Proper state cleanup using resetKeys to force full remount on error recovery
  • Error boundaries reset correctly on both desktop and mobile web

Type of Change

  • New feature (non-breaking change which adds functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Release (version bump)

Release

Is this a release? No

Testing

Manual Testing:

  • ✅ Tested error boundary on root level by throwing errors in various components
  • ✅ Verified error boundaries isolate failures at screen level (chat, wallet, chat-history)
  • ✅ Confirmed "Try Again" button works correctly on desktop web
  • ✅ Confirmed "Try Again" button works correctly on mobile web (iPhone 12 simulator)
  • ✅ Verified error fallback UI matches app design system
  • ✅ Tested error recovery flow with proper state reset

Error Scenarios Tested:

  • Component render errors
  • Async operation failures
  • Navigation errors
  • State management errors

Platforms Tested:

  • Desktop web (Chrome, Safari)
  • Mobile web (iPhone 12 simulator)

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • If releasing, I have verified the version number is correct and follows semantic versioning

Related Issue

Closes #112

Additional Notes

  • Uses react-error-boundary library following React best practices
  • Error boundaries are implemented at strategic levels to balance isolation and user experience
  • Error fallback UI is consistent with app branding and provides clear recovery options
  • Mobile web compatibility ensured through proper state management and remounting strategies

- Add root-level error boundary in _layout.tsx
- Add screen-level error boundaries to chat, wallet, and chat-history screens
- Create ErrorFallback component for consistent error UI
- Remove temporary ErrorBoundaryTest component
- Ensure error boundaries reset properly on mobile web
@santinoo1919 santinoo1919 marked this pull request as ready for review January 22, 2026 14:11
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 React Error Boundaries to Prevent App Crashes

2 participants