Reactガイドを読んでいくその39
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
Error Boundary
コンポーネントのスタックトレース
React16からレンダー中に起こった全エラーをコンソールに出力する。
エラーメッセージとJavaScriptのスタックに加えて、コンポーネントのスタックトレースも提供する。
それによって、コンポーネントツリーのどこでエラーが発生したのかが正確に理解することができる。
コンポーネントスタックとレースにはファイル名と行番号も出力できる。
Create React Appを利用してアプリを作成していれば自動で有効になっているが、利用していない場合はプラグインを手動で追加して設定に追加する必要がある。
この機能は開発専門の機能で、本番環境では無効化しなければならない。
try/catch について
try/catchは命令型のみで動作する。
>try {
> showButton();
> } catch (error) {
> // ...
> }
error boundaryはReactの宣言型の性質を保持しつつ、動作をする。
たとえばメソッド内のどこであっても、最も近い場所にあるerror boundaryでメッセージを表示する。
イベントハンドラについて
イベントハンドラ内で発生したエラーはerror boundaryではキャッチできない
そもそモイベントハンドラで発生したエラー回復にerror boundaryは不要で、レンダーメソッドやライフサイクルメソッドのようにレンダー中に実行されない。
よって、イベントハンドラ内でエラーが発生しても、Reactが画面に表示する内容は変わらない
イベントハンドラ内のエラーをキャッチする必要がある場合は、JavaScript同様try/catchを使う。
React 15 からの命名の変更
React15でerror boundaryを使っていた場合
(限定的なサポートで15にもあったので利用者がいたかもしれないという想定)
React15時点ではunstable_handleErrorと定義されていたが、利用不可となっているのでcomponentDidCatchに変更する必要がある。
自動的に移行できるようにするためにcodemodが提供されている
npx react-codemod error-boundaries <path>
今日はここまで。
