에러 개선 처리

하니·2025년 2월 11일

React 길잡이

목록 보기

8/21

기존의 에러 처리는 axios interceptor의 reject callback으로 처리했다.

✔️ axios interceptor의 불편한 점

에러 화면을 보여주려면 라우터 이동으로 처리 or 해당 API를 호출하는 쪽의 코드에서 일일히 발생 여부를 판단하고 에러를 표시해야 한다.

history.push('/error');

전역 에러를 처리하는 것은 수월하나 화면의 일부만 에러 상태로 대응하는 것이 어렵다.부분적 에러 처리 즉, 인터셉터에서 예외로 처리하고 호출부에서 대응해야 한다.

Error Boundaries

React 16에서 도입된 에러 경계Error Boundaries를 활용하여 하위 컴포넌트 트리의 JS 에러를 포착하고 Fallback UI를 보여줄 수 있다.

에러 바운더리를 통해 선언적 에러 처리가 가능하다.

명령형/선언형 프로그래밍

명령형 프로그래밍 : HOW 원하는 결과를 달성해 나가는 과정에 관심을 두는 프로그래밍
선언형 프로그래밍 : WHAT 무엇을 기술하는 데에 방점을 두고 구조를 세워나가는 프로그래밍

명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는 데 반해, 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는 것

🎯 쉽게 비유하면?
명령형: "컵라면을 끓이려면 물을 몇 ml 넣고, 몇 분간 끓이고, 스프를 넣고…" (순서를 하나하나 지시)
선언형: "컵라면이 필요해!" (컵라면 제조 기계가 알아서 해줌)

즉, 선언형은 원하는 결과만 말하면, 내부 동작은 신경 안 써도 되는 방식이다.
ex) 내장형 함수

명령형/선연형 에러 처리

명령형 에러 처리는 어떻게 화면에 에러를 보여줄지에 집중하여 코드를 작성할 수 있다.
선언형 에러 처리는 무엇을 보여줄지를 코드를 통해 결정할 수 있다.

React는 기본적으로 선언형으로 무엇을 렌더링 할지 나타내고 있다.

react-query와 Error Boundaries

React의 Error Boundaries는 본래 이벤트 핸들러 내부에서는 에러를 포착하지 않는다. 그래서 함수에서 API를 호출했을 때 오류가 발생하더라도 이를 Error Boundaries로 전송하지 않는다.
➡️ react-query에서는 useErrorBoundary 옵션을 제공하여, API에서 에러가 발생하면 이를 Error Boundaries가 캐치할 수 있다.

선언적 에러 처리 적용

axios interceptor 코드 줄이기

인터셉터에서 글로벌하게 처리하고 있었던 에러 처리를 네트워크에 대한 지연 처리 외에는 어떠한 에러도 핸들링하지 않고, 에러 바운더리로 위임한다.

Error Boundaries의 관심사 분리

중첩 구성

<RootErrorBoundary> : Frontend Error 처리
<ApiErrorBoundary> : api에서 발생하는 Error 처리

Fallback Component 작성

fallback 컴포넌트 내에서 처리할 에러가 아니라면 다시 throw를 해서 상위 에러 바운더리로 위임하는 것도 가능하다.

Sentry와 같은 에러 모니터링 서비스에 에러 데이터 전송 가능

Local (Block) Error Boundaries

✔️ 에러를 상위로 전파시키지 X고, 부분적으로 처리할 수 있는 점이 Error Boundary의 장점이다.

❗️ 공통 에러 처리가 필요한 경우
root 레벨에서 처리해야 하는 에러는 상위 에러 바운더리로 전파하도록 예외처리가 필요하다.
ex) iOSdptj unload event가 발생하면 axios에서 호출 중이던 API에서 Network Error가 발생한다. 이때 발생한 에러는 Error Boundaries가 포착하면 안되고, 인터셉터에서 네트워크 에러로 인식되는 에러가 발생한 경우 에러 처리를 200ms 정도 지연시키면 오류 화면이 보여지기 전에 앱이 unload 된다.

에러 처리 개선 후 장점/단점

비즈니스 로직에 집중한 에러 처리가 가능하다.
UI 일부에서 발생하는 에러를 전역으로 전파시키지 X고 처리할 수 있다.
선언적 에러 처리를 고민해야 하는 부분 : 전역에서 처리되어야 하는 에러를 구분해야 한다.
ex) PayAxiosError가 아니라면 상위 Error Boundaries로 위임, ApiErrorBoundary에서 처리해야 하는 에러라면 위임