Reactガイドを読んでいくその38

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

Error Boundary

error boundary とは

React 16で追加された概念でUIの一部にJavaScriptのエラーがあってもアプリ全体が壊れないようにするために使う。

error boundaryは子コンポーネントで発生したJavaScriptエラーをキャッチしてエラーを記録。
フォールバック用のUIを表示する。

error boundary がキャッチできないエラー:  ・イベントハンドラ(詳細)  ・非同期コード(例:setTimeout や requestAnimationFrame のコールバック)  ・サーバーサイドレンダリング   (子コンポーネントではなく)error boundary 自身がスローしたエラー

error boundaryにしたい場合はクラスコンポーネントにstatic getDerivedStateFromError() か componentDidCatch() の定義をするとなる。
 ・getDerivedStateFromError():エラーがスローされた後にフォールバックUIを
                レンダーする時に使う
 ・componentDidCatch():エラー情報をログに記録するために使う

error boundaryはJavaScriptのcatch{}のように動作する。
クラスコンポーネントだけがerror boundaryになれる。

今日はここまで。