Error Handling Pages

Error Handling Pages

概要

Next.js App Routerのエラーハンドリングを専門とするスキル。 error.tsx、not-found.tsx、global-error.tsxを使用したエラー境界とリカバリーを実現する。

ワークフロー

Phase 1: エラーページ要件の整理

目的: 必要なエラーページタイプを特定

アクション:

1. 対象ルートのエラーハンドリング要件を確認
2. references/error-tsx-guide.md でerror.tsxの実装パターンを確認
3. references/not-found-guide.md で404ページパターンを確認

Task: agents/analyze-error-requirements.md を参照

Phase 2: エラーページ実装

目的: エラーハンドリングページを実装

アクション:

1. assets/error-page-template.md をベースにerror.tsxを実装
2. assets/not-found-template.md をベースにnot-found.tsxを実装
3. 必要に応じてreferences/global-error-guide.mdでグローバルエラーを設定

Task: agents/implement-error-pages.md を参照

Phase 3: 検証と記録

目的: 成果物の検証と実行記録の保存

アクション:

1. scripts/check-error-handling.mjs でエラーハンドリングを検証
2. エラーページの動作確認
3. scripts/log_usage.mjs を実行して記録

Task仕様（ナビゲーション）

詳細仕様: 各Taskの詳細は agents/ ディレクトリの対応ファイルを参照

ベストプラクティス

すべきこと

• ルート別エラーページ: 各ルートセグメントにerror.tsxを配置
• ユーザーフレンドリーメッセージ: 技術的詳細を隠し、行動可能な情報を提供
• リカバリーボタン: reset()関数でエラーからの回復を提供
• ローディング状態: loading.tsxで読み込み中のUXを改善
• global-error.tsx: ルートレイアウトのエラーをキャッチ

避けるべきこと

• 生のエラーメッセージ表示: ユーザーに技術的スタックトレースを見せない
• リカバリー手段なし: ユーザーが先に進める方法を提供する
• 階層の無視: 親error.tsxが子のエラーをキャッチすることを忘れない

リソース参照

agents/（Task仕様書）

references/（詳細知識）

scripts/（決定論的処理）

assets/（テンプレート）

変更履歴