Learn React Error Boundaries In 7 Minutes

ジュニア開発者とより上級の開発者を分ける最大の違いの一つはエラーハンドリングの方法であり、多くのジュニア開発者はエラーハンドリングを全く考慮していない。

Reactでエラーハンドリングを行わない場合、最初のエラーが発生した瞬間にアプリケーション全体が真っ白になり、ユーザー体験が著しく悪化する。

Error Boundaryは必ずクラスコンポーネント(class component)として作成する必要があり、getDerivedStateFromErrorメソッドを活用する必要がある。

getDerivedStateFromErrorメソッドは、コンポーネントまたはその子コンポーネントでエラーが発生した際に呼び出され、エラーに基づいてコンポーネントの状態を更新できる。

Error Boundaryは個別のコンポーネントセクションを囲むだけでなく、アプリケーション全体を囲むことでグローバルなエラーハンドリングを提供することが推奨される。

componentDidCatchメソッドはgetDerivedStateFromErrorと同様にエラー発生時に呼び出されるが、状態更新ではなくサーバーへのログ送信やデータベースへの記録などの副作用処理に使用される。

componentDidCatchメソッドはエラーメッセージとコンポーネントスタックトレースを含むオブジェクトを提供し、エラーの原因となったコンポーネントを特定できる。

99%のケースでは、Error Boundaryは単純なtrue/falseの状態とフォールバックpropsを持つシンプルな実装で十分である。