Implement Global Error Boundary and Centralized Error Handling System

[RutviShah2]

Team 149

Description

This PR introduces a centralized and scalable client-side error handling architecture to improve application stability and resilience.

It implements Global and Route-Level React Error Boundaries, structured async error handling patterns, and a standardized logging strategy.

With this implementation, runtime errors no longer crash the entire application. Instead, users are presented with a clean, user-friendly fallback UI, while errors are logged in a structured format for debugging and future monitoring integrations.

---

Related Issue

closes #122

---

Type of Change

• New feature (non-breaking change which adds functionality)
• Improvement (stability & architecture enhancement)

---

Changes Made

Global Error Boundary Implementation

• Created a reusable ErrorBoundary component.
• Wrapped the root application to prevent full app crashes.
• Catches rendering and lifecycle errors in child components.
• Displays a fallback UI instead of breaking the entire UI tree.
• Added reset/retry functionality to recover from failures.

---

Route-Level Error Isolation

• Wrapped major route sections individually with Error Boundaries.
• Ensures one route failure does not affect other routes.
• Enables granular fault isolation and better modular architecture.

---

User-Friendly Fallback UI

• Designed a professional, clean fallback component.

• Displays non-technical error message to users.

• Avoids exposing stack traces in production.

• Includes:

  • Retry button (resets boundary state)
  • Reload page option

• Styled consistently with application theme.

---

Structured Async Error Handling

Since React Error Boundaries do not catch async errors, the following were implemented:

• Introduced try/catch handling for API calls and async logic.
• Created reusable useErrorHandler hook.
• Implemented centralized handleAsyncError utility function.
• Ensures consistent error propagation and logging.

---

Frontend Logging Strategy

Implemented structured logging system:

• Logs include:

  • message
  • componentStack
  • timestamp
  • route

• Logs printed in structured console format.

• Optional localStorage storage for debugging persistence.

• Designed to allow seamless future backend monitoring integration.

---

Screenshots (if applicable)

Visual documentation provided in walkthrough.

---

Testing

• Tested runtime rendering errors
• Simulated async API failures
• Verified route isolation behavior
• Tested retry/reset functionality
• No unhandled promise rejections
• No blank screen crashes
• Code builds successfully

---

Checklist

• My code follows the project's code style guidelines
• I have performed a self-review of my code
• I have commented my code where necessary
• My changes generate no new warnings
• I have tested my changes thoroughly
• All TypeScript types are properly defined
• No unsafe any usage introduced
• Architecture remains scalable and modular
• I have read and followed the CONTRIBUTING.md guidelines

---

Additional Notes

• Implementation is fully frontend-based.
• No backend dependency introduced.
• Architecture is future-ready for integration with monitoring tools (e.g., Sentry).
• Enhances production-grade reliability and user experience.

[krishnapaljadeja]

✅ PR Validation Passed

Hey @RutviShah2! Your PR looks good. Here is what we found:

Field	Value
Team Number	Team 149
Linked Issue	closes #122

A maintainer will review your PR within 24–48 hours. Stay responsive to feedback!

GDG CHARUSAT Open Source Contri Sprintathon

[RutviShah2]

@aaleya5
All the conflicts have been solved.
Kindly check it.

[aaleya5]

hey @RutviShah2 your code isnt up to date with the latest main.
perform git checkout main and git pull origin main before committing.

[RutviShah2]

@aaleya5
Please see it is running

[aaleya5]

hey @RutviShah2 take a pull from main and update your branch.
your work is out of date wrt the current main

[RutviShah2]

@aaleya5
we had pull the latest code from main and our branch is up-to date.

Now our issue was to add error handling in this all cases
Trigger a runtime error: Manually introduce a bug (e.g., throw new Error("Test error") in a component) and confirm the ErrorBoundary UI appears.
Simulate API errors: Disconnect your backend or change an API endpoint to return 401, 403, 404, or 500. Check the console for correct error logs and that 401 redirects to /login.
Check development mode: In development, ensure error messages are shown in the ErrorBoundary UI.
Review logs: Open the browser console and confirm error messages are logged as expected.

so we have tested this error handling also and it holds all error when this cases occur .This is the prooof of the error handling we have added .

now we had made Proper flow when error occurs .
now check our code is pushed fully .

now after testing errors .we have also removed it and make code working .

And the screenshot which you added is also solved of duplicate import issue in dashboard.tsx.

please review it

[aaleya5]

hey @RutviShah2 good work.
can you please remove the useauth error so that i can merge this pr?

[RutviShah2]

@aaleya5 Removed useAuth error.Please review it.

[krishnapaljadeja]

🎉 PR Merged — Points Awarded!

Congratulations @RutviShah2! Your contribution has been merged.

Field	Value
Repo	Code_duel_frontend
Team	Team 149
Contributor	@RutviShah2
Level	Level 2 — Intermediate
Points Awarded	20 pts
Source	Linked Issue #122

The central leaderboard has been updated. Keep contributing!

GDG CHARUSAT Open Source Contri Sprintathon