리액트 쿼리로 에러 처리

현재 프로젝트에서는 대부분의 통신에 React Query를 사용하고 있다. 리액트 쿼리 적용 후 요청의 상태(성공/실패/로딩)에 따라 어떤 행동을 하라고 지정하기 쉬워져서 삶의 질이 달라진 기분이었다.

useMutation(fetch 함수, {
        onSuccess: () => {
            // 성공 시 원하는 동작
        },
        onError: (error) => {
            // 실패 시 원하는 동작
        },

덕분에 특정 요청에 에러가 발생했을 때 해당 에러를 처리하는 것은 할 수 있었지만, 작업하다보면 개발자가 예상하지 못한 에러가 발생한다.

이번 프로젝트에서도 특정 버튼이 기능이 구현되기 전에 버튼을 누르면, 에러가 발생하면서 하얀 화면만 뜨는 오류가 있었다. 이를 보면서 내(개발자)가 예상하지 못한 에러가 발생했는데 이를 사용자가 보게 되면 어떻게 하지?라는 고민이 시작되었다.

에러 바운더리

이를 해결하기 위해 Error Boundary를 적용하게 되었다.
에러 바운더리는 리액트 16버전부터 지원하게 된 개념으로 에러 바운더리 태그로 감싼 하위 컴포넌트에서 발생한 에러들을 잡아 처리할 수 있도록 한다.

기존 error boundary는 클래스형으로 구현되어 있어서 보다 익숙한 형태인 함수형으로 사용할 수 있도록 라이브러리(react-error-boundary)를 사용했다.

이 에러 바운더리를 모든 라우트를 감싸는 최상단에 배치하여 고민을 해결해보았다.

<ErrorBoundary
  FallbackComponent={ErrorPage}
  onReset={() => {
    window.location.reload();
  }}
>
  <Routes>
  ...
  </Routes>
</ErrorBoundary>

• FallbackComponent는 에러가 발생했을 때 보여줄 화면(컴포넌트)를 지정하는 것이다. 미리 에러 페이지를 만들어 지정해두었다.
• onReset은 에러가 리셋될 때 사용할 함수를 설정한다.

Error page가 잘 연결되었나 확인해보기 위해 아무 에러나 발생시켜 보면

이와 같이 미리 구현해둔 에러 페이지가 그려진다.

리액트 쿼리와 에러 바운더리

리액트 쿼리에서 요청이 실패했을 때에도 에러 처리가 이루어지고, 발생한 에러가 에러 바운더리에서도 받아와져서 에러 처리가 이루어지면 동일한 에러를 서로 다른 두 방식으로 처리하게 될까?

다행히도 리액트 쿼리에서 에러 바운더리의 존재를 염두에 두고 동작을 한다. 따라서 useErrorBoundary 속성을 true / false로 설정하느냐에 따라 상위에 있는 에러 바운더리가 에러 처리를 하도록 허용하는지 여부를 결정할 수 있다.