Provide your own ErrorBoundary or errorElement prop on your route

[karilint]

You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

We need to implement this.

[karilint]

Coding task started for #1185:

• Implement ErrorBoundary component to catch React render errors
• Add RouterError component using useRouteError for React Router v6 data router
• Wrap RouterProvider with ErrorBoundary in main.tsx
• Add errorElement to root route in router

Branch: codex/1185-error-boundary
PR: #1186

[karilint]

Manual Test Instructions:

1. Component Render Error Test:

   • Trigger a React component render error (e.g., add throw new Error('Test error') in a component)
   • Verify user-friendly error page appears with "Something went wrong" message
   • Verify "Reload Application" button works
   • Verify error details can be expanded in development

2. Router Error Test:

   • Navigate to an invalid/non-existent route
   • Verify "Navigation Error" page appears
   • Verify "Reload Application" and "Go Back" buttons work

Root Cause:
The application had no error boundary, causing raw React errors to display to users, resulting in poor UX.

Solution:

• Added ErrorBoundary component to catch React component render errors
• Added RouterError component for React Router v6 data router errors
• Wrapped RouterProvider with ErrorBoundary in main.tsx
• Added errorElement to root route in router

Possible root causes of errors:

• Uncaught exceptions in component render methods
• Async errors in useEffect or other hooks
• Router data loading errors
• Network failures during route navigation

Implemented:

• ErrorBoundary catches component errors and displays friendly UI
• RouterError catches router-specific errors with navigation options
• Both provide reload functionality to recover from errors