프론트엔드
React Query와 함께하는 API 에러 처리 설계하기
두줄요약
React Query의 onError와 useApiError Hook으로 API 에러 처리 흐름을 중앙화했습니다. HTTP 상태·서비스 코드별 우선순위로 전역 규칙과 컴포넌트 예외를 함께 관리합니다.
문제 상황
- 레거시 프로젝트의 분산·중복된 API 에러 처리와 제각각의 Alert 메시지·스타일
- 필수 로직 누락과 개발자별 상이한 처리 방식으로 인한 흐름 파악·유지보수 부담
구조와 흐름
- React Query의
onError로 에러 감지 후 표준 응답·네트워크 에러 파싱 - HTTP Status와 서비스 표준 에러 Code 기반 상황별 처리 후 공통 로직 수행
- 공통 로직에 에러 로그 전송, 상황별 핸들러에 Alert 메시지 지정
해결 방법
useApiError커스텀 Hook에 에러 처리 흐름과 전역 기본 핸들러 집중- QueryClient 기본
onError와 개별useQuery·useMutation의onError에 동일한 핸들러 적용 - 컴포넌트에는 필요한 HTTP Status·서비스 Code별 재정의 핸들러만 전달
선택 이유
- 컴포넌트별 재정의 핸들러, 전역 코드 조합 핸들러, 전역 Status 핸들러, 기본 핸들러 순의 우선순위
- 전역 일관성과 컴포넌트별 예외 처리의 동시 확보
