AOSSIE-Org / AOSSIE-Org/EduAid

[FEATURE]: Add reusable React Error Boundaries in eduaid_web to prevent full-app crashes

Ouverte
#491 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
enhancement
Langage dominant
JavaScript
Étoiles
171
Forks
425
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

### Feature and its Use Cases

### Problem
`eduaid_web` currently has no React Error Boundaries. If a runtime render error occurs (e.g., malformed/null backend data), the entire app can crash to a white screen.

### Proposed Solution
Implement reusable Error Boundaries and apply them at two levels:

1. **App-level boundary**
- Wrap the app/root routes so the whole app doesn’t fully crash.

2. **Feature-level boundaries**
- Wrap major feature routes/components (quiz/output/flashcards/etc.) so one section failure is isolated.

### Implementation Plan
- Create:
- `eduaid_web/src/components/ErrorBoundary/ErrorBoundary.jsx`
- `eduaid_web/src/components/ErrorBoundary/ErrorBoundary.css`
- `ErrorBoundary` will:
- use `getDerivedStateFromError`
- use `componentDidCatch` for error logging
- render fallback UI with a **Try Again** button (reset state)
- Update `eduaid_web/src/App.jsx` to add app-level and feature-level wrappers.

### Expected Outcome
- No full white-screen crash for single-component failures.
- Better UX via fallback message + retry action.
- Better debugging via error logs.

### Related Issues / Context

This issue is related to existing frontend stability threads and is intended as an app-wide hardening step for `eduaid_web`:

- #459 — feature-level improvements including Error Boundaries in `Text_Input`
- #467 — runtime crash case when backend returns unexpected data

How this issue differs:
- This proposes a reusable, architecture-level Error Boundary pattern across `eduaid_web` (app-level + feature-level), not a single-page fix.

Non-goal:
- This issue does not change backend contracts or introduce external monitoring tools yet (Sentry/LogRocket can be follow-up).

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.