react-error-boundary

react-error-boundary
비공식 훅 버전 ErrorBoundary이다.
ErrorBoundary 컴포넌트는 여전히 클래스형 ErrorBoundary를 감싸고 있다.
useErrorBoundary 훅은 Context를 통해 이 내부 Boundary 인스턴스에 접근해서 에러 트리거(showBoundary) 와 리셋(resetBoundary) 기능을 노출한다.
즉, “훅처럼 보이지만, 내부는 여전히 클래스 기반 ErrorBoundary”인 구조이다.

설치

npm install react-error-boundary

예시

예시 1

import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div>
      <h2>문제가 발생했습니다 😥</h2>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>다시 시도</button>
    </div>
  );
}

function BuggyComponent() {
  const { showBoundary } = useErrorBoundary(); // 👈 훅으로 직접 에러 트리거 가능

  function handleClick() {
    try {
      throw new Error("테스트 에러 발생!");
    } catch (err) {
      showBoundary(err); // 에러 강제 트리거 → fallback 표시
    }
  }

  return <button onClick={handleClick}>에러 발생시키기</button>;
}

export default function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => console.log("reset!")}
    >
      <BuggyComponent />
    </ErrorBoundary>
  );
}