TIL(22.05.18)

김부건·2022년 5월 18일
0

TIL

목록 보기
7/10
post-thumbnail

일반적으로 리액트 프로젝트를 진행하다가 에러가 발생할 경우 전체 프로젝트가 올 스탑한다. 그리고 흰 화면만 멍하니 쳐다볼 뿐..

에러 경계(Error Boundaries)

에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며, 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트다.
에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낼 수 있다.

에러 경계가 포착하지 못하는 에러

  1. 이벤트 핸들러
  2. 비동기적 코드(setTimeout, requestAnimationFrame 콜백)
  3. 서버 사이드 렌더링
  4. 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

에러 경계는 자바스크립트의 catch {} 구문과 유사하게 동작하지만 컴포넌트에만 적용된다. 오직 클래스 컴포넌트만 에러 경계과 될 수 있다.(똥..💩💩 hook으로 추가해주려고 한단다..)

React 측의 주장: 손상된 UI를 완전히 제거하는 것보다 그대로 남겨두는 것이 더 좋지 않다.
예를 들어 메신저와 같은 제품에서 손상된 UI를 그대로 남겨두면 누군가가 잘못된 사람에게 메시지를 보내게 될 가능성이 있습니다. 마찬가지로 결제 앱의 예를 들면 잘못된 금액을 보여주는 것이 아무 것도 렌더링하지 않는 것보다 더 나쁩니다.

근데 어이없는게, 에러 경계는 함수형 컴포넌트에서는 제공을 하지 않는다. 그래서 우리는 react-error-boundary 라이브러리를 통해서 class 컴포넌트를 배제해서 레거시하지 않게 보일 수 있다.
react-error-boundary

이 라이브러리를 이용하면 <ErroBoundary>를 이용해서 간단하게 에러 경계를 명시할 수 있다.

import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

const ui = (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <ComponentThatMayError />
  </ErrorBoundary>
)

0개의 댓글