React 16 :: Error Boundary

import React from "react";

const ErrorBoundary = (ProtectedComponent: React.ComponentType) => {

  return class Boundary extends React.Component {

    state = {

      hasError: false,

    };

    static getDerivedStateFromError(error: Error) {

      return { hasError: true };

    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {

      this.setState({

        hasError: true,

      });

    }

    render(): React.ReactNode {

      const { hasError } = this.state;

      if (hasError) {

        return <h1>에러가 보이네. 확인해줄께.</h1>;

      } else {

        return <ProtectedComponent />;

      }

    }

  };

};

export default ErrorBoundary;

리액트 16버전에서 도입된 에러 바운더리는 크게 getDerivedStateFromError와 componentDidCatch를 통해서 에러를 잡아내는 방식이다. 코드를 보면 간단하게 class에서 에러의 상태를 하나 만들어 주고 에러가 잡혔을 때 에러의 상태를 true로 만들어 줌으로써 내가 지키고자하는 컴포넌트가 깨지는 것을 방지할 수 있다.

가장 큰 장점은 에러가 나는 컴포넌트는 에러가 났을 때 반환해주려는 컴포넌트로 반환해줌으로써 앱이 일부분으로 인해 깨지지 않도록 해주는 것이다. 이런 점들을 잘 고려해서 반영하면 좋을 것 같다.

깨진 부분을 제외하고 뷰를 만들어서 보여줄 것이 더 좋은 방향인지 프로젝트의 방향에 맞게 적용하면 좋을 것으로 생각이 된다. 그리고 이 에러 바운더리를 하면서 팁하나는 getDerivedStateFromError에서 상태 변화로 인한 에러를 잡을 수 있도록 API로 받은 데이터가 불안한 경우 상태로 받아서 관리해주면 에러 바운더리가 동작한다는 것이다.

 

참고 자료 : 

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기 | 카카오엔터테인먼트 FE 기술블로그

 

Error Boundaries – React