React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
프론트엔드
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
두줄요약
React Error Boundary로 렌더링 에러와 API 에러를 선언적으로 처리하는 구조를 소개했습니다. 제한된 범위의 ApiErrorBoundary와 전역 GlobalErrorBoundary로 재시도 UX까지 구성했습니다.
핵심 내용
- React 16의 Error Boundary로 렌더링 중 발생한 에러를 선언적으로 처리하는 방식 소개
- 카카오페이지 웹에서 Fetcher 컴포넌트가 API 상태를 관리하고, 에러 발생 시 throw하여 Error Boundary가 에러 UI를 담당하는 구조
- 제한된 영역의 ApiErrorBoundary와 루트의 GlobalErrorBoundary를 나눠 공통 에러, 페이지 전체 에러, 재시도 동작을 분리
- 에러 영역을 리셋해 Fetcher를 재마운트하고 API 재호출로 다시 시도 가능하게 구성