[React] Error Handling (ErrorBoundary)

이애진·2022년 7월 20일

목록 보기

4/28

1. 배경

react 16 버전부터 도입된 개념이다
자식 컴포넌트 트리에서 에러가 발생하면 해당 컴포넌트 트리를 깨지는 대신, 이러한 에러의 로그를 남기고 잡아내서 Fallback UI를 보여주는 React 컴포넌트이다
쉽게 말해서 리액트에서는 예외 발생 시 모든 컴포넌트가 언마운트 상태로 바뀌기 때문에 이는 사용자에게 나쁜 경험을 제공하게 되며 이를 해결하기 위해 등장한 것이 Error Boundary이다

2. How To Use

2.1) install library

npm install react-error-boundary

함수형 컴포넌트에서는 라이브러리를 사용하여 구현해야하며 클래스형 컴포넌트에서는 설치할 필요가 없다

기본적인 구조는 아래와 같다

<ErrorBoundary>
  <SomeComponent />
</ErrorBoundary>

만약 SomeComponent에서 예외가 발생하면 ErrorBoundary에 의해 catch가 된다

2.2) Code

// ErrorBoundaryExample.tsx

import { useEffect, useState } from "react";

const throwError = () => {
    throw new Error("Something Broken");
}

export default function ErrorBoundaryExample() {
  const [error, setError] = useState(false);

  const throwErrorInRender = () => setError(true);

  useEffect(() => {
    if (error) throwError();
  }, [error]);

  return (
    <div>
       <button onClick={throwErrorInRender}>에러 만들기</button>
    </div>
  );
}

버튼을 누르면 예외가 발생하도록 하게 하는 컴포넌트이다

// Fallback.tsx
import { FallbackProps } from "react-error-boundary";

export default function Fallback({error, resetErrorBoundary}: FallbackProps ) {
  return (
    <div>
      <h1>An error occurred: {error.message}</h1>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

예외가 발생한다면 보여줄 Fallback UI에 대한 컴포넌트이다
fallback 컴포넌트는 prop으로 error, resetErrorBoundary를 받는데 error는 에러 정보가 담겨있고, resetErrorBoundary는 실행 시 에러를 초기화 시킨다

import { ErrorBoundary } from "react-error-boundary";
import ErrorBoundaryExample from "./components/ErrorBoundaryExample";
import Fallback from "./components/Fallback";

export default function App() {
  return (
    <ErrorBoundary FallbackComponent={Fallback}>
      <Suspense fallback={<div>Loading...</div>}>
        <ErrorBoundaryExample />
      </Suspense>
    </ErrorBoundary>
  );
}