この記事で分かること
- API通信で発生するエラーの種類
- HTTPステータスコードの判定方法
fetchと XHR のエラー処理の違いtry/catchを使った例外処理- 実務でのエラー処理のベストプラクティス
API 通信では、HTTPエラー・ネットワークエラー・JSONパースエラーなど、さまざまな問題が発生します。
この記事では、fetch と XHR のエラー処理の違いから、ステータスコードの判定方法、try/catch を使った例外処理、そして実務でのベストプラクティスまで、安定した API 実装に欠かせないポイントを分かりやすく解説します。
API通信で発生するエラーの種類
API通信では、主に次の3種類のエラーが発生します。
- ① HTTPエラー（404 / 500 など）
- ② ネットワークエラー（通信失敗）
- ③ JSONパースエラー
これらを正しく処理しないと、
アプリが「固まったように見える」などの問題が起きます。
HTTPステータスコードの基本
| ステータス | 意味 |
|---|---|
| 200 | 成功 |
| 201 | 作成成功（POST） |
| 400 | リクエストエラー |
| 401 | 認証エラー |
| 404 | データが存在しない |
| 500 | サーバーエラー |
API通信では res.ok（200〜299）を基準に判定するのが一般的です。
fetch のエラー処理（重要）
fetch は「HTTPエラーでは例外にならない」という特徴があります。
例：HTTPエラーは catch に入らない
fetch("/not-found")
.then(res => {
console.log(res.ok); // false
console.log(res.status); // 404
})
.catch(err => console.error("ネットワークエラー", err));
catch に入るのは「ネットワークエラー」のみです。
fetch の正しいエラー処理（ステータスチェック）
async function loadData() {
try {
const res = await fetch("/api");
if (!res.ok) {
throw new Error("HTTPエラー: " + res.status);
}
const data = await res.json();
console.log(data);
} catch (err) {
console.error("エラー:", err);
}
}
HTTPエラーは自分で throw する必要があります。
XHR のエラー処理（fetch と違う点）
XHR は fetch と違い、
HTTPエラーでも onload が発火 します。
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api");
xhr.onload = () => {
if (xhr.status === 200) {
console.log("成功:", xhr.responseText);
} else {
console.error("HTTPエラー:", xhr.status);
}
};
xhr.onerror = () => {
console.error("ネットワークエラー");
};
xhr.send();
XHR は onerror が「ネットワークエラー専用」なのも fetch と同じです。
JSONパースエラーの対処
API が不正な JSON を返すと、
res.json() が例外を投げます。
try {
const data = await res.json();
} catch (err) {
console.error("JSONパースエラー:", err);
}
実務では API 側の不具合で起きることが多いです。
実務でのエラー処理のベストプラクティス
- ユーザーに「何が起きたか」を伝える
- 再試行ボタンを用意する
- ローディング表示を消す
- ログをサーバーに送信する
- APIのレスポンス形式を統一する
特に「ローディングが消えない」問題は UX を大きく損なうため、
エラー時の UI 制御は必須です。
API のエラー処理に関するよくある質問（FAQ）
fetch の HTTPエラーが catch に入らないのはなぜですか？
fetch は HTTPエラーを例外として扱わず、ネットワークエラーのみ catch に入るためです。
HTTPエラーを検出するにはどうすればいいですか？
res.ok や res.status をチェックし、自分で例外を投げる必要があります。
JSONパースエラーはどうやって検出しますか？
res.json() を try/catch で囲むことで検出できます。
fetch と XHR のエラー処理の違いは何ですか？
fetch は HTTPエラーを例外にしない点が最大の違いです。XHR は onerror がネットワークエラー専用です。
まとめ
API のエラー処理は、
HTTPエラー・ネットワークエラー・JSONエラー の3種類を理解することが重要です。
fetch→ HTTPエラーは例外にならない（自分でチェック）- XHR →
onerrorはネットワークエラー専用 try/catchで例外処理を統一できる- 実務では UI とログ管理が重要
API通信を扱うアプリでは、
エラー処理が品質を大きく左右します。
