以下のように書いてあるので、クライアントコンポーネントで発生したエラーもキャッチできると思います。
An error file defines an error UI boundary for a route segment.
It is useful for catching unexpected errors that occur in Server Components and Client Components and displaying a fallback UI.
エラーファイルは、ルートセグメントのエラーUI境界を定義する。
サーバーコンポーネントやクライアントコンポーネントで発生した予期しないエラーをキャッチし、フォールバックUIを表示するのに便利です。
キャッチできないのは正しくコードが書けていない可能性があるかと思います。
可能であればコードを共有して頂ければ、どなたか回答できるかもしれません。
ちなみに「fetchしている最中にエラーを発生させ」とのことですが、多分fetchで叩いたAPIがエラーを返した場合は「予期しないエラー」ではなくPromise
のcatch
に落ちてくると思うので、そこで明示的にthrow new Error
等しないとerror.js
では検知できないかもしれないです。
(Next.js触ったことないので間違っていたらすいません)
例えば、以下コードはエラーになりませんが、
(コンソールに「err」文字列が表示されるだけ)
new Promise((resolve) => {
setTimeout(() => { resolve() }, 1000);
}).then(() => {
throw new Error('err');
}).catch((e) => {
console.log('err');
})
以下コードはエラーになります。
new Promise((resolve) => {
setTimeout(() => { resolve() }, 1000);
}).then(() => {
throw new Error('err');
}).catch((e) => {
throw e;
})