AOSSIE-Org / AOSSIE-Org/EduAid

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

Đang mở
#491 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
enhancement
Ngôn ngữ chính
JavaScript
Star
171
Fork
425
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.