AOSSIE-Org / AOSSIE-Org/EduAid

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

オープン
#491 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
JavaScript
スター
171
フォーク
425
PR マージ指標
30日以内にマージされた PR はありません

説明

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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。