エラーバウンダリとは何で、何をキャッチしますか?

Question

Accepted Answer

**エラーバウンダリ**は、子ツリーの**レンダリング中**にスローされた JavaScript エラーをキャッチし、アプリ全体をクラッシュさせる代わりにフォールバック UI を表示し、エラーをログに記録できるコンポーネントです。 ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## 何をキャッチし、何をキャッチしないか ✅ キャッチするもの: 配下のコンポーネントの **render** 内、**ライフサイクルメソッド**内、およびコンストラクタ内で発生したエラー。 ❌ キャッチ**しない**もの: - **イベントハンドラ**内のエラー(そこでは通常の `try/catch` を使う)。 - **非同期**コード(Promise、`setTimeout`)— これらはレンダリングフローの外にある。 - バウンダリ自身のエラー、または **SSR** 中のエラー。 ## 実務上の注意点 - エラーバウンダリは現時点では**クラスコンポーネント**でなければなりません(またはフックフレンドリーな API を提供する `react-error-boundary` ライブラリを使う)。 - ウィジェットやルートなど独立したセクションの周りに複数のバウンダリを配置し、1 つのウィジェットの失敗が全体をダウンさせないようにします。トップレベルに 1 つだけのバウンダリだと、あらゆるエラーが完全な真っ白なページに変わってしまいます。