Add React Error Boundaries to Prevent App Crashes

[kennethkabogo]

Problem

The app currently has no error boundaries implemented, causing the entire application to crash to a blank white screen when any React component throws an error. This creates a poor user experience and makes the app appear completely broken.

Current Impact:

• Any uncaught error = complete app crash
• User sees blank screen with no recovery option
• No error tracking or reporting
• Poor production stability

High-risk areas without protection:

• Chat components (AI streaming, real-time updates)
• Wallet/payment operations (blockchain interactions)
• Data loading (Supabase queries, API calls)

Proposed Solution

Implement error boundaries at three levels:

1. Root level (app/_layout.tsx) - Prevent complete app crashes
2. Feature level (Chat, Wallet, Auth providers) - Isolate feature failures
3. Component level (high-risk async components) - Granular error handling

Implementation

Add dependency:
bun add react-error-boundary

Create reusable ErrorBoundary component with fallback UI and error logging.
Wrap critical areas:

• Root layout for app-wide protection
• Individual providers for feature isolation
• High-risk components for granular handling

Benefits

• Graceful error handling instead of blank screens
• Users can retry/recover from errors
• Better error tracking and debugging
• Improved production stability
• Follows React best practices (standard since React 16)

Testing

• Unit tests for error boundary behavior
• Integration tests for error recovery flows
• Manual testing of error scenarios