Next.js App Routerにおけるエラー境界 (Error Boundaries)
ほとんどのNext.jsアプリは、すべてが順調に進んでいるときは問題なく動作します。しかし、問題が発生したときに失敗してしまいます。高品質なアプリでは、エラー境界（error boundaries）を使用して、これらの失敗を適切に処理します。
App Routerは、Pages Routerとは異なるモデルを使用しています。これはReactのエラー境界に依存しています。error.jsファイルを使用することで、ルートのどのレベルでも問題をキャッチできます。
仕組み：
• エラーは、最も近いerror.jsの境界内に留まります。
• 意図的にそうしない限り、エラーがグローバルハンドラーに移動することはありません。
• アプリの異なる部分に対して、異なるエラー画面を表示できます。
error.jsファイルのルール：
- クライアントコンポーネントである必要があります。冒頭に
'use client'を使用してください。 - そのセグメントおよびそのすべての配下（children）のエラーをキャッチします。
- 失敗したレンダリングを再試行するための
reset関数を取得できます。
ネットワークの切断などの一時的な問題にはreset関数を使用してください。永続的なエラーには使用しないでください。
ルートレイアウトにはglobal-error.jsを使用します。標準のerror.jsは、ルートのlayout.jsで発生したエラーをキャッチできません。global-error.jsは最後の手段です。これはルートレイアウトを置き換えるため、独自の<html>および<body>タグが必要になります。
異なるエラータイプの管理：
- データが見つからない場合は
notFound()を使用します。これによりnot-found.jsがトリガーされます。 - 予期しない失敗には
throw Error()を使用します。これによりerror.jsがトリガーされます。
この分離により、アプリをクリーンに保つことができます。存在しないブログ記事を探しているユーザーには404ページが表示され、データベースのクラッシュに直面しているユーザーにはエラーメッセージが表示されます。
私はこのパターンをAI画像生成器で使用しています。プロセスにはAPI呼び出しやファイルアップロードなど、多くのステップがあります。一つのステップが失敗すると、エラー境界が特定のエラーメッセージを表示します。リセットボタンを使用すれば、ユーザーはプロンプトを失うことなく再試行できます。
優れた構造の例：
• global-error.js: 最終的なセーフティネット。
• error.js: ルートレベルのエラーを処理。
• dashboard/error.js: ダッシュボード内のエラーを処理。
• auth/error.js: ログインまたはセッションのエラーを処理。
このアプローチにより、一つの小さなエラーがウェブサイト全体を壊してしまうのを防ぐことができます。