결론을 말하면 error boundary는 함수형 컴포넌트에서는 불가합니다.

개발 코드 일부에 작은 에러가 나게되면 (warning으로 문구가 뜨고, 계속 진행이 되면 상관 없지만, 사실 이것도 문제) 다음 읽혀야 할 코드를 읽지 못해 전체 애플리케이션이 중단되는 경우가 있다. error boundary는 이러한 문제를 해결하기 위한 방법 중 하나이다.

 

error boundary란?

error boundary 컴포넌트로 감싸진 하위 컴포넌트 트리의 어디에서든지 js 에러를 기록하여 깨진 컴포넌트의 트리 대신에 fallback UI를 보여주는 react 컴포넌트이다. 이는 렌더링 도중 혹은 생명주기 메서드 등 전체 트리에서 에러를 캐치 할 수 있다.

 

error boundary가 에러를 포착할 수 없는 경우

1. 이벤트 핸들러
2. 비동기 코드 (setTimeout 등)
3. SSR (서버사이드랜더링)
4. 에러 경계 자체 발생 에러

 

error boundary 사용법

폴백UI를 랜더링 하기 위해서는 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;
  }
}

 

아직 업데이트가 더 되어야

error boundary는 아직 함수형 컴포넌트에서는 지원하지 않는다. 하지만 서치 결과 (언젠가) 서비스 할 계획에 있다고 한다. 다만, class형을 거의 사용하지 않는 내 입장에서는 너무 아쉬운 소식이 아닐 수 없다.

 

참고 사이트

https://hyermione.tistory.com/77

리액트 코드 분할과 방법을 소개합니다 (dynamic, lazy 등)

 

https://ko.reactjs.org/docs/error-boundaries.html

에러 경계(Error Boundaries) – React