[React] ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법

📒 리액트에서의 에러 핸들링

---

리액트의 한 컴포넌트에서 에러가 발생했을 때 적절한 에러 핸들링을 하지 않는다면

애플리케이션 전체가 중단될 수 있습니다.

 

저는 평소 API 호출 로직에 try - catch 를 이용해 구구절절 명령형으로 에러를 처리하곤 했습니다.

 

이와 같은 방식은 한 컴포넌트 안에 에러가 발생했을 경우, 에러가 발생하지 않았을 경우,

두 가지 조건에 대한 로직이 섞여 코드 라인 수가 길어지고 가독성을 저해합니다.

 

또한 에러 핸들링에 대한 명확한 기준이 없다면 개발자마다 다른 에러 핸들링으로 코드의 통일성을 잃어버릴 수 있습니다.

<ErrorBoundary fallback={ <p>에러 발생</p> }>
    <Component />
</ErrorBoundary>

하지만 위와 같이 ErrorBoundary를 이용해 선언적으로 에러 핸들링을 하게 되면

에러 핸들링에 관한 모든 권한을 위임하게 되어

하위 컴포넌트에서는 에러 발생에 대한 로직을 배제할 수 있게 됩니다.

 

그럼 ErrorBoundary에 대해 알아보겠습니다.

 

 

📌 ErrorBoundary

<GlobalErrorBoundary fallback={ <p>에러 발생</p> }>
  <FetchErrorBoundary fallback={ <p>에러 발생</p> }>
    <Component />
  </FetchErrorBoundary>
</GlobalErrorBoundary>

React 16 버전부터 Error Boundary 개념이 도입되었습니다.

 

컴포넌트에 에러를 처리하는 경계를 둘러 컴포넌트에서 뱉은 에러를 ErrorBoundary에서 처리하고,
로딩 상태에 대한 fallback UI를 대체해서 보여주는 Suspense처럼
에러 상태에 대한 fallback UI를 보여줄 수 있습니다.

 

이러한 경계를 계층별로 나눠 에러 유형에 따라

적절하게 ErrorBoundary를 배치하면 효율적인 에러 핸들링이 가능합니다.

---

📌 컴포넌트

에러 경계(Error Boundaries) – React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    // 컴포넌트의 초기 상태 설정
    this.state = { hasError: false };
  }

  // 에러가 발생했을 때 호출되는 메서드
  static getDerivedStateFromError(error) {
    // 상태를 업데이트하여 에러 발생 여부를 표시
    return { hasError: true };
  }

  // componentDidCatch()는 에러가 발생한 후 호출되는 메서드
  componentDidCatch(error, errorInfo) {
    // 에러 정보와 함께 서비스에 에러 로그를 기록하는 함수 호출
    logErrorToMyService(error, errorInfo);
  }

  render() {
    // 에러가 발생한 경우 에러 메시지를 표시
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    // 아니면 자식 컴포넌트를 렌더링
    return this.props.children;
  }
}

위 코드는 공식 문서에서 발췌한 ErrorBoundary 컴포넌트 코드입니다.

 

클래스형 컴포넌트의 강력한 라이프 사이클 기능으로 에러를 감지할 수 있기 때문에
함수형으로는 사용할 수 없는 게 특징입니다.

 

여기서 주의 깊게 봐야 할 함수는 다음과 같습니다.

---

🔎 static getDerivedStateFromError(error)

• 이 메서드는 하위 컴포넌트에서 발생한 에러를 감지하고, 상태 업데이트를 통해 에러 발생 여부를 컴포넌트 상태에 반영합니다.
• 이 함수는 커밋 단계에서 호출되기 때문에 사이드 이펙트가 발생되는 작업은 지양해야 합니다.
• 에러가 발생하면 이 메서드가 호출되어 hasError 상태를 true로 변경합니다.

---

🔎 componentDidCatch(error, errorInfo)

• 컴포넌트에서 발생한 에러를 캐치하고 처리하는 역할을 합니다.
• 이 함수는 커밋 단계에서 호출되며, 주로 사이드 이펙트가 발생되는 작업을 처리합니다.
• 에러 발생 시 호출되며, error 매개변수로 발생한 에러 객체,
  errorInfo 매개변수로 에러 정보를 전달받습니다.
• 일반적으로 여기에서는 에러를 로깅하거나 서비스에 에러 정보를 보고하는 로직을 구현합니다.

---

📌 react-error-boundary

$ npm install react-error-boundary

위에서 소개한 코드에 추가적인 기능을 붙여 사용할 수 있지만
함수형 컴포넌트에서 편리하게 사용할 수 있는 라이브러리를 소개합니다.

---

🔎 fallback

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<p>에러 발생</p>}>
  <Component />
</ErrorBoundary>

기본적인 fallback UI로 대체하는 사용방법은 위에서 설명한 것과 거의 동일합니다.

---

🔎 FallbackComponent

export const App = () => {
  return ( 
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Component />
    </ErrorBoundary>
  )
}

export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
  if(클라이언트 에러) return ...
  if(서버 에러) return ...
  if(토큰 에러) return ...
};

FallbackComponent 속성은 error와 resetErrorBoundary 두 개의 프로퍼티를 받습니다.

 

error는 발생한 에러 객체이고, resetErrorBoundary는 에러 처리를 재시도할 때 사용하는 함수입니다.

 

이 속성을 이용한 컴포넌트를 통해 에러 객체를 받아

에러 유형별로 fallback UI를 선택적으로 표시할 수 있게 되며
에러 처리에 관한 로직을 일괄적으로 관리할 수 있게 됩니다.

---

📌 API 호출 재시도

모종의 이유로 API 호출을 실패했을 때 FallbackComponent 속성의 resetErrorBoundary를 통해

재호출 하는 기능을 구현해보고 싶었습니다.

export const App = () => {
  return ( 
    <ErrorBoundary onReset={()=>{}} FallbackComponent={ErrorFallback}>
      <Component />
    </ErrorBoundary>
  )
}

export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
  return (
    <div>
      <p>{error.toString()}</p>
      <p>오류가 발생했습니다.</p>
      <p>재시도 해주세요.</p>
      <button onClick={resetErrorBoundary}>재시도</button>
    </div>
  );
};

이 기능을 위해선 ErrorBoundary의 onReset 부분에 API 호출을 담당하는 함수를 넣은 후
fallback 컴포넌트에서 이벤트 처리를 해주어야 합니다.

 

여기에 일반적인 API 호출 함수를 넣어주어도 되지만

react-query에서 기가 막힌 컴포넌트를 제공하고 있었습니다.

---

🔎 QueryErrorResetBoundary

<QueryErrorResetBoundary>
  {({ reset }) => 
      <ErrorBoundary onReset={reset} FallbackComponent={ErrorFallback}>
        {children}
      </ErrorBoundary>
    )
  }
</QueryErrorResetBoundary>

// or

const { reset } = useQueryErrorResetBoundary();

<ErrorBoundary onReset={reset} FallbackComponent={ErrorFallback}>
  {children}
</ErrorBoundary>

react-query 라이브러리와 관련된 컴포넌트이며, 에러 처리와 관련된 역할을 합니다.

 

이 컴포넌트는 react-query의 Query 컴포넌트와 함께 사용되어

하위 쿼리에서 발생한 에러를 알아서 재설정하고 관리하는데 도움을 줍니다.

 

query를 재설정하는 reset 함수를 ErrorBoundary와 함께 사용한다면

재사용과 API 재호출이 가능한 컴포넌트를 만들 수 있습니다.

---

📌 Suspense + ErrorBoundary

로딩 상태를 선언적으로 처리해 주는 Suspense와
에러 상태를 선언적으로 처리해주는 ErrorBoundary는
특정 상태에 대한 대체 UI를 표시해 준다는 공통점이 있습니다.

 

또한 사용하는 방법도 비슷하기 때문에 둘을 합쳐 (로딩 - 에러) 상태를

통합적이고 선언적으로 처리해 주는 컴포넌트를 만들 수 있을 것 같았습니다.

 

만드는 방법은 정말 간단하게도 다음과 같이 Suspense만 추가해 주면 됩니다.

export const SuspenseAndErrorBoundary = ({
  children
}: {
  children: React.ReactNode;
}) => {
  const { reset } = useQueryErrorResetBoundary();
  return (
    <ErrorBoundary onReset={reset} FallbackComponent={ErrorFallback}>
      <Suspense fallback={<Loading />}>{children}</Suspense>
    </ErrorBoundary>
  );
};

export const FetchComponent = ({ queryKey }: { queryKey: number }) => {
  const { data } = useQuery(["data", queryKey], () => getFetchData(queryKey), {
    suspense: true,
    useErrorBoundary: true, // suspense이 true일 경우 default로 true
    retry: false,
    refetchOnWindowFocus: false
  });
  return (
    <div>
      <div>ID : {data.id}</div>
      <div>Title : {data.title}</div>
    </div>
  );
};

export default function App() {
  return (
    <RootContainer>
      {[...Array(10)].map((_, idx) => {
        return (
          <Card key={idx}>
            <SuspenseAndErrorBoundary>
              <FetchComponent queryKey={idx} />
            </SuspenseAndErrorBoundary>
          </Card>
        );
      })}
    </RootContainer>
  );
}

모든 기능을 통합한 예제는 다음과 같습니다.

 

API 호출 시 1/4 확률로 에러를 발생시키고, 이를 재호출 할 수 있도록 만들었습니다.

 

개발서버에서 동작하는 예제기 때문에 표시되는 error overlay는 무시하고 실행하면 됩니다.

 

실제 업무에서는 다양한 조건에 대응해 상황에 맞게

Props를 추가해서 사용하면 너무나 편리할 것 같다는 생각을 합니다.

 

📌 프로젝트에 도입하기 위해서

ErrorBoundary를 실제 프로젝트에 도입하기 위해서는 더 다양하고 어려운 문제들까지 함께 고려해야 합니다.

더 관심이 있으시다면 다음 글을 참고해주세요.

ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드

[React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드

Suspense을 사용해 선언적으로 로딩 화면 구현하기

[React] Suspense을 사용해 선언적으로 로딩 화면 구현하기