[Front/React] react-error-boundary 라이브러리로 에러 처리하기

 

 

개발을 한 후에 미처 예상하지 못한 에러가 발생할 경우 '터진다'라 표현을 한다고 한다.

소프트웨어는 가변적이고 불규칙적이라서 100% 완벽하게 코드를 짰다고 해도

브라우저나 사용자의 접속환경에 따라서 에러가 나타날 수도 있다.

예측이 불가능하기 때문에 예상 못한 에러에 대해서도 처리를 해주어야 한다.

70%의 완벽한 코드와 30%의 에러 처리로 나누어진다고 한다.

 

Error Boundary

Error Boundary는 리액트에서 효과적으로 에러 처리를 할 수 있는 방법으로 React 16에서 도입된 개념이다.

에러가 발생하면서 유저는 화면이 멈추게 되거나 다른 동작들을 할 수가 없게 되는데

이는 UX 측면에서 굉장한 마이너스적 요소이다.

에러로 인해 컴포넌트가 실행되지 않는 경우들을 위해 다른 컴포넌트를 보여주는 것이 Error Boundary이다.

 

Error Boundary는 App.js에서 가장 상위 컴포넌트로 감싸주면 App 컴포넌트의 자식 컴포넌트에서 발생한 에러들을 모두 처리를 해준다. 만약 Error Boundary를 처리해주고 싶지 않다면 Error Boundary 외부에 위치하도록 하게 하면 된다.

 

기존의 Error Boundary는 getDerivedStateFromError()와 componentDidCatch()를 class 형태로 직접 정의를 해서 에러 처리를 했어야 했다. getDerivedStateFromError는 에러 발생 시 state를 변경하고 componentDidCatch는 에러가 발생할 때 실행되는 라이프사이클이다. 두 함수를 통해서 에러 처리가 가능하다.

Error Boundary는 비동기 함수, 이벤트 리스너, 서버사이드 렌더링, 에러 바운더리 자체에서 발생하는 에러들은 잡지 못한다는 단점이 있다. 이런 경우는 try/catch로 에러를 잡아야 한다.

 

---

react-error-boundary

리액트에서 에러를 보다 쉽게 처리할 수 있는 라이브러리가 나오게 되었고 그것이 바로 react-error-boundary이다.

라이브러리를 활용해 기존의 클래스형 함수를 직접 구현할 필요 없이 간편하게 에러 처리가 가능해졌다.

npm install react-error-boundary

 

다만 react-error-boundary도 동기적 에러로 비동기 에러는 잡는 것이 어려우나

componentDidCatch()와는 다르게 함수 형태이다.

---

 

react-error-boundary 형태

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

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <ExampleApplication />
</ErrorBoundary>

 

가장 기본적인 형태의 ErrorBoundary이다.

상위 컴포넌트에서 ErrorBoundary가 감싸주고 있다.

 

---

내가 프로젝트에서 생성한 Error Boundary

import { useNavigate } from "react-router-dom";
import { Container, Button } from 'react-bootstrap';


export default function ErrorFallBack ({ error, resetErrorBoundary }) {
    const navigate = useNavigate();

    const handleHomeClick = () => {
        navigate('/');
        resetErrorBoundary();
    }

    return (
      <>
        <Container className="d-flex justify-content-center align-items-center" style={{ height: "500px"}}>
            <div>
                <p>죄송합니다</p>
                <p>오류가 발생했습니다</p>
                <Button
                  variant="dark"
                  onClick={handleHomeClick}>
                    홈으로 돌아가기
                </Button>
                <Button
                  variant="dark"
                  onClick={resetErrorBoundary}>
                    이전 화면으로 돌아가기
                </Button>
            </div>
        </Container>
      </>
    );
  }

 

에러가 생겼을 때 보여주는 UI에서 버튼을 통해 현재 화면을 벗어날 수 있도록 했다.

 

 

 

참고자료

https://ko.legacy.reactjs.org/docs/error-boundaries.html

https://www.zerocho.com/category/React/post/60cebadecc6ccc0004c38295

https://velog.io/@apro_xo/React-Error-Boundary