UI の一部に JavaScript エラーがあってもアプリ全体が壊れてしまわないようにしたい
Reactではどうなっているのか調べたら、React 16 から“error boundary”というのが導入されていた
どういうものか調べてみた
error boundary
error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネント
error boundary は配下のツリー全体のレンダー中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチする
ただ、ドキュメントによると
クラスコンポーネントに、ライフサイクルメソッドの
static getDerivedStateFromError()かcomponentDidCatch()のいずれか（または両方）を定義すると、error boundary になる
とあり、クラスコンポーネント前提で説明がされていた
昨今、クラスコポーネントを使っていないので、関数コンポーネントで使えないかを調査したところ、同じことを考えている人がいた
記事では react-error-boundar という Error Boundary を関数コンポーネントで扱えるラッパーを紹介している
やるとしたらこれを使うことになるのだろうが実際使用しているのだろうか（あんまり記事がない）
ただ、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになるのと、問題が発生したときのユーザ体験を向上できるのはよいと思うので引き続き導入を検討する
