React 16 베타 테스트 중 발견한 Error Boundary 활용법

문제 상황

프로덕션 환경에서 특정 컴포넌트에서 발생한 에러가 전체 앱을 멈추게 하는 문제가 있었다. React 15에서는 컴포넌트 에러를 잡아낼 방법이 마땅치 않아 window.onerror에 의존하고 있었다.

Error Boundary 도입

React 16 베타에 추가된 componentDidCatch 생명주기 메서드를 사용해 에러를 격리할 수 있게 되었다.

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 에러 로깅 서비스로 전송
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>문제가 발생했습니다. 새로고침 해주세요.</div>;
    }
    return this.props.children;
  }
}

적용 결과

중요한 컴포넌트들을 ErrorBoundary로 감싸서 에러가 발생해도 앱 전체가 죽지 않도록 했다. 특히 third-party 위젯이나 외부 데이터에 의존하는 컴포넌트에 적용했다.

<ErrorBoundary>
  <ThirdPartyWidget />
</ErrorBoundary>

정식 릴리즈 전이지만 충분히 안정적이었고, 에러 추적도 훨씬 수월해졌다. React 16이 나오면 바로 프로덕션에 적용할 예정이다.