効果的なエラー処理は、シームレスなユーザー エクスペリエンスを提供し、クリーンでスケーラブルなコードを維持するために非常に重要です。複雑なアプリケーションでは、コンポーネント間でエラーを手動で管理すると、コードが乱雑で一貫性のないものになることがよくあります。このガイドでは、Axios、カスタム フック (useApi)、およびモジュール式サービス レイヤーを使用して、React でモジュール式でスケーラブルな一元化されたエラー処理システムを構築し、使いやすく、整理された、効率的な構造を作成する方法を説明します。
電子商取引プラットフォームを構築していると想像してください。複数のコンポーネントがさまざまな API からデータを取得しますが、ネットワークの問題、サーバー エラー、無効なユーザー入力など、それぞれがさまざまな理由で失敗する可能性があります。一元化されたエラー処理システムがないと、コードは繰り返しのエラー チェックによって乱雑になり、ユーザーは一貫性のないフィードバックを受け取ります。このプロセスを効率化し、信頼性とシームレスなユーザー エクスペリエンスを確保するにはどうすればよいでしょうか?このガイドではその方法を説明します。
最後までに次のことを学びます:
一元的なエラー処理により、次の 2 つの一般的な課題に対処できます。
Axios インターセプター、カスタム フック (useApi)、およびサービス モジュールによる集中型アプローチを使用すると、次のようにしてこれらの問題を解決できます。
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);
}
);
説明:
ステップ 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 インターセプターをセットアップすると、次のことが可能になります:
この一元化された Axios インスタンスは、アプリケーション全体にわたるすべての API リクエストとエラー処理の一貫した管理を保証する、信頼性が高くユーザーフレンドリーな API 通信層を構築するための鍵となります。
useApi フックは、API リクエストの処理、読み込み、データ、エラー状態の管理を一元化します。 useApi はこのプロセスを抽象化することで、コンポーネントが try-catch ブロックの繰り返しを回避し、データのプレゼンテーションに集中できるようにします。
// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';
さらに詳しく説明する前に、JavaScript の Promise と Promise Rejection を理解することが重要です。これは、API 呼び出しなどの非同期操作を処理する際に重要な役割を果たすためです。
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',
},
});
エラー処理システムをさらに進化させる準備ができている場合は、次の高度なテクニックの実装を検討してください。
エラー (ネットワーク対検証など) を分類し、ユーザーが問題と考えられる解決策を理解するのに役立つ実用的なメッセージを提供します。
実装:
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);
}
);
説明:
信頼性を高めるために、UI の再試行ボタンや指数バックオフによる自動再試行など、失敗したリクエストの再試行オプションを実装します。
実装:
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 キャンセル トークンを使用して、コンポーネントがアンマウントされた場合に進行中のリクエストをキャンセルしてメモリ リークを防ぎます。
実装:
// 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 呼び出しを開始すると、次のフローがトリガーされます:
各サービス モジュール (userService、productService など) は、特定の API エンドポイントの関数を定義し、設定された axiosInstance を使用します。コンポーネントは、これらのサービス関数とのみ対話します。
コンポーネントはサービス関数 (productService.getProducts など) を useApi に渡します。リクエストが呼び出されると、useApi は関数をサービスに転送し、サービスは axiosInstance を通じて HTTP リクエストを作成します。
axiosInstance のインターセプターは、エラー ログを処理し、事前定義されたカスタム エラー メッセージを解析し、エラー処理を一元化します。
useApi は構造化された状態 (データ、読み込み、エラー) をコンポーネントに返し、コンポーネントはデータの表示とインタラクションの処理だけに集中できるようになります。
次の概要は、最初の API 呼び出しからユーザー フィードバックまで、エラー処理システムの各コンポーネントがアプリケーション内でどのように対話するかを説明します。
コンポーネント
Api フックを使用する
サービスモジュール
Axios インスタンス
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';
インポートステートメント:
フックの初期化:
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 エンドポイントと対話できるようになります。
プロジェクトのルート ディレクトリに .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);
}
);
Axios インスタンスが環境変数を使用していることを確認してください:
// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';
一元的なエラー処理システムを構築することで、開発者のエクスペリエンスとユーザーの満足度の両方を向上させる、クリーンでモジュール式のユーザーフレンドリーな構造をセットアップすることができます。アプリのエラー管理を始めたばかりの場合でも、強化を検討している場合でも、このアプローチは、アプリケーションの成長に合わせて成長できる強固な基盤を提供します。
ここで説明する機能を試してみてください。基本から始めて、慣れてきたら拡張機能を追加してください。エラー処理への一元的なアプローチは、アプリケーションの規模が拡大するにつれて効果を発揮する貴重なスキルと実践です。
このガイドで説明されている戦略を実装して、よりクリーンなコード、一貫したユーザー通知、および保守性の向上を体験してください。
質問、提案、経験を共有したいことがありますか?コメントを残すか、GitHub や Twitter に連絡して、コミュニティに参加してください。
私は、この集中エラー処理システムに基づいた npm パッケージの開発に取り組んでいます。最新情報をチェックしたり、価値のある機能を提案したりしてください!
コーディングを楽しんでください! ?✨
以上がAxios とカスタム フックを使用した堅牢なフロントエンド エラー処理システムの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
