프론트엔드
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
두줄요약
Fetcher가 API 오류를 throw하고 지역·전역 Error Boundary가 이를 계층적으로 처리하는 방식을 소개했습니다.\n오류 영역별 폴백 UI와 재시도 기능으로 나머지 콘텐츠를 유지하는 사용자 경험을 구현했습니다.
문제 상황
- API 오류와 렌더링 중 런타임 오류 발생 시 개별 컴포넌트의 분기 처리 및 빈 화면 위험
- 서버 점검·네트워크 오류의 공통 처리와 오류 영역별 재시도 요구
해결 방법
- Fetcher에서 API 오류를 즉시 throw하고 Error Boundary에 오류 처리 책임 위임
- 폴백 UI의 다시 시도 버튼으로 오류 상태 해제 후 Fetcher 재마운트 및 API 재호출
구조와 흐름
- Fetcher 단위의 ApiErrorBoundary로 제한된 영역의 API 오류 처리
- 처리 불가 오류는 rethrow하여 루트의 GlobalErrorBoundary에서 전역 오류 화면 제공
- 비동기 호출 상태를 관리하는 Fetcher와 선언적 오류 처리를 결합한 구성
적용해볼 점
- 오류 영향 범위에 따라 지역 Error Boundary와 전역 Error Boundary 분리
- 오류가 난 영역만 대체 UI로 전환해 나머지 콘텐츠의 접근성 유지
