エラーハンドリングの設計をClaudeと考える

エラーハンドリングは「動いてから考える」になりがちなテーマです。しかし、後から統一しようとすると工数が膨らみます。Claude Codeを使えば、設計段階からフロントエンド・バックエンドを通じた一貫した戦略を固めることができます。

まず現状を整理するプロンプトを投げる

最初のステップは、今のコードベースの状況をClaudeに把握させることです。ターミナルでプロジェクトルートに移動し、次のように入力してみましょう。

現在のプロジェクトのエラーハンドリングを調査して、以下をまとめてください。
- try-catchが使われている箇所
- エラーがユーザーに伝わっていない箇所
- バックエンドとフロントエンドでエラー形式が統一されているか

Claudeはコードを横断的に読み、「APIレスポンスのエラー形式が3パターン混在している」「一部のPromiseエラーが握りつぶされている」といった具体的な問題を洗い出してくれます。抽象的な質問より、調査観点を明示するほうが精度の高い回答が得られます。

※プロンプト: AIへの指示文。Claude Codeへの指示の質がそのまま出力の質に影響する。※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

共通エラー型とログ設計を一緒に作る

問題が見えたら、設計に移ります。次のようにClaudeに依頼しましょう。

バックエンド（Node.js/Express）とフロントエンド（React）で共有できる
エラー型を設計してください。以下の要件を満たしてください。
- エラーコード・メッセージ・HTTPステータスを持つ
- ログ出力に必要な情報を含む
- フロントエンドのError Boundaryで扱いやすい形式にする

Claudeが提案する型定義の例はこのようになります。

export type AppErrorCode =
  | "VALIDATION_ERROR"
  | "NOT_FOUND"
  | "UNAUTHORIZED"
  | "INTERNAL_ERROR";

export interface AppError {
  code: AppErrorCode;
  message: string;
  status: number;
  details?: Record<string, unknown>;
}

この型をmonorepoのsharedパッケージに置くか、OpenAPIのスキーマとして定義するかも、要件を伝えればClaudeが候補を出してくれます。

※スキーマ: データベースのテーブル構造や型定義のこと。

フロントエンドのError Boundaryに落とし込む

型が決まったら実装です。Reactのエラー境界をClaudeに生成させます。

import { AppError } from "@/shared/types/error";

interface State {
  error: AppError | null;
}

export class ErrorBoundary extends React.Component<
  React.PropsWithChildren,
  State
> {
  state: State = { error: null };

  static getDerivedStateFromError(error: unknown): State {
    const appError = error instanceof AppError
      ? error
      : { code: "INTERNAL_ERROR", message: "予期しないエラーが発生しました", status: 500 };
    return { error: appError };
  }

  render() {
    if (this.state.error) {
      return <ErrorFallback error={this.state.error} />;
    }
    return this.props.children;
  }
}

「ログ送信処理もcomponentDidCatchに追加して」と続けるだけで、Sentryやカスタムロガーへの連携コードも生成できます。

設計から実装まで一気通貫で進められるのが、Claude Codeを使う最大のメリットです。まずは現状調査のプロンプトから試してみてください。