JavaScriptでのエラーハンドリングとAPI呼び出し管理の完全ガイド

API呼び出しのエラーハンドリングは、JavaScript開発において重要なスキルの一つです。APIは、外部のサービスやデータベースと通信するための手段であり、これが失敗するとアプリケーションの動作に重大な影響を与える可能性があります。適切なエラーハンドリングを実装することで、ユーザーに対してわかりやすいエラーメッセージを提供し、問題の原因を迅速に特定し、解決することができます。本記事では、JavaScriptにおけるエラーハンドリングの基本から、具体的なAPI呼び出しの管理方法、そして実践的なテクニックまでを詳しく解説します。これにより、より信頼性の高いアプリケーションを開発するための知識とスキルを習得できます。

エラーハンドリングの基礎

エラーハンドリングとは、プログラムが予期しない状況や問題に直面した際に、それに適切に対処するための技術です。JavaScriptにおいてエラーハンドリングは特に重要であり、ユーザーに対して快適な体験を提供しつつ、開発者が問題を迅速に解決できるようにするための手段です。

エラーの種類

JavaScriptで扱うエラーには主に以下のような種類があります。

シンタックスエラー

構文が正しくないために発生するエラーです。コードが実行される前に検出されます。

ランタイムエラー

コードの実行中に発生するエラーで、存在しない関数の呼び出しや、型の不一致などが原因です。

ロジックエラー

コードが意図したとおりに動作しないエラーです。エラーとして検出されないため、デバッグが難しい場合があります。

エラーハンドリングの重要性

適切なエラーハンドリングは、以下の理由から非常に重要です。

ユーザー体験の向上

エラーが発生した際にユーザーに適切なフィードバックを提供することで、混乱を避けることができます。

問題の特定と修正の容易化

エラーメッセージやログを通じて、開発者が問題の原因を迅速に特定し、修正することができます。

アプリケーションの信頼性向上

予期しないエラーに対処することで、アプリケーションの信頼性と安定性を向上させることができます。

このように、エラーハンドリングはJavaScript開発において基本かつ重要な技術であり、適切に実装することで多くのメリットを享受できます。

try-catch文の使用

JavaScriptにおけるエラーハンドリングの基本的な方法の一つがtry-catch文です。try-catch文を使用することで、エラーが発生した際にプログラムの実行を続けることができ、エラーに対する適切な対処を行うことができます。

try-catch文の基本構文

try-catch文は以下のような構文で記述します。

try {
  // 実行するコード
} catch (error) {
  // エラーが発生した場合の処理
}

例: シンプルなtry-catch文

次の例は、数値をパースする際に発生する可能性のあるエラーをハンドリングするシンプルな例です。

try {
  let number = parseInt("abc");
  console.log(number); // NaNが出力される
} catch (error) {
  console.error("数値に変換できませんでした:", error);
}

例: ネットワークリクエストのエラーハンドリング

API呼び出しの際にもtry-catch文は有効です。以下の例では、fetch関数を使用したAPI呼び出しにおけるエラーハンドリングを示しています。

try {
  let response = await fetch("https://api.example.com/data");
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  let data = await response.json();
  console.log(data);
} catch (error) {
  console.error("API呼び出しに失敗しました:", error);
}

catchブロックの詳細

catchブロックは、エラーが発生した際に実行されるコードを含みます。catchブロック内では、エラーオブジェクトが引数として渡され、エラーの詳細情報を取得することができます。

try {
  // 実行するコード
} catch (error) {
  console.error("エラーメッセージ:", error.message);
  console.error("エラースタックトレース:", error.stack);
}

finallyブロック

try-catch文にはfinallyブロックを追加することもできます。finallyブロックは、エラーの有無にかかわらず必ず実行されるコードを含みます。

try {
  // 実行するコード
} catch (error) {
  console.error("エラーが発生しました:", error);
} finally {
  console.log("このコードは必ず実行されます");
}

このように、try-catch文を適切に使用することで、JavaScriptにおけるエラーハンドリングを効果的に実装することができます。

Promiseとasync/awaitのエラーハンドリング

JavaScriptでは、非同期処理を扱うためにPromiseとasync/awaitが広く使われています。これらを用いたエラーハンドリングの方法について詳しく見ていきましょう。

Promiseのエラーハンドリング

Promiseは非同期処理を扱うためのオブジェクトで、成功時と失敗時の処理をthenメソッドとcatchメソッドで定義します。

例: Promiseでのエラーハンドリング

以下の例では、fetch関数を使ったAPI呼び出しに対してPromiseを用いたエラーハンドリングを示しています。

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("API呼び出しに失敗しました:", error);
  });

async/awaitのエラーハンドリング

async/awaitはPromiseをよりシンプルに扱うための構文です。async関数内でawaitを使うことで、非同期処理の結果を同期的に取得できます。エラーハンドリングはtry-catch文を用いて行います。

例: async/awaitでのエラーハンドリング

次の例では、async/awaitを使った非同期処理に対するエラーハンドリングを示しています。

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("API呼び出しに失敗しました:", error);
  }
}

fetchData();

async/awaitとPromiseの比較

async/awaitはPromiseをより直感的に扱えるため、可読性が向上します。以下に、同じ非同期処理をPromiseとasync/awaitで実装した場合の違いを示します。

Promiseを使った非同期処理

function fetchData() {
  fetch("https://api.example.com/data")
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error("API呼び出しに失敗しました:", error);
    });
}

fetchData();

async/awaitを使った非同期処理

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("API呼び出しに失敗しました:", error);
  }
}

fetchData();

このように、async/awaitを使用することで、非同期処理のエラーハンドリングがより簡潔で読みやすくなります。エラーの種類や発生箇所を明確にし、効率的に対処することが可能です。

API呼び出しにおける一般的なエラー

API呼び出し時には、さまざまなエラーが発生する可能性があります。これらのエラーを理解し、適切に対処することが、安定したアプリケーションを作るために重要です。ここでは、一般的なエラーの種類とその原因について解説します。

ネットワークエラー

ネットワークエラーは、クライアントとサーバー間の通信が失敗した場合に発生します。これには、ネットワーク接続の問題、DNS解決の失敗、サーバーがダウンしている場合などが含まれます。

例: ネットワークエラーのハンドリング

try {
  let response = await fetch("https://api.example.com/data");
} catch (error) {
  console.error("ネットワークエラーが発生しました:", error);
}

HTTPステータスエラー

HTTPステータスエラーは、サーバーがリクエストに対してエラーレスポンスを返す場合に発生します。代表的なステータスコードには以下のものがあります。

400 Bad Request

リクエストが無効である場合に返されます。例えば、必要なパラメータが欠けている場合などです。

401 Unauthorized

認証が必要なリソースにアクセスしようとしたが、認証に失敗した場合に返されます。

404 Not Found

リクエストしたリソースが存在しない場合に返されます。

500 Internal Server Error

サーバー内部でエラーが発生した場合に返されます。

例: HTTPステータスエラーのハンドリング

try {
  let response = await fetch("https://api.example.com/data");
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
} catch (error) {
  console.error("HTTPステータスエラーが発生しました:", error);
}

JSONパースエラー

APIからのレスポンスをJSONとしてパースする際に、フォーマットが正しくない場合やレスポンスが空の場合に発生します。

例: JSONパースエラーのハンドリング

try {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
} catch (error) {
  console.error("JSONパースエラーが発生しました:", error);
}

タイムアウトエラー

API呼び出しが一定時間内に完了しない場合に発生します。タイムアウトの設定はfetchには標準でないため、独自に実装する必要があります。

例: タイムアウトエラーのハンドリング

function fetchWithTimeout(url, options, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error("タイムアウトエラー"));
    }, timeout);

    fetch(url, options)
      .then(response => {
        clearTimeout(timer);
        resolve(response);
      })
      .catch(error => {
        clearTimeout(timer);
        reject(error);
      });
  });
}

try {
  let response = await fetchWithTimeout("https://api.example.com/data");
} catch (error) {
  console.error("API呼び出しがタイムアウトしました:", error);
}

これらの一般的なエラーを理解し、適切にハンドリングすることで、API呼び出しの信頼性と安定性を向上させることができます。

エラーハンドリング戦略

効果的なエラーハンドリング戦略を持つことは、安定したアプリケーションの開発に不可欠です。ここでは、JavaScriptにおけるエラーハンドリングのベストプラクティスと戦略について詳しく解説します。

エラーハンドリングのベストプラクティス

早期リターンを使用する

エラーが発生した場合は、早期にリターンして不要な処理を避けることが重要です。これにより、コードの読みやすさと保守性が向上します。

function processData(data) {
  if (!data) {
    console.error("データがありません");
    return;
  }
  // データ処理の続行
}

具体的なエラーメッセージを提供する

エラーメッセージは、問題の原因を迅速に特定するための重要な手がかりとなります。具体的でわかりやすいエラーメッセージを提供しましょう。

try {
  let response = await fetch("https://api.example.com/data");
  if (!response.ok) {
    throw new Error(`APIエラー: ステータスコード ${response.status}`);
  }
} catch (error) {
  console.error("API呼び出しに失敗しました:", error.message);
}

エラーログを記録する

エラーログを記録することで、後から問題の分析とデバッグを行いやすくなります。コンソールログだけでなく、サーバー側にエラーログを送信することも考慮しましょう。

function logError(error) {
  // サーバーにエラーログを送信
  fetch("/log", {
    method: "POST",
    body: JSON.stringify({ error: error.message, stack: error.stack }),
    headers: { "Content-Type": "application/json" }
  });
}

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  logError(error);
  console.error("エラーが発生しました:", error.message);
}

エラーハンドリング戦略

フェイルセーフ戦略

フェイルセーフ戦略は、エラーが発生した際にシステム全体が停止することなく、安全に動作を続けることを目的とします。たとえば、デフォルト値を使用する、部分的な機能を無効にするなどの方法があります。

function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .catch(error => {
      console.error("データの取得に失敗しました:", error.message);
      return { defaultData: true }; // デフォルト値を返す
    });
}

リトライ戦略

一時的な問題によるエラーの場合、一定回数リトライする戦略が有効です。これにより、ネットワークの一時的な不具合などに対処できます。

async function fetchDataWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      if (i < retries - 1) {
        console.warn(`リトライ中 (${i + 1}/${retries})...`);
      } else {
        console.error("全てのリトライに失敗しました:", error.message);
        throw error;
      }
    }
  }
}

try {
  let data = await fetchDataWithRetry("https://api.example.com/data");
  console.log(data);
} catch (error) {
  console.error("APIデータの取得に最終的に失敗しました:", error.message);
}

フォールバック戦略

フォールバック戦略は、主要な機能が失敗した場合に、代替の方法で機能を提供することを目的とします。たとえば、キャッシュされたデータを使用する、別のAPIエンドポイントを試すなどの方法があります。

async function fetchDataWithFallback(url, fallbackUrl) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.warn("主要なAPI呼び出しに失敗しました。フォールバックURLを試します。");
    let fallbackResponse = await fetch(fallbackUrl);
    if (!fallbackResponse.ok) {
      throw new Error(`フォールバックURLでもHTTPエラー: ${fallbackResponse.status}`);
    }
    return await fallbackResponse.json();
  }
}

try {
  let data = await fetchDataWithFallback("https://api.example.com/data", "https://api.example.com/fallback");
  console.log(data);
} catch (error) {
  console.error("データの取得に失敗しました:", error.message);
}

これらのエラーハンドリング戦略を適用することで、JavaScriptアプリケーションの信頼性とユーザー体験を大幅に向上させることができます。

エラーハンドリングの実例

具体的なAPI呼び出しに対するエラーハンドリングの実例をいくつか紹介します。これらの例は、実際の開発において役立つでしょう。

例1: シンプルなデータ取得とエラーハンドリング

この例では、基本的なAPI呼び出しとエラーハンドリングの方法を示します。

async function fetchData(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log("データ取得成功:", data);
  } catch (error) {
    console.error("データ取得に失敗しました:", error.message);
  }
}

fetchData("https://api.example.com/data");

例2: ネットワークリクエストのリトライ戦略

一時的なネットワークエラーをリトライする戦略を実装します。

async function fetchDataWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      let data = await response.json();
      console.log("データ取得成功:", data);
      return data;
    } catch (error) {
      if (i < retries - 1) {
        console.warn(`リトライ中 (${i + 1}/${retries})...`);
      } else {
        console.error("全てのリトライに失敗しました:", error.message);
        throw error;
      }
    }
  }
}

fetchDataWithRetry("https://api.example.com/data");

例3: フォールバック戦略の実装

主要なAPIが失敗した場合に、フォールバックURLを使用してデータを取得します。

async function fetchDataWithFallback(url, fallbackUrl) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log("主要なURLからデータ取得成功:", data);
    return data;
  } catch (error) {
    console.warn("主要なAPI呼び出しに失敗しました。フォールバックURLを試します。");
    try {
      let fallbackResponse = await fetch(fallbackUrl);
      if (!fallbackResponse.ok) {
        throw new Error(`フォールバックURLでもHTTPエラー: ${fallbackResponse.status}`);
      }
      let fallbackData = await fallbackResponse.json();
      console.log("フォールバックURLからデータ取得成功:", fallbackData);
      return fallbackData;
    } catch (fallbackError) {
      console.error("フォールバックURLでもデータ取得に失敗しました:", fallbackError.message);
      throw fallbackError;
    }
  }
}

fetchDataWithFallback("https://api.example.com/data", "https://api.example.com/fallback");

例4: カスタムエラーメッセージとユーザー通知

ユーザーにわかりやすいエラーメッセージを提供し、UIで通知します。

async function fetchDataAndNotifyUser(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log("データ取得成功:", data);
  } catch (error) {
    console.error("データ取得に失敗しました:", error.message);
    alert(`データ取得に失敗しました: ${error.message}`);
  }
}

fetchDataAndNotifyUser("https://api.example.com/data");

例5: エラーログをサーバーに送信

エラー発生時にエラーログをサーバーに送信します。

async function fetchDataAndLogError(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log("データ取得成功:", data);
  } catch (error) {
    console.error("データ取得に失敗しました:", error.message);
    // エラーログをサーバーに送信
    fetch("/log", {
      method: "POST",
      body: JSON.stringify({ error: error.message, stack: error.stack }),
      headers: { "Content-Type": "application/json" }
    });
  }
}

fetchDataAndLogError("https://api.example.com/data");

これらの実例を参考にすることで、さまざまな状況に対応したエラーハンドリングの実装が可能になります。エラーハンドリングの適切な実装は、アプリケーションの信頼性とユーザー体験を向上させるために非常に重要です。

エラーログの管理

エラーハンドリングの一環として、エラーログの管理は重要な役割を果たします。エラーログを適切に管理し、分析することで、問題の原因を迅速に特定し、効果的な対策を講じることができます。ここでは、エラーログの管理方法について詳しく説明します。

エラーログの記録

エラーログは、アプリケーションの動作中に発生したエラーの詳細を記録するものです。エラーログには以下の情報を含めることが推奨されます。

エラーメッセージ

エラーの内容を説明するメッセージです。

スタックトレース

エラーが発生した場所を特定するためのスタックトレース情報です。

タイムスタンプ

エラーが発生した日時です。

ユーザー情報

エラーが発生した際のユーザー情報やコンテキスト情報です。

エラーログの保存方法

エラーログは、クライアントサイドとサーバーサイドの両方で保存できます。

クライアントサイドでの保存

クライアントサイドでエラーログを保存する場合、ブラウザのローカルストレージやIndexedDBを使用することができます。ただし、大量のログを保存するには不向きです。

function logErrorToLocalStorage(error) {
  let logs = JSON.parse(localStorage.getItem("errorLogs")) || [];
  logs.push({
    message: error.message,
    stack: error.stack,
    timestamp: new Date().toISOString()
  });
  localStorage.setItem("errorLogs", JSON.stringify(logs));
}

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  logErrorToLocalStorage(error);
}

サーバーサイドでの保存

エラーログをサーバーサイドで保存する場合、ログ収集専用のエンドポイントを設置し、そこにログを送信します。これにより、ログの集中管理と分析が容易になります。

function logErrorToServer(error) {
  fetch("/log", {
    method: "POST",
    body: JSON.stringify({
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString()
    }),
    headers: { "Content-Type": "application/json" }
  });
}

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  logErrorToServer(error);
}

エラーログの分析

エラーログを適切に分析することで、問題のパターンや頻度を把握し、改善策を講じることができます。ログ分析ツールやダッシュボードを使用すると、エラーログの可視化が容易になります。

ログ分析ツールの導入

以下のようなツールを使用することで、エラーログの収集と分析が効率的に行えます。

Sentry
Loggly
ELK Stack (Elasticsearch, Logstash, Kibana)
Splunk

これらのツールは、リアルタイムでのエラーログ収集、分析、アラート設定などをサポートしています。

エラーログの可視化とアラート

エラーログを可視化することで、エラーの傾向や発生頻度を直感的に把握できます。また、特定のエラーが発生した際にアラートを設定することで、迅速に対応することが可能です。

ダッシュボードの構築

ログ分析ツールを用いてダッシュボードを構築し、エラーログをリアルタイムで監視します。これにより、重大なエラーの早期発見と対策が可能です。

アラートの設定

特定のエラーが発生した際に通知を受け取るようにアラートを設定します。これにより、重要なエラーに対して迅速に対応できます。

// Sentryを使った例
Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0" });

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  Sentry.captureException(error);
}

このように、エラーログの管理は、エラーの発生を記録し、分析し、適切な対策を講じるために不可欠です。適切なエラーログ管理を実装することで、アプリケーションの信頼性とユーザー体験を大幅に向上させることができます。

カスタムエラーメッセージの作成

ユーザーに対してわかりやすいカスタムエラーメッセージを提供することは、エラーハンドリングにおいて非常に重要です。適切なエラーメッセージは、ユーザーが問題の原因を理解し、適切に対応する手助けをします。ここでは、カスタムエラーメッセージの作成方法について解説します。

カスタムエラーメッセージの重要性

エラーメッセージが具体的でわかりやすいものであれば、ユーザーは問題を迅速に理解し、適切な対処が可能になります。反対に、漠然としたエラーメッセージはユーザーを混乱させ、信頼を失わせる可能性があります。

カスタムエラーメッセージの基本原則

具体的であること

エラーメッセージは具体的で、問題の原因や対処方法を明示するべきです。

ユーザーに優しい言葉を使う

技術的な専門用語を避け、ユーザーが理解しやすい言葉でメッセージを作成します。

アクションを提案する

ユーザーが次に取るべきアクションを明示します。例えば、「再試行してください」や「サポートに連絡してください」などです。

例: カスタムエラーメッセージの実装

以下は、API呼び出しに失敗した場合のカスタムエラーメッセージの例です。

async function fetchData(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`サーバーエラー: ステータスコード ${response.status}`);
    }
    let data = await response.json();
    console.log("データ取得成功:", data);
  } catch (error) {
    displayCustomErrorMessage(error);
  }
}

function displayCustomErrorMessage(error) {
  let userFriendlyMessage;
  if (error.message.includes("ステータスコード")) {
    userFriendlyMessage = "サーバーで問題が発生しました。しばらくしてから再試行してください。";
  } else {
    userFriendlyMessage = "データを取得できませんでした。ネットワーク接続を確認してください。";
  }
  console.error(userFriendlyMessage, error.message);
  alert(userFriendlyMessage);
}

fetchData("https://api.example.com/data");

カスタムエラーメッセージのパターン

ネットワークエラー

ネットワーク接続の問題が原因でエラーが発生した場合。

function handleNetworkError() {
  alert("ネットワークに接続できませんでした。インターネット接続を確認し、再試行してください。");
}

認証エラー

ユーザーの認証が必要なリソースにアクセスしようとしてエラーが発生した場合。

function handleAuthError() {
  alert("認証に失敗しました。再度ログインしてください。");
}

入力エラー

ユーザーの入力が無効である場合。

function handleInputError() {
  alert("入力が無効です。正しい値を入力してください。");
}

エラーメッセージのローカライズ

多言語対応が必要な場合、エラーメッセージのローカライズを行います。i18nライブラリを使用することで、さまざまな言語でのメッセージ表示が可能です。

import i18n from 'i18n-js';

i18n.translations = {
  en: { networkError: "Unable to connect to the network. Please check your internet connection and try again." },
  ja: { networkError: "ネットワークに接続できませんでした。インターネット接続を確認し、再試行してください。" }
};

function handleNetworkError() {
  alert(i18n.t('networkError'));
}

// 言語設定
i18n.locale = 'ja';

このように、ユーザーに対して具体的で理解しやすいカスタムエラーメッセージを提供することで、エラー発生時のユーザー体験を向上させることができます。カスタムエラーメッセージは、エラーハンドリングの重要な要素であり、アプリケーションの信頼性とユーザー満足度を高めるために欠かせません。

再試行メカニズム

API呼び出しが失敗した場合に再試行するメカニズムは、ネットワークの一時的な問題やサーバーの負荷に対処するために非常に有効です。再試行メカニズムを適切に実装することで、アプリケーションの信頼性とユーザー体験を向上させることができます。

再試行メカニズムの基本原則

再試行回数の設定

再試行の回数を設定し、無限ループに陥るのを防ぎます。一般的には3回程度が適切です。

指数バックオフの実装

再試行の間隔を指数関数的に増加させることで、サーバーへの負荷を軽減し、成功する可能性を高めます。

特定のエラーに対してのみ再試行

再試行が有効なエラー（ネットワークエラーや一時的なサーバーエラー）に対してのみ再試行を行います。

例: 基本的な再試行メカニズム

以下は、API呼び出しが失敗した場合に3回まで再試行するシンプルな例です。

async function fetchDataWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      let data = await response.json();
      console.log("データ取得成功:", data);
      return data;
    } catch (error) {
      if (i < retries - 1) {
        console.warn(`リトライ中 (${i + 1}/${retries})...`);
        await new Promise(res => setTimeout(res, 1000)); // 1秒待機
      } else {
        console.error("全てのリトライに失敗しました:", error.message);
        throw error;
      }
    }
  }
}

fetchDataWithRetry("https://api.example.com/data");

指数バックオフの実装

再試行の待機時間を指数関数的に増加させることで、サーバーへの負荷を軽減し、再試行の成功率を高めます。

async function fetchDataWithExponentialBackoff(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      let data = await response.json();
      console.log("データ取得成功:", data);
      return data;
    } catch (error) {
      if (i < retries - 1) {
        console.warn(`リトライ中 (${i + 1}/${retries})... 次の試行まで${delay}ms待機`);
        await new Promise(res => setTimeout(res, delay));
        delay *= 2; // 待機時間を指数関数的に増加
      } else {
        console.error("全てのリトライに失敗しました:", error.message);
        throw error;
      }
    }
  }
}

fetchDataWithExponentialBackoff("https://api.example.com/data");

特定のエラーに対する再試行

再試行が有効なエラー（例えば、ネットワークエラーや一時的なサーバーエラー）のみを再試行対象とする例です。

async function fetchDataWithSelectiveRetry(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      let data = await response.json();
      console.log("データ取得成功:", data);
      return data;
    } catch (error) {
      if (error.message.includes("NetworkError") || error.message.includes("HTTP error")) {
        if (i < retries - 1) {
          console.warn(`リトライ中 (${i + 1}/${retries})... 次の試行まで${delay}ms待機`);
          await new Promise(res => setTimeout(res, delay));
          delay *= 2; // 待機時間を指数関数的に増加
        } else {
          console.error("全てのリトライに失敗しました:", error.message);
          throw error;
        }
      } else {
        console.error("再試行対象外のエラーが発生しました:", error.message);
        throw error;
      }
    }
  }
}

fetchDataWithSelectiveRetry("https://api.example.com/data");

再試行メカニズムを実装することで、API呼び出しの成功率を高め、ユーザーに対してより信頼性の高いサービスを提供することが可能です。これらの実装例を参考に、アプリケーションの要件に応じた再試行メカニズムを構築しましょう。

練習問題

エラーハンドリングの理解を深めるために、以下の練習問題に取り組んでみましょう。これらの問題は、実際の開発シナリオを想定しており、学んだ内容を実践的に応用する機会を提供します。

問題1: 基本的なエラーハンドリング

以下のAPI呼び出しコードに対して、try-catch文を使用してエラーハンドリングを追加してください。

async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

getData();

解答例

async function getData() {
  try {
    let response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("データ取得に失敗しました:", error.message);
  }
}

getData();

問題2: 再試行メカニズムの実装

以下のコードに、再試行メカニズムを追加してください。再試行回数は3回とし、再試行間隔は1秒とします。

async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

getData();

解答例

async function getDataWithRetry(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      let data = await response.json();
      console.log(data);
      return data;
    } catch (error) {
      if (i < retries - 1) {
        console.warn(`リトライ中 (${i + 1}/${retries})... 次の試行まで${delay}ms待機`);
        await new Promise(res => setTimeout(res, delay));
      } else {
        console.error("全てのリトライに失敗しました:", error.message);
        throw error;
      }
    }
  }
}

getDataWithRetry("https://api.example.com/data");

問題3: カスタムエラーメッセージの作成

次のコードにカスタムエラーメッセージを追加し、ネットワークエラーとHTTPステータスエラーを区別してハンドリングしてください。

async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

getData();

解答例

async function getData() {
  try {
    let response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error(`サーバーエラー: ステータスコード ${response.status}`);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    if (error.message.includes("ステータスコード")) {
      console.error("サーバーで問題が発生しました。しばらくしてから再試行してください。", error.message);
    } else {
      console.error("データを取得できませんでした。ネットワーク接続を確認してください。", error.message);
    }
  }
}

getData();

問題4: エラーログのサーバー送信

以下のコードに、エラーログをサーバーに送信する機能を追加してください。エラーログは”/log”エンドポイントにPOSTリクエストとして送信します。

async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

getData();

解答例

async function getData() {
  try {
    let response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    logErrorToServer(error);
    console.error("データ取得に失敗しました:", error.message);
  }
}

function logErrorToServer(error) {
  fetch("/log", {
    method: "POST",
    body: JSON.stringify({
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString()
    }),
    headers: { "Content-Type": "application/json" }
  });
}

getData();

問題5: 再試行メカニズムとカスタムエラーメッセージの統合

次のコードに、再試行メカニズムを追加し、カスタムエラーメッセージを含めてください。再試行回数は3回とし、エラーメッセージはユーザーにわかりやすいものにしてください。

async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

getData();

解答例

async function getDataWithRetry(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      let response = await fetch(url);
      if (!response.ok) {
        throw new Error(`サーバーエラー: ステータスコード ${response.status}`);
      }
      let data = await response.json();
      console.log("データ取得成功:", data);
      return data;
    } catch (error) {
      if (i < retries - 1) {
        console.warn(`リトライ中 (${i + 1}/${retries})... 次の試行まで${delay}ms待機`);
        await new Promise(res => setTimeout(res, delay));
      } else {
        displayCustomErrorMessage(error);
        throw error;
      }
    }
  }
}

function displayCustomErrorMessage(error) {
  let userFriendlyMessage;
  if (error.message.includes("ステータスコード")) {
    userFriendlyMessage = "サーバーで問題が発生しました。しばらくしてから再試行してください。";
  } else {
    userFriendlyMessage = "データを取得できませんでした。ネットワーク接続を確認してください。";
  }
  console.error(userFriendlyMessage, error.message);
  alert(userFriendlyMessage);
}

getDataWithRetry("https://api.example.com/data");

これらの練習問題を通じて、エラーハンドリングの基本的なテクニックと実践的な応用方法を習得しましょう。エラーハンドリングを適切に実装することで、アプリケーションの信頼性とユーザー体験を向上させることができます。

まとめ

本記事では、JavaScriptにおけるエラーハンドリングとAPI呼び出しの管理について詳しく解説しました。エラーハンドリングの基礎から、具体的な実装方法、再試行メカニズム、カスタムエラーメッセージの作成方法までを学びました。エラーハンドリングは、ユーザー体験の向上やアプリケーションの信頼性を高めるために不可欠です。

適切なエラーハンドリング戦略を実装することで、ネットワークの一時的な問題やサーバーエラーに対処し、ユーザーに対してわかりやすいエラーメッセージを提供できます。また、エラーログの管理と分析を通じて、問題の根本原因を特定し、迅速に対応することが可能です。

今回の内容を通じて、エラーハンドリングの重要性とその具体的な実装方法についての理解が深まったことと思います。これらの技術を実践に取り入れることで、より信頼性の高い、ユーザーフレンドリーなアプリケーションを開発することができるでしょう。