これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
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になれる。
今日はここまで。