[번역] ErrorBoundary

Catching rendering errors with an error boundary 

기본적으로 애플리케이션이 렌더링 도중 에러를 발생시키면 React는 화면에서 UI를 제거한다. 이를 방지하기 위해 애플리케이션의 UI의 일부를 에러 바운더리로 감싸면 된다. 에러 바운더리는 충돌한 부분 대신 오류 메시지와 같은 폴백 UI를 표시할 수 있는 특수 컴포넌트이다. 에러 경계 컴포넌트를 구현하려면 에러에 대한 응답으로 상태를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 getDerivedStateFromError를 제공해야한다. 또한 선택적으로 componentDidCatch를 구현하여 로그를 기록할 수 있다.

 

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

 

그런다음 트리의 일부를 래핑할 수 있다. 

 

<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

 

 

프로필 또는 그 하위 컴포넌트가 오류를 발생시키면 ErrorBoundary가 해당 오류를 "포착"하고 사용자가 제공한 오류 메시지와 함께 fallbackUI를 띄우며 프로덕션 오류 메시지를 전송한다. 

 

모든 컴포넌트를 별도의 error boundary로 묶을 필요는 없다. 에러바운더리의 세분성을 고려할 때는 오류 메시지를 표시하는 것이 적절한 위치를 고려해야한다. 예를 들어 메시징 앱의 경우 대화 목록 주위에 에러 바운더리를 배치하는 것도 합리적이다. 하지만 모든 아바타 주위에 에러 경계를 설정하는 것은 적절하지 않다. 

 

에러 바운더리를 함수 컴포넌트로 작성할 수 있는 방법은 없다. 하지만 에러 경계 클래스를 직접 작성할 필요는 없다. 예를 들어 react-error-boundary 클래스를 사용할 수 있다.