일반적으로 리액트 프로젝트를 진행하다가 에러가 발생할 경우 전체 프로젝트가 올 스탑한다. 그리고 흰 화면만 멍하니 쳐다볼 뿐..
에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며, 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트다.
에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낼 수 있다.
에러 경계는 자바스크립트의 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>
)