導(dǎo)入

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

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

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

最後までに次のことを?qū)Wびます:

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

目次

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

---

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

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

反復(fù)的なエラーコード

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

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

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

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

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

---

基本的な実裝

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

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

ステップ 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);
  }
);

説明:

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

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

export default axiosInstance;

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

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

// 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 構(gòu)成

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

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

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

カスタム useApi フックの作成

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

パラメータ:

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

戻り値:

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

実裝：

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

説明：

• 狀態(tài)管理:
  • data: 応答データを格納します。
  • loading: API 呼び出しが進(jìn)行中かどうかを示します。
  • error: エラー メッセージをキャプチャします。
• リクエスト関數(shù):
  • API 呼び出しを開始します。
  • API 呼び出しの結(jié)果に基づいて狀態(tài)の更新を管理します。

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

さらに詳しく説明する前に、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 フックのリクエスト関數(shù)は、try-catch を使用してこれらの拒否を処理します。 apiFunc(...args) が拒否すると、catch ブロックがエラーをキャプチャし、それに応じてエラー狀態(tài)を更新します。

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

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

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

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

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

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

使用例:

// 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 呼び出しを管理します。ロード狀態(tài)を処理し、エラーをキャプチャし、フェッチしたデータをレンダリングのためにコンポーネントに提供します。

---

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

サービス モジュールは、エンティティ (ユーザー、製品など) ごとに編成された API エンドポイント関數(shù)を定義します。この構(gòu)造により、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',
  },
});

サービス モジュールの利點(diǎn):

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

---

高度な機(jī)能強(qiáng)化 (オプション)

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

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

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

実裝:

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 プロパティをチェックして、エラーの性質(zhì) (検証または認(rèn)証など) を判斷します。
• アクション可能なメッセージ: エラーの種類に基づいてユーザーに特定のエラー メッセージを提供し、ユーザーの理解と適切な対応能力を高めます。

リトライメカニズム

信頼性を高めるために、UI の再試行ボタンや指數(shù)バックオフによる自動(dòng)再試行など、失敗したリクエストの再試行オプションを?qū)g裝します。

実裝:

export default axiosInstance;

説明:

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

詳細(xì)な通知

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

実裝:

// 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;

説明:

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

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

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

実裝:

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

説明:

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

高度な機(jī)能強(qiáng)化の概要

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

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

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

---

點(diǎn)をつなぐ

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

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

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

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

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

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

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

useApi からの構(gòu)造化された応答:

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

---

視覚的な概要

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

1. コンポーネント

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

2. Api フックを使用する

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

3. サービスモジュール

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

4. Axios インスタンス

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

5. API レスポンス

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

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

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

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

---

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

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';

コンポーネントの內(nèi)訳:

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

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

• フックの初期化:

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

• API 呼び出しトリガー:

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

• エラー処理:

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

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

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

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

---

ベストプラクティス

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

関心事の分離

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

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

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

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

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

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

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

エッジケースの処理

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

安全なエラー処理

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

---

さらに読む

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

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

---

トラブルシューティング

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

• 原因: あなたのアプリケーションには、react-toastify のコンポーネントが欠落している可能性があります。
• 解決策: を確認(rèn)してください。メイン アプリケーション コンポーネント (通常は、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 をインポートしていることを確認(rèn)します。

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

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

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

---

環(huán)境構(gòu)成

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

ステップ 1: 環(huán)境変數(shù)を定義する

プロジェクトのルート ディレクトリに .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: コードで環(huán)境変數(shù)にアクセスする

Axios インスタンスが環(huán)境変數(shù)を使用していることを確認(rèn)してください:

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

ベストプラクティス:

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

---

結(jié)論

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

ここで説明する機(jī)能を試してみてください?；兢槭激幛啤Tれてきたら拡張機(jī)能を追加してください。エラー処理への一元的なアプローチは、アプリケーションの規(guī)模が拡大するにつれて効果を発揮する貴重なスキルと実踐です。

---

行動(dòng)喚起

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

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

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

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

今後の続報(bào)にご期待ください

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

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

以上がAxios とカスタム フックを使用した堅(jiān)牢なフロントエンド エラー処理システムの構(gòu)築の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。