전역적으로 React 오류 캡처하기

리액트 오류 전역 캡처

리액트에 입문한 다음, 모든 예외적이고 예기치 않은 오류 또는 경고를 캡처하려는 경우에 이곳에 와 있습니다. 이 블로그 포스트에서는 리액트에서 전역 오류 처리를 활성화하고 오류를 외부 API에 기록하는 방법을 살펴보겠습니다. 이 접근 방식을 사용하면 오류 처리 코드를 반복 작성하지 않아도 됩니다.

try-catch 사용: 제한 사항 및 대체 방법

자바스크립트에서 오류를 처리하는 한 가지 일반적인 방법은 try-catch 블록을 사용하는 것입니다. 이 방법은 JavaScript 오류를 캡처하는 데 사용할 수 있지만, 리액트 특정 오류를 직접 캡처하지는 못합니다. 그러므로 리액트 오류를 전역적으로 처리하기 위해 대체 방법이 필요합니다.

Error Boundary 컴포넌트

리액트 16 이상 버전에서 리액트 오류를 전역적으로 캡처하는 권장 방법은 ErrorBoundary 컴포넌트를 사용하는 것입니다. 이 컴포넌트는 응용 프로그램 컴포넌트 주위에 경계로 작용하여 오류가 발생할 때 오류를 잡아내고 대체 UI를 표시할 수 있습니다.

ErrorBoundary 컴포넌트를 구현하는 예시는 다음과 같습니다:

// app.js
const MOUNT_NODE = document.getElementById('app');

const render = (messages) => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <ConnectedRouter history={history}>
          <ErrorBoundary>
            <App />
          </ErrorBoundary>
        </ConnectedRouter>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE
  );
};

// ErrorBoundary 컴포넌트
export default class ErrorBoundary {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // 오류를 외부 API에 기록하기
    console.error(error);

    // 오류 UI를 표시하기 위해 상태 업데이트
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>이런! 오류가 발생했습니다.</p>
        </div>
      );
    }

    return this.props.children;
  }
}

비동기 메소드에서 오류 캡처하기

componentDidMount와 같은 비동기 메소드에서 발생한 오류는 오류 경계 내에서 잡히지 않는다는 점을 알아두는 것이 중요합니다. 이러한 오류를 캡처하기 위해 vanilla JavaScript에서 window.onerror과 window.onunhandledrejection 이벤트를 활용할 수 있습니다. 이 이벤트들은 리액트 컴포넌트 계층 외부에 있는 모든 처리되지 않은 오류를 캡처하는 데 사용할 수 있습니다.

이 이벤트들을 활용하는 예시는 다음과 같습니다:

// window.onerror를 사용한 전역 오류 핸들러
window.onerror = function(message, source, lineno, colno, error) {
  // 오류를 외부 API에 기록하기
  console.error(error);
};

// window.onunhandledrejection을 사용한 전역 프로미스 거부 핸들러
window.onunhandledrejection = function(event) {
  const error = event.reason;
  // 오류를 외부 API에 기록하기
  console.error(error);
};

결론

이 블로그 포스트에서는 리액트 오류를 전역적으로 캡처하고 외부 API에 기록하는 방법을 살펴보았습니다. ErrorBoundary 컴포넌트를 구현하고 window.onerror 및 window.onunhandledrejection 이벤트를 활용함으로써 리액트 애플리케이션에서 오류를 효과적으로 처리할 수 있습니다. 이제 오류 처리 코드를 반복 작성하는 대신 오류 처리를 전역적으로 활성화하여 시간과 노력을 절약할 수 있습니다.

더 자세한 정보는 리액트 오류 처리에 관한 리액트 문서를 참조하십시오.

추가 질문이 있으시면 언제든지 문의해 주세요. 즐거운 코딩 되세요!

참고 자료 : 

reactjs