React) 함수형 컴포넌트에서 에러 잡아내기

안녕하세요 프런트엔드 개발자 웹 코기입니다.

리액트 작업을 하다 보면 에러와 로딩 처리를 해줘야 하는 경우가 있는데요,

작업하다 보니 에러 처리를 모두 건너뛰고 만들기에 급급해.. 뒤늦게 에러를 잡아보려니 해야 할 작업이 상당해서 당황스러웠습니다.

그렇게 찾던 중 알게 된 정보를 공유합니다.

 

componentDidCatch를 사용하자

리액트에서는 위의 객체를 이용해 에러가 발생한 곳이 어디인지 알 수 있고, 메시지도 받아볼 수 있습니다.

아래는 벨로 퍼트님이 작성한 문서입니다.

https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html

26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 · GitBook

하지만 이 컴포넌트는 클래스형 컴포넌트에서만 사용할 수 있었고, 아직 함수형 컴포넌트에서는 위의 객체를 대응할만한 재료가 아직 업데이트되지 않은 것으로 보입니다....!!

 

 

함수형 컴포넌트에서 에러 체크하기

라이브러리를 찾아보던 중 react-catcher 라이브러리를 발견해 적용해봤습니다.

사용법은 아주 간단합니다.

랜더링이 시작되는 index.js 최상단에 아래와 같이 ReactCatcher 컴포넌트를 감싸주면 되고,

erroHandler 속성을 이용해 메시지를 콘솔로 확인할 수 있습니다.

 

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App';
import ReactCatcher from 'react-catcher';

ReactDOM.render((
  <ReactCatcher
    fallback={
      <h1>
        An Error has occured !!
      </h1>
    }
    errorHandler={(error, errorInfo) => {
      const error_message = `error: ${error}, errorInfo: ${JSON.stringify(errorInfo)}`;
      console.log(error_message)
    }}
  >
    <App />
  </ReactCatcher>
), document.getElementById('root'))

https://github.com/ibrahim-13/react-catch

GitHub - ibrahim-13/react-catch: Error Boundary Component for React

 

 

 

ReactCatcher 라이브러리 파헤쳐보기

함수형 컴포넌트에서 어떻게 에러를 체크하는지 궁금해서 소스를 파헤쳐봤는데요 ~

알고 보니 앞서 언급했던 componentDidCatch 객체를 사용한 클래스형 컴포넌트를 최상위에 감싼 형태였습니다.

export default class ReactCatcher extends React.Component<ReactCatcherProps, ReactCatcherState> {
    constructor(props: ReactCatcherProps);
    static getDerivedStateFromError(): {
        hasError: boolean;
    };
    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
    render(): {} | null | undefined;
}

 

클래스형과 함수형이 혼합이 가능하다는 걸 (이렇게 쓰면 안 되겠지만) 다시 한번 실감하고 시야가 트인 느낌이었어요 

그럼 모두 즐 코딩하세요!