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

これは

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

ガイドのリンク

ja.reactjs.org

Error Boundary

error boundary を配置すべき場所

配置場所は要件次第で、使う側が必要と思う場所に配置して良い。
(error boundaryは子コンポーネントで発生したエラーをハンドリングするためのもので、一つしか配置できないわけではない。)
不明なエラーを置くだけでもいいし、もっと細かな設定をしても良い。

エラーがキャッチされなかった場合の新しい動作

React 16 から、どの error boundary でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。
完全に壊れるより壊れたUIを表示しておく方がユーザ体験を損ねるという判断かららしい。
ここで例に出されているのはFacebook MessengerでUIが壊れているとご送信の原因になりかねないということらしい。
確かに誤送信をしてしまうと、内容によってはユーザ間の信用問題にもなりかねない。

上の配置すべき場所の参考にもなるけれど、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の error boundary でラップしているらしい。
UI部分の一部がクラッシュしても残り部分はインタラクティブな状態を維持できるんだとか。

明日はコンポーネントのスタックトレースです。

今日はここまで。