[React공식문서읽기] Error Boundaries

UI의 일부분에 존재하는 Javascript에러가 전제 application을 중단하면 안된다.

이러한 문제를 해결하기 위해 error boundary가 도입되었다.

Error boundary는 하위 컴포넌트 트리의 어디서든 javascript에러를 기럭하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React컴포넌트이다. Error boundary는 Life cycle method 및 그 아래의 전체 트리에서 오류를 잡아낸다.

Error boundary는 다음과 같은 오류는 잡지 않음

 - Event Handler

 - 비동기 코드

 - Server Side Rendering

 - Error boundary에서 발생하는 오류

 

Life Cycle method인  static getDerivedStateFromError()와 componentDidCatch() 를 정의하면 Class컴포넌트 자체가 Error boundary가 된다.

에러가 발생한 뒤 폴백 UI를 Rendering하려면 static getDerivedStateFromError()를 사용, Error 정보를 기록하려면 componentDidCatch()를 사용.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

function Component(){
   return(
   <ErrorBoundary>
     <MyWidget />
   </ErrorBoundary>
   );
}

Error boundary는 catch구문과 유사하지만, 컴포넌트에 적용된다.

class 컴포넌트만이 Error boundary가 될 수 잇다.

또한 Error boundary는 트리 내 하위 컴포넌트의 에러만 포착한다.

그러므로 Error boundary를 적절하게 배치해야 된다.

또한 Error boundary에서 포착되지 않은 에러에 대한 적절한 대처도 필요하다. 냅두면 큰 버그를 야기할수도 있다.

컴포넌트 스택추적

Application이 실수로 에러를 집어삼킨 경우에도 개발과전에서 Rendering하는 동안 발생한 모든 에러를 콘솔에 출력한다. 그리고 파일이름, Line도 확인할 수 있다.

Create React App을 사용하지 않는 경우 수동으로 해당 플러그인을 Babel설정으로 추가할 수 있다.

Production환경에서는 비활성화 해야 된다.

 

Error boundary는 Event Handler 내부의 에러는 포착하지 않는다.

그러므로 Event Handler 내에서 에러를 잡아야 할 경우 try/catch구문을 사용하여야 한다.

 

참고 : ko.reactjs.org/docs/error-boundaries.html

에러 경계(Error Boundaries) – React