Error Boundary 패턴 — React 에러 처리 완벽 가이드

Error Boundary 구현

"use client";
import { ErrorBoundary } from "react-error-boundary";

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

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}
      onReset={() => window.location.reload()}>
      <MyComponent />
    </ErrorBoundary>
  );
}

Next.js에서는 error.tsx 파일로 라우트별 에러 처리가 가능합니다.