Error Boundaries

Error Boundary

UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시키면 안된다.

그래서 React 16에서는 에러 경계라는 새로운 개념이 도입되었다.

에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트이다.

생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다.

다음과 같은 에러는 잡아주지 않는다.

• 이벤트 핸들러
• 비동기적 코드
• 서버 사이드 렌더링
• 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

react-error-boundary

React 공식문서에는 class형 컴포넌트를 사용한 예시만 있다.

에러 바운더리 컴포넌트를 생성할 수도 있지만 간단하게 구현이 가능한 react-error-boundary라는 라이브러리를 사용할 수도 있다.

에러 바운더리가 감지하지 못하는 에러는 try/catch문 등을 사용하여 직접 핸들링해야 하는데 이를 쉽게 해주는 useErrorHandler 기능을 제공한다.

설치

npm install --save react-error-boundary

예제 코드

function App() {
  return (
    <ErrorBoundary FallbackComponent={Error}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/add" element={<Add />} />
        <Route path="/signin" element={<Signin />} />
        <Route path="/book:id" element={<Detail />} />
        <Route path="/edit:id" element={<Edit />} />
        <Route element={<NotFound />} />
      </Routes>
    </ErrorBoundary>
  )
}

먼저 ErrorBoundary 컴포넌트로 에러 바운더리를 설정한 컴포넌트를 감싸준 후 FallbackComponent 속성에 생성한 컴포넌트를 전당한다.

fallback 컴포넌트는 prop으로 error, resetErrirBoundary를 받게 되는데, 에러가 발생했을 때 error에는 에러 정보가 담겨있고, resetErrorBoundary는 실행 시 에러를 초기화 시킨다.