AOSSIE-Org / AOSSIE-Org/EduAid

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

Abierto
#491 3 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement
Lenguaje dominante
JavaScript
Estrellas
171
Forks
425
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### 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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.