[Enhancement: ] Implement Centralized Error Boundary and Toast Notification System

[rishabh0510rishabh]

1. Problem Statement

The application currently lacks a unified strategy for handling runtime errors and providing feedback to users during asynchronous operations (e.g., API calls, form submissions). Relying on disparate console.log statements or native browser alert() calls results in a disjointed user experience and makes debugging production issues difficult. Furthermore, unhandled errors in specific components can cause the entire application to unmount (white screen of death).

2. Current Behavior / Limitation

• Runtime Crashes: If a generic component throws an error, the entire React component tree crashes, leaving the user with a blank screen.
• Inconsistent Feedback: User feedback is currently handled via scattered console.log outputs or blocking window.alert popups.
• Lack of Visibility: Silent failures in background processes leave the user unaware that an action (like saving data) has failed.

3. Expected Improvement

• Resilience: Introduction of an Error Boundary to catch JavaScript errors in the component tree, logging those errors, and displaying a fallback UI instead of crashing the whole app.
• User Feedback: Implementation of a non-intrusive Toast Notification system (via a custom hook) to provide consistent success, error, and warning messages.
• Maintainability: Centralized logic for error handling and notifications, making the codebase easier to manage.

4. Proposed Approach

High-Level Technical Steps

1. Dependencies:

   • (Optional) Install a lightweight toast library (e.g., react-toastify or react-hot-toast) to handle the UI animations, or implement a custom Context-based solution if external dependencies are discouraged.

2. Create Error Boundary Component (src/components/common/ErrorBoundary.jsx):

   • Implement a React Class Component using static getDerivedStateFromError and componentDidCatch.
   • Design a user-friendly "Something went wrong" fallback UI.

3. Create Notification Hook (src/hooks/useNotification.js):

   • Create a wrapper hook that exposes methods like notifySuccess(msg), notifyError(msg), and notifyInfo(msg).
   • Ensure this abstracts the underlying library/logic so it can be easily swapped later.

4. Integration (src/App.js):

   • Wrap the main application content within the <ErrorBoundary>.
   • If using a Toast Context/Provider, wrap the application at the root level alongside the Error Boundary.

Labels: ECWoC26

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊