LoginSignup
machoce
@machoce

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Next.js(App Router)では、クライアントコンポーネントでもerror.jsのエラーをキャッチできますか?

解決したいこと

Next.js(App Router)のerror.jsについて、クライアントコンポーネントでfetchしている最中にエラーを発生させ、error.jsがエラーをキャッチされるのかを知りたい。
サーバーコンポーネントでは、キャッチされ、フォールバックが表示されるのは確認できたが、クライアントコンポーネントだとerror.jsが表示されない.

0

1Answer

以下のように書いてあるので、クライアントコンポーネントで発生したエラーもキャッチできると思います。

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がエラーを返した場合は「予期しないエラー」ではなくPromisecatchに落ちてくると思うので、そこで明示的に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;
})
0Like

Your answer might help someone💌