ErrorBoundary
선언적으로 컴포넌트의 에러를 관리하는 컴포넌트입니다.
예시
<ErrorBoundary
//에러가 발생했을때 호출되는 함수입니다.
onError={() => alert("에러 발생")}
/**
* 에러가 발생했을때 렌더링 되는 컴포넌트 입니다.
* 일반 컴포넌트 또는 아래에 언급하는 Prop을 사용하는 컴포넌트를 전달 받습니다.
* error : 발생한 Error 객체입니다.
* errorInfo : 예외를 포함한 컴포넌트와 그 조상들을 기록한 값입니다.
* resetError : 트리거시 ErrorBoundary의 isError 상태를 초기화 합니다.
*/
fallback={({ error, errorInfo, resetError }) => <div>Error!</div>}
>
<Component />
</ErrorBoundary>
useErrorBoundary
이벤트 핸들러에서 발생한 이벤트나 비동기에서 발생한 이벤트 등, ErrorBoundary가 catch 하지 못하는 error를 throw하는 훅입니다.
가장 인접한 ErrorBoundary에 에러를 throw합니다.
const ErrorComponent = () => {
const throwError = useErrorBoundary();
return <button onClick={() => throwError(new Error("Error"))}>throw</button>;
};