error.tsx について、正しいものはどれですか。
エラーバウンダリとして配下の例外を受け止めます。Client Component である必要があります。同じ階層の layout の中には入らないため、layout の例外は受け取れません。
面接官が見ているのはエラー境界の位置関係。ここを知らないと「置いたのに拾えない」で止まる。
よくある答えと、面談でどう見られるか
- React のエラーバウンダリとして働く。同じ階層の layout は境界の外なので拾えない
ルートレイアウトのエラーは global-error.js で拾います。 - 配下で起きたエラーを、同じ階層の layout も含めてすべて拾う
同じ階層の layout と template は包みません。拾うには1つ上に置きます。 - Server Component として書く必要がある
逆で、Client Component である必要があります。 - エラーバウンダリとして働き、Client Component である必要がある
公式のサンプルにも 'use client' が付いています。
模範解答
React のエラーバウンダリとして働き、配下で投げられた例外を受け止めて代わりの UI を出します。Client Component である必要があります。
位置関係が重要です。公式によれば error.js は loading.js・not-found.js・page.js と配下の layout.js を包みますが、同じ階層の layout.js と template.js は包みません。つまり、ある階層の layout で起きたエラーを拾いたければ、1つ上の error.tsx が要ります。アプリ全体のルートレイアウトで起きたエラーには、どの error.tsx も届かないのでglobal-error.js を使います。
その手前の話として、想定内のエラーは例外にしない方が扱いやすいです。「入力が不正」「見つからない」のように起こると分かっているものは、戻り値として返して普通に画面に出します。