あるコンポーネントで例外が出たら、ページ全体が真っ白になりました。どうしますか。

error.tsx を置きます。エラーバウンダリとして配下の例外を受け止め、代わりのUIを出します。置く位置で影響範囲が変わり、ルート直下に1枚だけだと全体が差し替わります。

面接官が見ているのはerror.tsx の存在と境界の考え方。

よくある答えと、面談でどう見られるか

• Aerror.tsx を置く。置く位置で影響範囲が変わるので、壊れやすい箇所の近くに置く
  境界の位置まで意識できています。ルート直下に1枚だけだと、どこで落ちても全画面が差し替わります。
• Berror.tsx を置く
  正解です。React のエラーバウンダリとして働きます。面談ではこの後「どこに置くか」「layout のエラーは拾えるか」と続きます。
• C各コンポーネントで try-catch する
  想定内のエラーはむしろその方が扱いやすいです。ただし想定外の例外を全箇所で捕まえるのは現実的でないので、境界を置く発想は必要です。
• D例外が出ないようにコードを直す
  根本対処として正しいのですが、既知の1件を直しても次が出ます。「落ちても全画面が真っ白にならない」構造を作る話と、両方必要です。

面接官は何を見ているか

• error.tsx を置くことを挙げた
• 境界の位置で影響範囲が変わると理解している
• 想定内のエラーと想定外の例外を区別できた

模範解答

ここからどう深掘りされるか

この問いに答えられた場合、面談は次の質問に進みます。