💻 Error Boundaries(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

에러 경계의 소개

UI 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안된다. React16에서 에러 경계라는 새로운 개념이 도입되었다.

에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 리액트 컴포넌트이다. 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다.

*에러 경계가 포착하지 않는 에러들

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

클래스 컴포넌트에 static getDerivedStateFromError() 또는 componentDidCatch()를 정의할 경우 해당 컴포넌트는 Error boundary가 된다.

에러가 발생한 뒤에 폴백 UI를 렌더링하려면 static getDerivedStateFromError()를 사용한다. 에러 정보를 기록하려면 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>

에러 경계는 자바스크립트의 catch {} 구문과 유사하게 동작하지만 컴포넌트에 적용된다. 오직 클래스 컴포넌트만이 에러 경계가 될 수 있다.

에러 경계를 배치할 위치

서버 사이드 프레임워크가 충돌을 해결하는 것처럼 최상위 경로의 컴포넌트를 감싸서 유저에게 “문제가 발생했습니다”라는 메시지를 보여줄 수 있다.

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

React 16부터는 에러 경계에서 포착되지 않은 에러로 인해 전체 React 컴포넌트 트리의 마운트가 해제됩니다.

손상된 UI를 완전히 제거하는 것보다 그대로 남겨두는 것이 더 좋지 않기 때문이다. 예를 들어 메신저와 같은 제품에서 손상된 UI를 그대로 남겨두면 누군가가 잘못된 사람에게 메시지를 보내게 될 가능성이 있다.

이 변경사항은 React 16으로 마이그레이션 할 때 애플리케이션에서 이전에 알려지지 않았던 기존에 존재하던 충돌을 발견할 수 있음을 의미한다. 에러 경계를 추가함으로써 문제가 발생했을 때 더 나은 사용자 경험을 제공할 수 있다.

컴포넌트 스택 추적

React 16은 애플리케이션이 실수로 에러를 집어삼킨 경우에도 개발 과정에서 렌더링하는 동안 발생한 모든 에러를 콘솔에 출력한다. 에러 메시지 및 자바스크립트 스택과 더불어 React 16은 컴포넌트 스택 추적 또한 제공한다. 이제 정확히 컴포넌트 트리의 어느 부분에서 에러가 발생했는지 확인할 수 있게 되었다.

try/catch는 어떤가요?

try/catch 는 명령형 코드에서만 동작한다.

try {
  showButton();
} catch (error) {
  // ...
}

그러나 React 컴포넌트는 선언적이며 무엇을 렌더링할지 구체화한다.

<Button />

에러 경계는 React의 선언적인 특성을 보존하고 예상한 대로 동작한다.

이벤트 핸들러는?

에러 경계는 이벤트 핸들러 내부에서는 에러를 포착하지 않는다.

React는 이벤트 핸들러의 에러를 해결하기 위해서 에러 경계를 필요로 하지 않는다. render 메서드 및 생명주기 메서드와 달리 이벤트 핸들러는 렌더링 중에 발생하지 않는다. 따라서 이벤트 핸들러가 에러를 던져도 React는 여전히 화면에 무엇을 표시해야 할 지 알고 있다.

이벤트 핸들러 내에서 에러를 잡아야 하는 경우에 일반 자바스크립트의 try / catch 구문을 사용하면 된다!

🔥 느낀점

리액트는 과거에 컴포넌트 내에서 에러를 처리하는 방법을 제공하지 않았었고 그 문제를 해결하기 위해 도입된 개념이 에러 경계이다. 오직 클래스 컴포넌트만 사용할 수 있기 때문에 실제로 사용할 일은 드물겠지만 이런 것도 있구나 새로 알게되어서 좋았다.

Refer

• 에러 경계