에러바운더리 설정

 

기존 에러 캐치

---

 UI에서 났던 에러는 전체 애플리케이션의 중단을 야기하게 된다. 

 

 

이러한 사용자 문제를 해결하기 위해 리액트 팀에서

16버전부터 에러 바운더리를 도입하였다.  

 

에러가 나서 깨진 컴포넌트 트리 대신 

폴백 UI를 보여주는 리액트 컴포넌트이다 .

 

 

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

 

 

 

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

 

 

 

포착하지 않는 에러의 유형

---

 

 

 

이벤트 핸들러
비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
서버 사이드 렌더링
자식에서가 아닌 에러 경계자체에서 발생하는 에러

 

 

• try/catch는 명령형 코드에서만 동작.
  컴포넌트같은 선언형 코드에서는 동작하지 않을수(?)있다.
  에러바운더리는 그것을 포착함 

 

• 에러 바운더리 배치 
  최상위 경로에 보여줄 수 있고 또한 각 위젯을 에러바운더리로 감쌀 수 있음
  
  (불러오다가 실패시에 에러바운더리로 작게 ! 모양 컴포넌트도 좋을 것같다. 
  그리고 새로고침 버튼으로 다시 요청보내기)

 

이벤트 핸들러는 try/catch구문 활용

 이벤트 핸들러는 렌더링 중에 발생하지 않습니다. 따라서 이벤트 핸들러가 에러를 던져도 React는 여전히 화면에 무엇을 표시해야 할 지 알고 있습니다.
이벤트 핸들러 내에서 에러를 잡아야 하는 경우에 일반 자바스크립트의 try / catch 구문을 사용하세요.

출처 : React 공식문서

 

 

 

또한 이것의 단점은 Class 컴포넌트로 사용해야한다는 것이다. 

이 단점을 보완하기 위해 react-error-boundary라는 npm 라이브러리가 있어서 

사용해 보았다. 

 

 

 

 

 

 

 

참고 사이트 : 

---

에러 경계(Error Boundaries) – React

 

React Suspense와 ErrorBoundary를 이용하여 데이터 팬딩처리와 에러 처리 개선하기

React Suspense와 ErrorBoundary를 이용한 로딩처리와 에러 핸들링

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기 | 카카오엔터테인먼트 FE 기술블로그