BFE.devでのAI解答例 - React クイズ
20. Error Boundary

このReactコードは、エラー発生時のエラー処理を担当する ErrorBoundary コンポーネントを使用しています。

ErrorBoundary コンポーネントは、子コンポーネントの render() メソッド内にエラーが発生した場合に、そのエラーを捕捉し、エラーメッセージを表示する役割を担っています。この例では、<A /> コンポーネントでエラーが発生し、そのエラーが <ErrorBoundary name="boundary-2"> で捕捉され、その上位の ErrorBoundary コンポーネントである <ErrorBoundary name="boundary-1"> でも捕捉され、エラーメッセージが表示されます。

また、getDerivedStateFromError() メソッドは、子コンポーネントでエラーが発生した場合に、新しい state を返すために使用されます。

このコードでは、console.log() メソッドを使用して、どの ErrorBoundary コンポーネントがエラーを捕捉したかを記録します。

最終的に、このReactコードは、エラー処理機能を実装するための実践的な例です。