카카오페이지, React Error Boundary 활용 비동기 에러 처리 전략 공개

카카오페이지 웹은 React 16에서 도입된 Error Boundary를 활용해 비동기 API 호출 에러를 선언적으로 처리하는 방식을 공개했다. 기존에는 Redux 상태 관리로 에러를 분기했으나, 예상치 못한 런타임 에러로 인해 페이지 전체가 마운트 해제되는 문제를 해결하기 위해 이 전략을 채택했다.

이중 Error Boundary 구조

에러 처리는 ApiErrorBoundary와 GlobalErrorBoundary 두 단계로 구성된다.

• ApiErrorBoundary: 각 Fetcher 컴포넌트 위에 위치하여 특정 영역의 API 에러만 제한적으로 처리한다. 처리 불가능한 에러는 상위 바운더리로 rethrow한다.
• GlobalErrorBoundary: 루트 레벨에서 서버 점검이나 네트워크 오류 등 페이지 전체에 영향을 주는 에러를 최종적으로 잡는다.

자체 개발한 Fetcher 컴포넌트

카카오페이지는 Next.js 12 버전 사용으로 React 18의 Suspense를 직접 적용할 수 없는 상황이었다. 이에 따라 Suspense의 선언적 데이터 페칭 개념을 참고해 자체 Fetcher 컴포넌트를 개발했다. 이 컴포넌트는 API 호출 상태를 관리하며 에러 발생 시 단순히 에러 객체를 throw하는 역할만 수행하고, 실제 UI 처리는 Error Boundary에 위임한다.

사용자 경험 개선

에러 발생 시 해당 영역에만 에러 컴포넌트를 노출하고, 나머지 영역은 정상적으로 렌더링한다. 사용자는 에러 화면의 '다시 시도' 버튼을 통해 해당 영역의 Fetcher를 리마운트하여 API를 재호출할 수 있다. 이를 통해 전체 페이지 리로드 없이 특정 섹션만 복구하는 유연한 사용자 경험을 제공한다.