React16에서 도입된 에러 경계

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

💡 에러 경계가 포착하지 않는 것

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

생명주기 메서드인 static getDerivedStateFromError()와 componentDidCatch()를 이용하여 에러를 처리한다.

• static getDerivedStateFromError()는 에러가 발생한 뒤에 fallback UI를 렌더링하기 위해 사용
• componentDidCatch()는 에러 리포팅에 이용

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

에러 경계 컴포넌트는 클래스 컴포넌트만 가능하다. 그리고 에러 경계 컴포넌트 하위 컴포넌트에 대해서만 에러를 포착한다.

에러 경계를 배치할 위치

이건 경험에 따라

최상위 컴포넌트 통째로 감싸도 되고 필요한 부분만 감싸도 되고

포착되지 않은 에러에 대한 새로운 동작

포착되지 않은 에러는 어떻게 보여줄래? ⇒ react16부터는 에러 경계에서 포착되지 않은 에러로 인해 React컴포넌트 트리의 마운트가 해제 된다.

컴포넌트 스택 추적

React16은 에러를 처리하지 못한 경우에도 렌더링하는 동안 발생한 모든 에러 콘솔을 출력한다. 컴포넌트 스택 추적도 가능하다.

줄 수 추적은 개발용이니까 프로덕션에서는 사용 하지 말자.

컴포넌트 이름은 function의 name프로퍼티를 이용한다.