エラーハンドリング：HTTPステータスコード

HTTPステータスコードの分類

よく使う2xxコード

よく使う4xxコード

よく使う5xxコード

コードをユーザー向けメッセージに変換する

function userMessage(status) {
  if (status === 401) return 'Please sign in to continue.';
  if (status === 403) return "You don't have permission for that.";
  if (status === 404) return 'Not found.';
  if (status === 409) return 'Already exists.';
  if (status === 422) return 'Please check the form for errors.';
  if (status >= 500) return 'Something went wrong. Try again in a moment.';
  return 'Something unexpected happened.';
}

ネットワークエラーとサーバーエラーの違い

try {
  const res = await fetch('/api/users');
  if (!res.ok) {
    // Server replied but with error status
    throw new Error(`Server error ${res.status}`);
  }
  return res.json();
} catch (err) {
  if (err instanceof TypeError) {
    // Network failure — fetch couldn't reach server
    throw new Error('Network error. Check your connection.');
  }
  throw err;
}

5xxとネットワークエラーのリトライ処理

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const res = await fetch(url, options);
      if (res.ok || (res.status >= 400 && res.status < 500)) return res;
      // 5xx — retryable
    } catch (err) {
      if (attempt === maxRetries - 1) throw err;
    }
    await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
  }
}

4xxはリトライしない

Retry-Afterヘッダーの読み取り

const res = await fetch('/api/limited');
if (res.status === 429) {
  const after = parseInt(res.headers.get('Retry-After') || '5', 10);
  await new Promise(r => setTimeout(r, after * 1000));
  return fetch('/api/limited');
}

バリデーションエラーを表示する

// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }

if (res.status === 422) {
  const { errors } = await res.json();
  Object.entries(errors).forEach(([field, msg]) => {
    setFieldError(field, msg);
  });
}

テレメトリ：エラーをサービスに記録する

解決につながる操作を提示する

確認問題

まとめ：HTTPエラー処理