Axios とカスタム フックを使用した堅牢なフロントエンド エラー処理システムの構築

導入

効果的なエラー処理は、シームレスなユーザー エクスペリエンスを提供し、クリーンでスケーラブルなコードを維持するために非常に重要です。複雑なアプリケーションでは、コンポーネント間でエラーを手動で管理すると、コードが乱雑で一貫性のないものになることがよくあります。このガイドでは、Axios、カスタム フック (useApi)、およびモジュール式サービス レイヤーを使用して、React でモジュール式でスケーラブルな一元化されたエラー処理システムを構築し、使いやすく、整理された、効率的な構造を作成する方法を説明します。

フック: 一元化されたエラー処理が重要な理由

電子商取引プラットフォームを構築していると想像してください。複数のコンポーネントがさまざまな API からデータを取得しますが、ネットワークの問題、サーバー エラー、無効なユーザー入力など、それぞれがさまざまな理由で失敗する可能性があります。一元化されたエラー処理システムがないと、コードは繰り返しのエラー チェックによって乱雑になり、ユーザーは一貫性のないフィードバックを受け取ります。このプロセスを効率化し、信頼性とシームレスなユーザー エクスペリエンスを確保するにはどうすればよいでしょうか?このガイドではその方法を説明します。

最後までに次のことを学びます:

• Axios インターセプターを使用して集中エラー処理を設定する方法。
• API リクエストの状態を管理するためのカスタム useApi フックの役割。
• サービス モジュールを使用して API ロジックを編成する利点。
• 再試行オプションやリクエストのキャンセルなど、ユーザーフレンドリーなエラー処理のための高度なテクニック。

目次

1. 集中エラー処理を行う理由
2. 基本的な実装
3. インターセプターを使用した Axios インスタンスのセットアップ
4. カスタム useApi フックの作成
5. 約束と約束の拒否を理解する
6. サービスモジュールの編成
7. 例: ユーザーサービス
8. 高度な機能強化 (オプション)
   • カスタマイズの解析エラー
   • 再試行メカニズム
   • 詳細な通知
   • コンポーネントのアンマウント時にリクエストをキャンセル
9. 点をつなぐ
10. 視覚的な概要
11. すべてをまとめる: 現実世界の例
12. ベストプラクティス
13. 続きを読む
14. トラブルシューティング
15. 環境構成
16. 結論
17. 行動喚起

---

なぜ一元的なエラー処理が必要なのでしょうか?

一元的なエラー処理により、次の 2 つの一般的な課題に対処できます。

反復的なエラーコード

• 問題: 中央のメカニズムがないと、コンポーネントは複数の try-catch ブロックに依存します。
• 影響: 一貫性のないエラー処理と冗長コードが発生します。

一貫性のないユーザーエクスペリエンス

• 問題: 一元化されていない場合、エラー メッセージがアプリごとに異なる場合があります。
• 影響: 支離滅裂なユーザー エクスペリエンスが作成され、ユーザーが混乱する可能性があります。

Axios インターセプター、カスタム フック (useApi)、およびサービス モジュールによる集中型アプローチを使用すると、次のようにしてこれらの問題を解決できます。

• エラー解析とメッセージングのための単一の場所: すべてのエラーを処理するための統一された場所を提供し、一貫性を確保します。
• 懸念事項の分離: コンポーネントが純粋にデータの表示とユーザーの操作に集中できるようにし、エラー処理は集中モジュールに任せます。

---

基本的な実装

インターセプターを使用した Axios インスタンスのセットアップ

Axios インターセプターは、Axios がリクエストまたはレスポンスごとに呼び出す関数です。レスポンス インターセプタを設定すると、エラーをグローバルに処理し、レスポンスを解析し、特定の条件に基づいてユーザーのログ記録やリダイレクトなどのアクションを実行できます。

ステップ 1: 必要なモジュールをインポートする

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

ステップ 2: Axios インスタンスを作成する

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

ステップ 3: レスポンス インターセプターを追加する

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

説明:

• エラー解析: インターセプターは、エラーに応答があるかどうかを確認します。そうでない場合は、ネットワーク エラーとみなされ、対応するメッセージが表示されます。
• カスタム エラー メッセージ: サーバーから提供されたエラー タイプに基づいてカスタム エラー メッセージを使用しようとします。利用可能なメッセージがない場合は、事前定義されたメッセージに戻ります。
• ユーザー フィードバック: React-toastify を利用してトースト通知を表示し、即座にフィードバックを提供することでユーザー エクスペリエンスを向上させます。
• リダイレクト: 401 Unauthorized エラーが発生した場合にユーザーをログイン ページにリダイレクトし、不正アクセスを防止してセキュリティを確保します。

ステップ 4: Axios インスタンスをエクスポートする

export default axiosInstance;

カスタムエラーメッセージ

一貫性を維持し、管理を容易にするために、個別の構成ファイルでカスタム エラー メッセージを定義します。

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

簡単な概要: Axios Interceptor 構成

Axios インターセプターをセットアップすると、次のことが可能になります:

• 一元的なエラー解析: エラーを 1 か所で管理し、すべての API リクエストにわたる一貫性を確保します。
• ユーザー フィードバック: 問題について直ちにユーザーに通知するために、react-toastify を利用します。
• リダイレクトとセキュリティ: 必要に応じて、権限のないユーザーをログインにリダイレクトし、アプリの安全性を保ちます。

この一元化された Axios インスタンスは、アプリケーション全体にわたるすべての API リクエストとエラー処理の一貫した管理を保証する、信頼性が高くユーザーフレンドリーな API 通信層を構築するための鍵となります。

カスタム useApi フックの作成

useApi フックは、API リクエストの処理、読み込み、データ、エラー状態の管理を一元化します。 useApi はこのプロセスを抽象化することで、コンポーネントが try-catch ブロックの繰り返しを回避し、データのプレゼンテーションに集中できるようにします。

パラメータ:

• apiFunc (関数): 通常はサービス モジュールから実行する API 関数。
• immediate (ブール値、オプション): フックの初期化直後に API 呼び出しを行うかどうかを決定します。デフォルトは false です。

戻り値:

• data: API 呼び出しからの応答データ。
• loading: API 呼び出しが進行中かどうかを示します。
• error: 失敗した API 呼び出しからのエラー メッセージをキャプチャします。
• request: API 呼び出しを開始する関数。必要なパラメーターを指定して呼び出すことができます。

実装：

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

説明：

• 状態管理:
  • data: 応答データを格納します。
  • loading: API 呼び出しが進行中かどうかを示します。
  • error: エラー メッセージをキャプチャします。
• リクエスト関数:
  • API 呼び出しを開始します。
  • API 呼び出しの結果に基づいて状態の更新を管理します。

約束と約束の拒否を理解する

さらに詳しく説明する前に、JavaScript の Promise と Promise Rejection を理解することが重要です。これは、API 呼び出しなどの非同期操作を処理する際に重要な役割を果たすためです。

• Promises: Promise は、非同期操作の最終的な完了または失敗を表すオブジェクトです。これにより、操作の成功 (解決) または失敗 (拒否) を処理するコールバックをアタッチできます。
• Promise の拒否: 操作が失敗すると、Promise は「拒否」され、.catch メソッドまたは .then.
の 2 番目のパラメーターがトリガーされます。

Axios と useApi の関連性:

• Axios と Promises: Axios は Promises を使用して HTTP リクエストを処理します。 Axios を使用してリクエストを行うと、応答データで解決されるか、エラーで拒否される Promise が返されます。
• Axios インターセプターでの Promise の拒否: Axios インターセプターでは、エラーが発生すると、インターセプターは Promise.reject(error) を使用して Promise を拒否します。この拒否は、API 呼び出しが行われた場所に伝播します。
• useApi での拒否のキャッチ: useApi フックのリクエスト関数は、try-catch を使用してこれらの拒否を処理します。 apiFunc(...args) が拒否すると、catch ブロックがエラーをキャプチャし、それに応じてエラー状態を更新します。

約束の拒否に対処することの重要性:

• 未処理の拒否を防止する: Promise の拒否が処理されないと、予期しない動作が発生し、デバッグが困難になる可能性があります。
• 一貫したエラー管理: Promise 拒否の処理を一元化することで、すべてのエラーが確実に均一に管理され、コードの信頼性とユーザー エクスペリエンスが向上します。

useApi フックが使用されていない場合はどうなりますか?

useApi フックを使用しない場合は、API 呼び出しを行うすべてのコンポーネントに try-catch ブロックを実装する必要があります。このアプローチにより、次のような結果が得られます。

• 反復コード: 各コンポーネントには同様のエラー処理ロジックがあり、コードの冗長性が高まります。
• 一貫性のないエラー処理: コンポーネントごとにエラーの処理方法が異なる可能性があり、一貫性のないユーザー エクスペリエンスが発生します。
• メンテナンスの労力の増加: エラー処理ロジックを更新するには、複数のコンポーネントにわたる変更が必要となり、メンテナンスが煩雑になります。

useApi フックを使用すると、反復的なエラー処理ロジックが抽象化され、よりクリーンで保守しやすいコードが促進されます。

使用例:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

この例では、useApi フックが商品を取得するための API 呼び出しを管理します。ロード状態を処理し、エラーをキャプチャし、フェッチしたデータをレンダリングのためにコンポーネントに提供します。

---

サービスモジュールの編成

サービス モジュールは、エンティティ (ユーザー、製品など) ごとに編成された API エンドポイント関数を定義します。この構造により、API ロジックがコンポーネント コードから分離され、モジュール性と再利用が確保されます。

例: 製品サービス

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

例: ユーザーサービス

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

サービス モジュールの利点:

• 再利用とモジュール性を有効にする: API 関数を複数のコンポーネント間で再利用できるため、コードの重複が削減されます。
• 懸念事項の分離を確保: API ロジックをサービスに移動することでコンポーネントをクリーンな状態に保ち、コードの構成と保守性を向上させます。
• より簡単なテスト: サービス モジュールを個別にテストして、コンポーネントに統合する前に API インタラクションが期待どおりに機能することを確認できます。

---

高度な機能強化 (オプション)

エラー処理システムをさらに進化させる準備ができている場合は、次の高度なテクニックの実装を検討してください。

カスタマイズの解析エラー

エラー (ネットワーク対検証など) を分類し、ユーザーが問題と考えられる解決策を理解するのに役立つ実用的なメッセージを提供します。

実装:

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

説明:

• エラー分類: インターセプターは、エラー応答の type プロパティをチェックして、エラーの性質 (検証または認証など) を判断します。
• アクション可能なメッセージ: エラーの種類に基づいてユーザーに特定のエラー メッセージを提供し、ユーザーの理解と適切な対応能力を高めます。

リトライメカニズム

信頼性を高めるために、UI の再試行ボタンや指数バックオフによる自動再試行など、失敗したリクエストの再試行オプションを実装します。

実装:

export default axiosInstance;

説明:

• 再試行: 指数バックオフ戦略を使用して、失敗したリクエストを最大 3 回再試行するように Axios を構成します。
• 再試行条件: 再試行は、ネットワーク エラー、冪等リクエスト、またはサーバーが 500 Internal Server Error で応答した場合に発生します。
• 再試行のログ: 各再試行をログに記録します。これはデバッグや監視に役立ちます。

詳細な通知

ユーザーがエラーの重要性を理解できるように、重大度 (情報、警告、エラー) によって通知を区別します。

実装:

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

説明:

• 通知タイプ: エラー カテゴリに基づいてトースト通知のタイプ (情報、警告、エラー) を決定します。
• ユーザー フィードバック: 状況に応じたフィードバックをユーザーに提供し、問題の重大度と性質を理解するのに役立ちます。

コンポーネントのアンマウント時にリクエストをキャンセルする

Axios キャンセル トークンを使用して、コンポーネントがアンマウントされた場合に進行中のリクエストをキャンセルしてメモリ リークを防ぎます。

実装:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

説明:

• キャンセル トークン: Axios キャンセル トークンを利用して、新しいリクエストが行われたとき、またはコンポーネントがアンマウントされたときに進行中の API リクエストをキャンセルします。
• メモリ リークの防止: アンマウントされたコンポーネントで状態の更新が行われないようにし、メモリ リークの可能性を防ぎます。
• キャンセルされたリクエストのログ: デバッグ目的でキャンセルされたリクエストをログに記録します。

高度な機能強化の概要

これらの高度なテクニックを実装すると、エラー処理システムが次のレベルに引き上げられます。

• エラー解析のカスタマイズ: より具体的なエラー メッセージをユーザーに配信し、ユーザーが問題を理解し、直接対処できるようにします。
• 再試行メカニズム: 特定のエラー後にリクエストを自動または手動で再試行できるようにすることで、信頼性が向上します。
• 詳細な通知: エラーの種類を区別し、重大度に基づいて通知を表示し、ユーザーに適切に通知します。
• コンポーネントのアンマウント時にリクエストをキャンセル: メモリ リークと冗長なリクエストを防止し、安定した効率的なアプリのパフォーマンスを保証します。

これらの機能強化はオプションですが、アプリのエラー処理アプローチに深み、柔軟性、ユーザー中心の改善を加えるため、非常に価値があります。

---

点をつなぐ

コンポーネントが useApi を通じて API 呼び出しを開始すると、次のフローがトリガーされます:

コンポーネントはサービス モジュールを使用します。

各サービス モジュール (userService、productService など) は、特定の API エンドポイントの関数を定義し、設定された axiosInstance を使用します。コンポーネントは、これらのサービス関数とのみ対話します。

useApi はサービス モジュール経由で Axios をトリガーします。

コンポーネントはサービス関数 (productService.getProducts など) を useApi に渡します。リクエストが呼び出されると、useApi は関数をサービスに転送し、サービスは axiosInstance を通じて HTTP リクエストを作成します。

Axios インターセプターでのカスタム エラー解析:

axiosInstance のインターセプターは、エラー ログを処理し、事前定義されたカスタム エラー メッセージを解析し、エラー処理を一元化します。

useApi からの構造化された応答:

useApi は構造化された状態 (データ、読み込み、エラー) をコンポーネントに返し、コンポーネントはデータの表示とインタラクションの処理だけに集中できるようになります。

---

視覚的な概要

次の概要は、最初の API 呼び出しからユーザー フィードバックまで、エラー処理システムの各コンポーネントがアプリケーション内でどのように対話するかを説明します。

1. コンポーネント

   • コンポーネントは useApi フックを使用して API リクエストを開始します。これにより、API 呼び出し、エラー処理、状態の読み込みの管理の複雑さが抽象化されます。

2. Api フックを使用する

   • useApi は、API リクエストの関数を (サービス モジュールから) 受け取るカスタム フックです。リクエストの読み込み状態を管理し、エラーを処理し、構造化された応答 (データ、読み込み、エラー) をコンポーネントに返します。

3. サービスモジュール

   • サービス モジュールは、API エンドポイントごとに特定の関数 (getProducts、createProduct など) を定義し、すべてのリクエストに対して集中管理された axiosInstance を使用して、アプリケーション全体の一貫性を確保します。

4. Axios インスタンス

   • axiosInstance は HTTP リクエストとレスポンスを管理し、ベース URL やヘッダーなどのカスタム構成を適用します。

5. API レスポンス

   • API からの応答は、エラーをグローバルに処理する Axios インターセプターを通じて処理されます。これには、カスタム エラー メッセージの解析とユーザー通知のトリガーが含まれます。

6. エラー処理とユーザー通知

   • インターセプターは、react-toastify 通知を介してユーザーにエラー メッセージを表示し、認証エラー時にユーザーをログイン ページにリダイレクトするなどの追加アクションを管理できます。

このフローにより、一元的なエラー管理と一貫したユーザー フィードバックが可能になり、コンポーネントは反復的なエラー チェック ロジックを処理する必要がなく、データの表示のみに集中できるようになります。

---

すべてをまとめる: 実際の例

ProductList コンポーネント

この例では、一元化されたエラー処理とフィードバックを使用して、API 呼び出しの実行からデータの表示までのフロー全体を示します。

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

コンポーネントの内訳:

• インポートステートメント:

  • act-toastify: トースト通知を表示するために使用されます。
  • productService: 製品に関連する API 関数が含まれています。
  • useApi: API 呼び出しを管理するためのカスタム フック。

• フックの初期化:

  • productService からの getProducts 関数を使用して useApi フックを初期化します。 false パラメーターは、フックの初期化直後に API 呼び出しを実行すべきではないことを示します。

• API 呼び出しトリガー:

  • コンポーネントのマウント時に useEffect を使用してリクエスト関数を呼び出し、商品の最初のページを取得します。

• エラー処理:

  • 別の useEffect は、エラー状態の変化をリッスンします。エラーが発生した場合は、トースト通知をトリガーしてユーザーに通知します。

• 条件付きレンダリング:

  • 読み込み状態: API 呼び出しの進行中に読み込みメッセージを表示します。
  • エラー状態: API 呼び出しが失敗した場合にエラー メッセージを表示します。
  • データ レンダリング: データが正常に取得されると、画像、名前、価格を含む製品のグリッドがレンダリングされます。

この例は、一元的なエラー処理によってコンポーネント ロジックが簡素化され、一貫したユーザー フィードバックが保証される方法を示しています。

---

ベストプラクティス

ベスト プラクティスに従うことで、エラー処理システムが効率的で保守しやすく、使いやすいものになります。

関心事の分離

• 説明: サービス モジュールを使用して、API ロジックを UI コンポーネントから分離します。これにより、コードの構成と保守性が向上します。
• 例: コンポーネント内で API 呼び出しを直接行う代わりに、productService.js などのサービス モジュールに API 呼び出しを委任します。

一貫したエラーメッセージ

• 説明: すべてのエラーを均一に処理してデバッグを簡素化し、シームレスなユーザー エクスペリエンスを提供します。
• 例:customErrors.js で事前定義されたエラー メッセージを使用すると、エラーの発生場所に関係なく、ユーザーは一貫したフィードバックを受け取ることができます。

コードの繰り返しを避ける

• 説明: 集中エラー処理とカスタム フックを使用して、コンポーネント間で繰り返される try-catch ブロックを排除します。
• 例: useApi フックはエラー状態と通知を管理し、コンポーネントがデータのレンダリングのみに集中できるようにします。

意味のあるエラーメッセージ

• 説明: 理解を深め、フラストレーションを軽減するために、ユーザーフレンドリーで実用的なエラー メッセージを提供します。
• 例: 「エラーが発生しました」などの一般的なメッセージを表示する代わりに、「検証エラー: 有効な電子メール アドレスを入力してください。」などの特定のメッセージを使用します。

エッジケースの処理

• 説明: ネットワーク障害やサーバーエラーなどの予期せぬシナリオを予測して管理し、アプリケーションのクラッシュを防ぎます。
• 例: Axios インターセプターは、「ネットワーク エラー」トーストを表示し、アプリケーションの中断を防ぐことでネットワーク エラーを処理します。

安全なエラー処理

• 説明: エラー メッセージで機密情報を公開しないようにします。詳細なエラーをサーバーに安全に記録しながら、ユーザーフレンドリーなメッセージを提供します。
• 例: 開発者向けの Sentry などのログ サービスに詳細なエラー ログを送信しながら、一般的なエラー メッセージをユーザーに表示します。

---

さらに読む

次のリソースを使用して、このガイドで説明されている概念の理解を深めてください:

• Axios インターセプターのドキュメント: Axios インターセプターを使用してリクエストと応答をグローバルに処理する方法を学びます。
• React Hooks ドキュメント: 状態と副作用を管理するための React Hooks の基本を理解します。
• Redux Toolkit の概要: React アプリケーションで効率的な状態管理を行うために Redux Toolkit を使い始めましょう。
• React-Toastify ドキュメント: より良いユーザー フィードバックを得るためにトースト通知を実装する方法を説明します。

---

トラブルシューティング

1. トースト通知が表示されない

• 原因: あなたのアプリケーションには、react-toastify のコンポーネントが欠落している可能性があります。
• 解決策: を確認してください。メイン アプリケーション コンポーネント (通常は、pages/_app.js) に含まれています。

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

2. API リクエストがインターセプターによってキャッチされない

• 原因: サービス モジュールは、集中管理された axiosInstance ではなく、デフォルトの Axios ライブラリをインポートしている可能性があります。
• 解決策: すべてのサービス モジュールが集中型の axiosInstance をインポートしていることを確認します。

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. 特定のエラーでリダイレクトが機能しない

• 原因: next/router のルーターが正しくインポートされていないか、React コンポーネントの外部で使用されていない可能性があります。
• 解決策: Router がリダイレクトを実行できるコンテキストで Axios インターセプターが使用されていることを確認します。あるいは、useApi フック内またはコンポーネント内でリダイレクトを処理します。

---

環境構成

さまざまな環境を管理することで、開発、テスト、運用中にアプリケーションが適切な API エンドポイントと対話できるようになります。

ステップ 1: 環境変数を定義する

プロジェクトのルート ディレクトリに .env.local ファイルを作成し、API ベース URL を定義します。

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

ステップ 2: コードで環境変数にアクセスする

Axios インスタンスが環境変数を使用していることを確認してください:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

ベストプラクティス:

• 機密情報の保護: .env.local ファイルや機密環境変数をバージョン管理システムに決してコミットしないでください。これらのファイルを除外するには、.gitignore を使用します。
• 一貫した命名規則: 環境変数には明確で一貫した命名を使用します。通常、フロントエンドに公開されていることを示すために NEXT_PUBLIC_ というプレフィックスが付けられます。
• 環境ごとに個別の構成: 構成を効果的に管理するために、異なる環境 (.env.development、.env.production など) に個別の .env ファイルを維持します。

---

結論

一元的なエラー処理システムを構築することで、開発者のエクスペリエンスとユーザーの満足度の両方を向上させる、クリーンでモジュール式のユーザーフレンドリーな構造をセットアップすることができます。アプリのエラー管理を始めたばかりの場合でも、強化を検討している場合でも、このアプローチは、アプリケーションの成長に合わせて成長できる強固な基盤を提供します。

ここで説明する機能を試してみてください。基本から始めて、慣れてきたら拡張機能を追加してください。エラー処理への一元的なアプローチは、アプリケーションの規模が拡大するにつれて効果を発揮する貴重なスキルと実践です。

---

行動喚起

一元的なエラー処理で React/Next.js アプリケーションを強化する準備はできていますか?

このガイドで説明されている戦略を実装して、よりクリーンなコード、一貫したユーザー通知、および保守性の向上を体験してください。

フィードバックを共有する

質問、提案、経験を共有したいことがありますか?コメントを残すか、GitHub や Twitter に連絡して、コミュニティに参加してください。

今後の続報にご期待ください

私は、この集中エラー処理システムに基づいた npm パッケージの開発に取り組んでいます。最新情報をチェックしたり、価値のある機能を提案したりしてください!

コーディングを楽しんでください! ?✨

以上がAxios とカスタム フックを使用した堅牢なフロントエンド エラー処理システムの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。