Implement Error Boundary and Error Handling

[NishantSinghhhhh]

Title: Add Global Error Boundaries with User-Friendly Error Pages

Problem Statement

The application currently has no error boundaries, causing the entire app to crash when errors occur. Users see blank screens or cryptic error messages with no way to recover, resulting in poor user experience.

Proposed Solution

Implement comprehensive error handling with:

• React Error Boundaries around key components
• Custom error pages (404, 500, Network Error)
• Error logging and reporting (console for demo)
• Retry mechanisms for failed API calls
• User-friendly error messages
• Error recovery actions

Acceptance Criteria

✅ Error Boundary Component

• Create ErrorBoundary component wrapping app
• Catch JavaScript errors in child components
• Display fallback UI when errors occur
• Log errors to console (expandable to error reporting service)
• Reset boundary after error recovery
• Separate boundaries for critical and non-critical sections

✅ Error Pages

• 404 Not Found page (with illustration)
• 500 Server Error page
• Network Error page (offline/timeout)
• Quiz Load Failed page
• Generic error fallback page
• Each page with "Go Home" button

✅ 404 Page Design

• Creative illustration or animation
• "Oops! Page not found" heading
• Helpful message explaining what happened
• Search bar to find content
• Links to popular pages (Home, Categories, History)
• "Report broken link" button

✅ Network Error Handling

• Detect offline status with navigator.onLine
• Show banner when connection lost
• Auto-retry failed requests when back online
• Display friendly message: "No internet connection"
• Offline indicator in header
• Cache critical data for offline access

✅ API Error Handling

• Try-catch blocks around all API calls
• Display toast notifications for errors
• Retry button for failed requests
• Exponential backoff for retries (3 attempts)
• Timeout handling (30s limit)
• Specific error messages based on status code

✅ Form Validation Errors

• Show field-level error messages
• Highlight invalid fields with red border
• Display error icon next to field
• Clear, actionable error text
• Error summary at top of form
• Scroll to first error field

✅ User Actions on Errors

• "Retry" button to attempt action again
• "Go Back" or "Return to Safety" button
• "Report this error" link (opens modal)
• "Clear cache and reload" option
• Copy error details button (for support)
• "Continue anyway" option (when safe)

✅ Error Logging

• Console.error for all errors
• Include error stack trace
• Log user context (page, action attempted)
• Timestamp for each error
• Don't log sensitive information
• Comment placeholders for future error reporting service integration

✅ Toast/Snackbar Notifications

• Error toast for non-critical errors
• Warning toast for potentially problematic actions
• Success toast for recovered errors
• Auto-dismiss after 5-7 seconds
• Action button in toast (Undo, Retry)
• Queue multiple toasts if needed

[yashraj-ghemud]

Hey sir, I would love to contribute in this issue...
Please assign me that issue.
@NishantSinghhhhh