효과적인 오류 처리는 원활한 사용자 경험을 제공하고 깔끔하고 확장 가능한 코드를 유지하는 데 중요합니다. 복잡한 애플리케이션에서 구성 요소 전체에 걸쳐 오류를 수동으로 관리하면 코드가 복잡해지고 일관되지 않는 경우가 많습니다. 이 가이드에서는 사용자 친화적이고 체계적이며 효율적인 구조를 만들기 위해 Axios, 맞춤형 후크(useApi) 및 모듈식 서비스 레이어를 사용하여 React에서 모듈식, 확장 가능 및 중앙 집중식 오류 처리 시스템을 구축하는 방법을 보여줍니다.
전자상거래 플랫폼을 구축하고 있다고 상상해 보세요. 여러 구성 요소가 다양한 API에서 데이터를 가져오며 각 구성 요소는 네트워크 문제, 서버 오류, 잘못된 사용자 입력 등 다양한 이유로 실패할 수 있습니다. 중앙 집중식 오류 처리 시스템이 없으면 반복적인 오류 확인으로 인해 코드가 복잡해지고 사용자는 일관되지 않은 피드백을 받게 됩니다. 안정성과 원활한 사용자 경험을 보장하기 위해 이 프로세스를 어떻게 간소화할 수 있습니까? 이 가이드에서는 방법을 알려드립니다.
마지막에 다음 내용을 배우게 됩니다.
중앙 집중식 오류 처리는 두 가지 일반적인 과제를 해결합니다.
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의 약속과 약속 거부를 이해하는 것이 중요합니다. JavaScript는 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를 사용합니다. 구성 요소는 이러한 서비스 기능과만 상호 작용합니다.
구성요소는 useApi에 서비스 기능(예: productService.getProducts)을 전달합니다. 요청이 호출되면 useApi는 함수를 서비스에 전달한 다음 axiosInstance를 통해 HTTP 요청을 수행합니다.
axiosInstance의 인터셉터는 오류 로깅을 처리하고 사전 정의된 사용자 정의 오류 메시지를 구문 분석하며 오류 처리를 중앙 집중화합니다.
useApi는 구조화된 상태(데이터, 로드 및 오류)를 구성 요소에 반환하므로 데이터 표시 및 상호 작용 처리에만 집중할 수 있습니다.
다음 개요에서는 초기 API 호출부터 사용자 피드백까지 오류 처리 시스템의 각 구성 요소가 애플리케이션 내에서 상호 작용하는 방식을 설명합니다.
구성요소
Api Hook 사용
서비스 모듈
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
