Implement Global Error Boundary Issue #348

[Ndanusa]

Description

This PR addresses issue #348 by implementing a Global Error Boundary for the frontend React application.

Changes Included

• Created GlobalErrorBoundary.tsx: A standard React class-based error boundary that implements getDerivedStateFromError and componentDidCatch.
• Updated main.tsx: Wrapped the root application component <App /> within <GlobalErrorBoundary> to ensure all rendering errors in the application tree are caught.
• Aesthetic Integration: Styled the fallback UI using tailwind according to the institutional dark mode aesthetic of the project. Added a simple error display block that lets users safely reload the dashboard.

Acceptance Criteria

• Implementation completed according to project standards.
• Code is properly documented and commented.
• Passes CI pipeline (linting, tests, build verified locally).
• Styling aligns with the institutional dark mode aesthetic.

Testing Setup

To verify the error boundary:

1. Intentionally throw an error in any child component of the dashboard.
2. The UI should fallback to the global error page displaying the error message with an option to reload the application.

Related Issues

Closes #348

[drips-wave]

@Ndanusa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[Ceejaytech25]

LGTM!