React 16의 Error Boundary로 런타임 에러 처리하기

문제 상황

운영 중인 대시보드에서 특정 차트 컴포넌트가 잘못된 데이터를 받으면 전체 화면이 하얗게 되는 문제가 발생했다. 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로 감싸서 에러가 발생해도 다른 영역은 정상 작동하도록 구성했다.

<ErrorBoundary>
  <ChartWidget data={data} />
</ErrorBoundary>

결과

에러가 발생해도 해당 위젯만 fallback UI로 대체되고 나머지 기능은 정상 동작한다. Sentry와 연동해 에러 로그도 자동으로 수집되도록 설정했다.

주의할 점은 Error Boundary가 이벤트 핸들러 내부 에러는 잡지 못한다는 것이다. 이벤트 핸들러는 try-catch로 별도 처리가 필요하다.