[React] Error Boundary

🎈 Error Boundary 란?

리액트에서 에러가 발생하면 빈 화면이 나타난다.
Error Boundary 를 사용하면 에러 발생 시 보여줄 Fallback Component를 지정할 수 있다.

🎈 사용하기

함수형 컴포넌트에서 사용하기 위해서는 별도의 패키치 설치가 필요하다.

npm install react-error-boundary

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

const App = () => {
  ...
  
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <ChildComponent />
    </ErrorBoundary>
  )
}

const ErrorFallback = ( { error } ) => {
  return <div>{error.message}</div>
}

...

error 객체의 error.message, error.response.status 등을 이용해서 에러 유형을 판단하고 거기에 맞는 컴포넌트를 보여줄 수 있다.

🎈 useErrorHandler

에러 바운더리는 이벤트 핸들러 에러, 비동기 에러를 캐치하지 못한다.
이러한 에러들은 react-error-boundary 의 useErrorHandler 를 이용해서 try-catch 로 처리하면 에러 바운더리에서 캐치된다.

/* <ErrorBoundary> 로 감싸진 하위 컴포넌트 */

import { useErrorHandler } from 'react-error-boundary';
...

const ChildComponent = () => {
  const Errorhandler = useErrorHandler();
  
  ...
  
  /* 비동기 로직에서 */
  try {
    // 비동기 처리
  }
  catch(error) {
    Errorhandler(error);
  }
  
  ...
  
}

🎈 참고

Error Boundary(에러 바운더리)