経緯

UI の実装で API クライアントのテストを行っていたところ、エラーが発生しました。

画面上では API の呼び出しが失敗しており、どこに問題があるのかわからない状態でした。

特に UI 側ではバリデーションエラーや通信処理の失敗が見当たらず、原因の切り分けに時間がかかりました。

発生していたエラー

ブラウザの Console や Network タブを確認すると、API のレスポンスで 500 Internal Server Error が返ってきていました。

500 エラーは、サーバー側で予期しない例外が発生している場合に返される HTTP ステータスです。

そのため、まずは UI 側ではなくサーバー側に問題がある可能性を考えました。

今回の解決方法はシンプルでした。

UI 側のコードを何度も見直しても解決しない場合は、早い段階でサーバー側のログを見ることが大切だと感じました。

今回の 500 エラーは UI 側の問題ではなく、サーバー側の API 処理が原因でした。

UI 側で問題が見つからない場合でも、HTTP ステータスコードを確認することで、どちらに問題があるのかを切り分けやすくなります。

特に 500 エラーはサーバー側の異常を示しているため、サーバー側のログを確認するのがおすすめです。

HTTP ステータスコードごとに、原因の切り分け方は異なります。

リクエストの形式やパラメータが不正な場合に発生します。

例:

認証に失敗している場合に発生します。

例:

認証はできているが、権限が不足している場合に発生します。

例:

指定した URL やリソースが存在しない場合に発生します。

例:

サーバー側で予期しないエラーが発生している状態です。

例:

500 エラーが発生したときは、まず UI 側だけで悩まず、以下の流れで確認すると原因を見つけやすいです。

UI と API のどちらが原因かを早めに切り分けることが、調査時間を短縮するポイントだと思います。