React 16 베타에서 바뀐 에러 핸들링 방식

문제 상황

운영 중인 대시보드에서 특정 차트 컴포넌트에 잘못된 데이터가 들어오면 전체 화면이 빈 페이지로 변하는 문제가 있었다. React 15에서는 렌더링 중 발생한 에러를 컴포넌트 레벨에서 잡을 방법이 없었다.

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>
  <ChartWidget data={chartData} />
</ErrorBoundary>

적용 결과

차트 하나에 문제가 생겨도 나머지 대시보드는 정상 동작한다. Sentry에 에러를 자동으로 보내도록 설정해서 어떤 데이터 형식에서 문제가 생기는지 추적할 수 있게 되었다.

아직 베타라 프로덕션 적용은 보류했지만, 정식 출시되면 바로 마이그레이션할 예정이다. 파이버 아키텍처로 완전히 재작성되었다는데, 성능 개선도 기대된다.