AOSSIE-Org / AOSSIE-Org/EduAid

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

Offen
#491 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
JavaScript
Sterne
171
Forks
425
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.