基礎編 STEP 5
考える 手を動かす

API のエラーを設計する

失敗時の挙動だけを切り出した PR として、API エラーを JSON と HTTP ステータスで返す段階。

カリキュラムスタート
この STEP について詳しく見る

この STEP で作るもの

  • API エラーが JSON で返る共通ハンドリング
  • フロントが扱えるエラーレスポンス

PR 目安

正常系を触りすぎず、エラーレスポンスの統一に絞る。

例: feature/phase3-step5-api-error-contract

できるようになること

  • どこで何を catch してどう返すかを整理できる
  • 小さい改善 PR で品質を上げる感覚をつかめる

章一覧 (4)

目安時間 合計 70 分
  1. 1
    📄

    Hono のエラーハンドリング

    try-catch・カスタムエラークラス・グローバルエラーハンドラ・HTTP ステータスコードの使い分けを、Hono ミドルウェアで実装するパターン

    未着手 考える
  2. 2
    🎯

    Hono の onError で共通エラー形に寄せる

    各ルートの try-catch を廃し、app.onError でエラーを JSON 共通形式に整形する実装パターン

    未着手 25 分 手を動かす
  3. 3
    🚨

    フロントで API エラーを表示する

    fetch ラッパで API エラーを例外に変換し、React でインラインメッセージ/再試行ボタンとして表示する

    未着手 25 分 手を動かす
  4. 4
    🧨

    異常系を手動で再現して画面を確認する

    API を落としたり 500 を強制したりして、フロントのエラーハンドリング UI を目視で検証するチェックリスト

    未着手 20 分 手を動かす