Error Boundary
error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネント
クラスコンポーネントに、ライフサイクルメソッドの static getDerivedStateFromError() か componentDidCatch() のいずれか(または両方)を定義すると、error boundary になる
つまりerror boundaryは通常クラスコンポーネントの書き方でしか定義できないが、react-error-boundaryというラッパーを使うと関数コンポーネントとして定義できる
例
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 次のレンダリングでフォールバックUIが表示されるように状態を更新する return { hasError: true }; } componentDidCatch(error, errorInfo) { // エラーをエラー報告サービスに記録する(任意) logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // 任意のカスタムフォールバックUIをレンダリングする return <h1>エラーが発生しました</h1>; } return this.props.children; } }
呼び出し方
<ErrorBoundary> <MyWidget /> </ErrorBoundary>