KakaoPage Reveals Asynchronous Error Handling Strategy Using React Error Boundaries

KakaoPage Web revealed a declarative approach to handling asynchronous API call errors using Error Boundaries, introduced in React 16. Previously, errors were branched via Redux state management, but this strategy was adopted to resolve issues where unexpected runtime errors caused the entire page to unmount.

Dual Error Boundary Structure

Error handling consists of two stages: ApiErrorBoundary and GlobalErrorBoundary.

• ApiErrorBoundary: Positioned above each Fetcher component to limit handling to API errors within specific areas. Unhandled errors are rethrown to the parent boundary.
• GlobalErrorBoundary: Catches errors affecting the entire page, such as server maintenance or network failures, at the root level.

Custom-Developed Fetcher Component

KakaoPage could not directly apply Suspense from React 18 due to using Next.js version 12. Consequently, they developed a custom Fetcher component inspired by the concept of declarative data fetching in Suspense. This component manages API call states and simply throws an error object when an error occurs, delegating actual UI handling to the Error Boundary.

Improved User Experience

When an error occurs, an error component is displayed only in the affected area, while the rest of the page renders normally. Users can remount the Fetcher for that area via the 'Retry' button on the error screen to re-invoke the API. This provides a flexible user experience that recovers specific sections without reloading the entire page.