MENU
  1. ホーム
  2. TypeScript
  3. TypeScriptでPromiseのエラーハンドリングとリトライを実装する方法

TypeScriptでPromiseのエラーハンドリングとリトライを実装する方法

TypeScript

TypeScriptで非同期処理を扱う際、Promiseは非常に重要な役割を果たします。しかし、非同期処理にはエラーが発生する可能性が常に伴います。そのため、適切なエラーハンドリングと、必要に応じたリトライ処理を行うことが、信頼性の高いアプリケーションを開発するために不可欠です。本記事では、Promiseを使用したエラーハンドリングの方法や、エラー発生時に再試行（リトライ）を行う方法について、具体的な実装例を交えて解説していきます。

目次

Promiseの基本概念

Promiseは、JavaScriptやTypeScriptにおける非同期処理を管理するためのオブジェクトです。非同期処理は、通常時間がかかるタスク（例えば、サーバーへのデータ要求やファイルの読み込みなど）をバックグラウンドで実行し、完了後にその結果を返します。Promiseは、その結果がまだ「解決」していない状態、つまり「保留中」（pending）であることを表現し、処理が完了すると「成功」（resolved）または「失敗」（rejected）という状態に移行します。

Promiseの3つの状態

  1. Pending（保留中）: 非同期処理が完了していない状態。
  2. Fulfilled（成功）: 非同期処理が正常に完了した状態で、値が返される。
  3. Rejected（失敗）: 非同期処理が失敗し、エラーが発生した状態。

Promiseは、非同期処理の結果を待機する手段を提供し、非同期コードをより読みやすく管理しやすくするために重要です。

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

エラーハンドリングは、プログラムの信頼性を向上させ、予期しないエラーや問題に対処するために欠かせない要素です。特に非同期処理において、エラーが発生した際に適切な対処をしなければ、アプリケーションのクラッシュや予期しない動作につながる可能性があります。Promiseを使用した非同期処理では、エラーの発生が避けられないケースが多く、効果的なエラーハンドリングを実装することが非常に重要です。

エラーハンドリングのメリット

  1. システムの安定性向上: エラーを適切にキャッチして処理することで、アプリケーションの異常終了を防ぎ、システムの安定性が向上します。
  2. ユーザー体験の向上: エラーが発生した場合でも、ユーザーにわかりやすいエラーメッセージを表示したり、リトライを試みることで、ユーザーにスムーズな体験を提供できます。
  3. デバッグの容易さ: 適切なエラーハンドリングにより、エラーが発生した箇所を素早く特定でき、デバッグや修正が効率的になります。

エラーハンドリングは、単にエラーを捕捉するだけではなく、エラーの発生に応じて適切に対応し、システムの信頼性とユーザー体験を向上させるための重要な手法です。

thenとcatchを使ったエラーハンドリング

Promiseを使用して非同期処理を行う際、thenとcatchを組み合わせることで、成功時の処理とエラー時の処理を明確に分けて記述することができます。thenはPromiseが正常に解決された際の処理を定義し、catchはPromiseが拒否された（エラーが発生した）場合に実行される処理を定義します。

thenを使った成功時の処理

thenメソッドは、Promiseが正常に完了した際に、その結果を引数として処理を実行します。たとえば、サーバーからデータを取得する非同期処理が成功した場合、そのデータをthen内で扱います。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('データ取得成功:', data);
  });

この例では、最初のthenでレスポンスをJSONに変換し、次のthenでデータを処理しています。

catchを使ったエラーハンドリング

catchメソッドは、Promiseが失敗した場合に実行されます。非同期処理中にネットワークエラーやリソースの取得失敗が発生した場合、エラーをcatchで処理します。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('データ取得成功:', data);
  })
  .catch(error => {
    console.error('エラー発生:', error);
  });

この例では、Promiseが拒否された際にエラー内容をコンソールに出力します。これにより、エラーの発生状況に応じた適切な対応が可能です。

thenとcatchを組み合わせたフロー

thenとcatchを組み合わせることで、非同期処理が成功した場合と失敗した場合の両方を処理でき、エラーが発生した際にシステムのクラッシュを防ぎつつ、ユーザーにフィードバックを提供できます。

try-catchとasync-awaitによるエラーハンドリング

async/awaitは、Promiseベースの非同期処理をよりシンプルに書くための構文です。これにより、従来のthenとcatchメソッドを使ったチェーン形式の非同期処理に比べ、同期的なコードのように記述できるため、可読性が向上します。さらに、try-catchブロックを使用することで、エラーハンドリングも直感的に記述することができます。

asyncとawaitの基本

async関数は常にPromiseを返します。awaitはPromiseの解決を待機し、その結果を返します。これにより、awaitを使うことで非同期処理の結果を直接変数に代入でき、コードが簡潔になります。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log('データ取得成功:', data);
}

上記のコードでは、非同期処理がawaitで待機され、成功するとその結果が変数に格納されます。

try-catchを使ったエラーハンドリング

async-awaitでの非同期処理に対するエラーハンドリングは、try-catchブロックを使って行います。try内でエラーが発生した場合、catchが呼び出されてエラーを処理します。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('データ取得成功:', data);
  } catch (error) {
    console.error('エラー発生:', error);
  }
}

この例では、fetchやresponse.json()の呼び出し中にエラーが発生した場合、catchブロックでエラーが処理されます。非同期処理全体をtryブロックにまとめることで、エラーを一元的に管理できるため、エラーハンドリングがシンプルになります。

async-awaitとtry-catchを使うメリット

  • 可読性の向上: thenチェーンよりも直感的で読みやすく、複数の非同期処理を同期的なコードのように記述可能です。
  • 統一的なエラーハンドリング: try-catchによって、エラー処理を一箇所で管理できるため、エラーハンドリングが簡単かつ一貫性のあるものになります。

async-awaitとtry-catchの組み合わせにより、複雑な非同期処理でもシンプルかつエレガントなコードを実現し、エラー発生時のトラブルシューティングも効率的に行えます。

Promise.allとエラーハンドリング

Promise.allは、複数のPromiseを同時に実行し、それらのすべてが解決されるまで待機するメソッドです。非同期処理の並行実行を効率よく扱えるため、大量のデータ取得や複数の非同期タスクを並列で処理したい場合に非常に便利です。しかし、複数のPromiseの中で1つでもエラーが発生した場合、全体がrejectedとなるため、適切なエラーハンドリングが重要です。

Promise.allの基本的な使い方

Promise.allは、渡されたすべてのPromiseが解決された後に結果を返します。すべてが成功した場合、結果は配列で返されます。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.all([promise1, promise2, promise3])
  .then(responses => {
    return Promise.all(responses.map(response => response.json()));
  })
  .then(data => {
    console.log('すべてのデータ取得成功:', data);
  });

上記のコードでは、3つのfetchリクエストを並列に実行し、すべてのレスポンスが取得された後、JSONに変換し結果を取得します。

エラーハンドリングの注意点

Promise.allは、配列内のPromiseのいずれか1つでも拒否（rejected）された場合、即座に全体がエラーとして扱われます。このため、どれか1つのリクエストが失敗すると、他のリクエストの結果も無視されてしまう可能性があります。

Promise.all([promise1, promise2, promise3])
  .then(responses => {
    return Promise.all(responses.map(response => response.json()));
  })
  .then(data => {
    console.log('すべてのデータ取得成功:', data);
  })
  .catch(error => {
    console.error('1つ以上のリクエストが失敗しました:', error);
  });

この例では、どれか1つのPromiseが失敗した場合、catchブロックでエラーが処理されます。

部分的なエラーハンドリング

場合によっては、すべてのPromiseが解決されなくても、成功したPromiseの結果を処理したいことがあります。これを実現するために、Promise.allSettledを使うことができます。Promise.allSettledは、すべてのPromiseが解決されるか拒否されるかにかかわらず、全体の結果を返します。

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('成功:', result.value);
      } else {
        console.error('失敗:', result.reason);
      }
    });
  });

Promise.allSettledでは、各Promiseの状態がfulfilled（成功）かrejected（失敗）かを確認し、それぞれに応じた処理を行うことができます。

Promise.allでのエラーハンドリングのまとめ

Promise.allは、複数の非同期処理を並列に実行し、効率的に結果を取得するための強力なツールですが、1つのPromiseのエラーが全体に影響を与える可能性があるため、エラーハンドリングが重要です。必要に応じてPromise.allSettledを使い、部分的な成功も処理できるようにすると、アプリケーションの信頼性がさらに向上します。

リトライの基本概念

リトライは、非同期処理や外部リソースとの通信（例えば、APIリクエスト）が失敗した場合に、同じ処理を再試行することを指します。非同期処理のエラーは、一時的な問題やネットワークの不安定さが原因で発生することが多く、こうした問題は時間をおけば解決することがあります。そのため、エラーハンドリングとともにリトライロジックを実装することで、アプリケーションの信頼性を向上させることができます。

リトライが必要なシーン

リトライは、以下のような状況で有効です。

  1. 一時的なネットワークエラー: APIサーバーやデータベースに接続する際、瞬間的なネットワーク障害による失敗はよくある問題です。数秒後に再試行することで成功する可能性があります。
  2. API制限やレート制限: サーバーが一時的にリクエストを受け付けられない場合、適切な待機時間を設けて再試行することで、リクエストが成功することがあります。
  3. リソース不足: サーバーやデータベースが一時的に負荷が高い場合、リクエストが失敗することがありますが、負荷が軽減された後に再試行することで成功することがあります。

リトライの考慮点

リトライを実装する際には、いくつかの重要な点を考慮する必要があります。

  1. リトライ回数の設定: 無制限にリトライを行うと、サーバーやリソースに過剰な負荷をかける可能性があります。通常は、リトライ回数を制限して、最大でも数回程度に設定します。
  2. リトライ間隔の設定: リトライを連続してすぐに行うのではなく、一定の時間（数秒など）を待ってから再試行するのが一般的です。これにより、一時的な問題が解消する時間を確保できます。
  3. 指数バックオフ: リトライの間隔を試行回数に応じて徐々に増やす「指数バックオフ」を採用することもあります。これにより、リソースの負荷をさらに軽減できます。

リトライロジックを効果的に実装することで、外部リソースとの信頼性の低い通信環境においても、エラーによる中断を最小限に抑えることが可能となり、アプリケーションの耐障害性を向上させることができます。

リトライロジックの実装例

リトライ処理を実装する際、まずは基本的な再試行のロジックを理解することが重要です。ここでは、Promiseを使用した非同期処理に対してリトライロジックを組み込む方法を解説します。リトライ処理では、指定回数のリトライを行い、一定の間隔を設けて再試行します。

基本的なリトライの実装

以下は、リクエストが失敗した場合に3回まで再試行を行うシンプルなリトライ処理の例です。

async function fetchWithRetry(url: string, retries: number = 3, delay: number = 1000): Promise<any> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('サーバーエラー');
    }
    return await response.json();
  } catch (error) {
    if (retries > 0) {
      console.log(`リトライを試行します。残り: ${retries} 回`);
      await new Promise(resolve => setTimeout(resolve, delay)); // 再試行前に待機
      return fetchWithRetry(url, retries - 1, delay); // リトライを実行
    } else {
      console.error('最大リトライ回数に達しました。');
      throw error; // リトライ回数を超えた場合、エラーを投げる
    }
  }
}

コードのポイント

  1. retries引数: この引数は、リトライを許可する回数を指定します。デフォルトは3回です。
  2. delay引数: リトライを試行する前に待機する時間（ミリ秒単位）を指定します。デフォルトは1秒（1000ms）です。
  3. エラーハンドリング: catchブロックでエラーをキャッチし、再試行を行うかどうかを判断します。
  4. 再試行の遅延: setTimeoutを使ってリトライ間の待機時間を設定しています。これにより、一時的なエラーに対して適切な時間を待って再試行することができます。

指数バックオフを用いたリトライ

指数バックオフは、リトライの待機時間を回数に応じて指数的に増加させる手法です。これにより、サーバーへの負荷を軽減し、リソースの安定性を向上させます。

async function fetchWithExponentialBackoff(url: string, retries: number = 3, delay: number = 1000): Promise<any> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('サーバーエラー');
    }
    return await response.json();
  } catch (error) {
    if (retries > 0) {
      const backoffDelay = delay * (2 ** (3 - retries)); // 指数バックオフ
      console.log(`リトライを試行します。残り: ${retries} 回, 待機時間: ${backoffDelay}ms`);
      await new Promise(resolve => setTimeout(resolve, backoffDelay));
      return fetchWithExponentialBackoff(url, retries - 1, delay);
    } else {
      console.error('最大リトライ回数に達しました。');
      throw error;
    }
  }
}

指数バックオフのポイント

  • 指数的な遅延: delay * (2 ** (3 - retries)) により、リトライするたびに待機時間が倍増します。最初は短く、回数が増えるにつれて待機時間が長くなります。

実装のメリット

  • 一時的なエラーが原因で非同期処理が失敗した場合でも、リトライ処理によって成功する可能性が高まります。
  • 指数バックオフにより、サーバーやリソースへの負荷を抑えつつ、リトライを効率的に行えます。

これらのリトライロジックを組み込むことで、ネットワークエラーや一時的な問題に対処し、より信頼性の高いアプリケーションを構築することが可能です。

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

エラーハンドリングとリトライ処理は、単純にエラーをキャッチして再試行するだけではなく、さまざまな状況に応じた柔軟な対応が求められます。適切なベストプラクティスを採用することで、アプリケーションの信頼性や効率性が大幅に向上します。ここでは、エラーハンドリングとリトライを効果的に実装するためのポイントを紹介します。

1. 適切なエラーハンドリングの戦略

すべてのエラーが同じ扱いで良いわけではありません。エラーには、すぐにリトライすべきもの、ユーザーに通知すべきもの、システム全体に影響を及ぼすものなどさまざまな種類があります。そのため、エラーハンドリングにおいては次のような戦略を立てる必要があります。

  • クリティカルエラーと非クリティカルエラーの区別: サーバーのダウンなどクリティカルなエラーの場合、すぐにリトライしても効果がないことが多いため、エラーの種類に応じた対応が必要です。
  • ユーザーに通知する場合: エラーの内容がユーザーに影響を与える場合には、分かりやすいメッセージで通知し、場合によっては対策を促すUIを表示することが重要です。

2. リトライ回数と間隔の最適化

リトライ処理では、無制限に再試行するのではなく、適切な回数制限や待機時間の設定が重要です。以下のポイントを考慮することで、過剰なリトライや不必要なサーバー負荷を防ぎます。

  • 最大リトライ回数の設定: 通常は、3～5回程度のリトライを設定することが一般的です。これにより、失敗したリクエストが永遠に続くことを防げます。
  • 指数バックオフの活用: 前述したように、リトライ間隔を回数に応じて指数的に増加させることで、サーバー負荷を抑えつつ再試行の成功率を高めます。

3. 再試行すべきエラーとすべきでないエラーの識別

すべてのエラーがリトライ対象ではありません。たとえば、ユーザーの入力ミスやリクエストの無効化エラー（404 Not Foundなど）は、リトライしても意味がないため、即座にエラーメッセージを表示するべきです。

  • リトライ対象となるエラー: 一時的なネットワークエラー（例えば、タイムアウトや502 Bad Gateway）、リソースが一時的に利用不可な状態（503 Service Unavailableなど）。
  • リトライ対象外のエラー: クライアントエラー（400 Bad Request、404 Not Foundなど）、入力ミスや無効なデータに起因するエラー。

4. ログとモニタリングの重要性

エラーやリトライの発生頻度や原因を正確に把握するためには、適切なログ出力やモニタリングが不可欠です。これにより、リトライが頻発している箇所や、予期しないエラーが発生している部分を特定し、必要な改善を迅速に行うことができます。

  • エラーログ: 発生したエラーの詳細を記録し、特定のエラーがどの程度発生しているのかを分析します。
  • リトライの監視: リトライが成功しているか、失敗しているかを追跡し、リトライ処理が適切に行われているか確認します。

5. フォールバック処理の実装

リトライが限度回数に達しても問題が解決しない場合、フォールバック処理を実装しておくことも有効です。例えば、異なるサーバーにリクエストを送る、ローカルキャッシュからデータを取得するなど、次善策を用意しておくことで、完全な失敗を回避できます。

  • フォールバックシステム: 一部の機能が停止した場合でも、アプリケーション全体が動作し続けるための仕組みを導入します。
  • ローカルキャッシュの使用: 外部APIが一時的に利用できない場合は、ローカルにキャッシュされたデータを一時的に利用することができます。

まとめ

エラーハンドリングとリトライは、アプリケーションの信頼性を高めるための重要な要素です。エラーの種類に応じた対応、適切なリトライ戦略、ログやモニタリングの活用、そしてフォールバック処理を組み合わせることで、非同期処理のエラーに対する柔軟な対応が可能になります。これらのベストプラクティスを実践することで、ユーザーに安定した体験を提供できる堅牢なアプリケーションを構築できます。

外部ライブラリを使ったリトライ処理

リトライ処理を自前で実装することもできますが、特定のユースケースに特化した外部ライブラリを使用することで、より簡単に高度なリトライロジックを実装できます。これらのライブラリは、リトライ回数や待機時間、指数バックオフ、特定のエラーだけをリトライ対象にする設定など、さまざまなカスタマイズが可能です。ここでは、TypeScriptで使用できる有用なリトライライブラリを紹介し、その使い方を解説します。

axios-retry

axios-retryは、人気のHTTPクライアントライブラリaxiosにリトライ機能を追加するためのライブラリです。axiosを使ってAPIリクエストを行う際に、特定の条件で自動的にリトライ処理を組み込むことができます。

インストール方法

まずは、axiosとaxios-retryをインストールします。

npm install axios axios-retry

基本的な使用例

axios-retryを使うと、axiosのリクエストに対して自動的にリトライ処理を追加できます。以下は、最大3回までリトライを行う設定の例です。

import axios from 'axios';
import axiosRetry from 'axios-retry';

// axiosにリトライ機能を追加
axiosRetry(axios, { retries: 3 });

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('データ取得成功:', response.data);
  } catch (error) {
    console.error('最大リトライ回数に達しました。', error);
  }
}

fetchData();

このコードでは、リクエストが失敗した場合に3回まで自動的にリトライされ、すべてのリトライが失敗した場合にエラーがキャッチされます。

リトライ条件のカスタマイズ

axios-retryでは、特定のHTTPステータスコードやネットワークエラーに対してのみリトライを行うように条件をカスタマイズすることができます。例えば、500番台のサーバーエラーにのみリトライを適用する場合は次のように設定します。

axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    // 500番台のステータスコードに対してのみリトライを行う
    return error.response && error.response.status >= 500;
  }
});

この設定により、ネットワークエラーや404エラーなどではリトライが行われず、500番台のサーバーエラーに対してのみリトライが適用されます。

retry-axios: より高度なリトライ機能

retry-axiosは、axios向けのもう一つのリトライライブラリで、より柔軟なリトライ条件の設定やバックオフ戦略を提供します。

インストール方法

npm install retry-axios

指数バックオフ付きリトライの実装例

以下のコードでは、指数バックオフを使用してリトライ間隔を調整する方法を示します。

import axios from 'axios';
import { attach } from 'retry-axios';

// axiosインスタンスを作成し、リトライ機能を追加
const axiosInstance = axios.create();
attach(axiosInstance);

// リトライオプションを設定
axiosInstance.defaults.raxConfig = {
  retry: 5, // 最大5回リトライ
  retryDelay: 1000, // 初期リトライ間隔を1秒に設定
  backoffType: 'exponential', // 指数バックオフを使用
  onRetryAttempt: (err) => {
    const cfg = err.config;
    console.log(`リトライ回数: ${cfg.raxConfig.currentRetryAttempt}`);
  }
};

async function fetchData() {
  try {
    const response = await axiosInstance.get('https://api.example.com/data');
    console.log('データ取得成功:', response.data);
  } catch (error) {
    console.error('最大リトライ回数に達しました。', error);
  }
}

fetchData();

この例では、5回のリトライを設定し、各リトライごとに間隔が指数的に増加します。これにより、サーバー負荷を抑えながらリトライ処理が可能になります。

外部ライブラリを使うメリット

  • コードの簡潔化: リトライロジックを自前で実装する必要がなく、ライブラリの簡単な設定で複雑なリトライ処理が実現できます。
  • 柔軟なカスタマイズ: 特定のエラーにのみリトライを行う、リトライ間隔をカスタマイズするなど、状況に応じた柔軟な設定が可能です。
  • メンテナンスの容易さ: リトライ処理のメンテナンスが外部ライブラリによって簡素化されるため、コードベースの保守が楽になります。

外部ライブラリを活用することで、エラーハンドリングやリトライの実装が容易になり、複雑なリトライロジックも短時間で導入可能です。これにより、開発者は本来のビジネスロジックに集中しつつ、堅牢なエラーハンドリングを実現できます。

まとめ

本記事では、TypeScriptでのPromiseを使ったエラーハンドリングとリトライ処理の重要性と実装方法について解説しました。then/catchやtry-catchを使った基本的なエラーハンドリングから、Promise.allやリトライロジック、指数バックオフの考え方、さらには外部ライブラリを用いた高度なリトライ処理まで幅広く紹介しました。エラーハンドリングとリトライの適切な実装は、非同期処理における信頼性を高め、ユーザーにより良い体験を提供するために不可欠です。

TypeScript
エラーハンドリング リトライ TypeScript Promise

コメント

コメントする

目次