error.js 파일 컨벤션을 사용하면 중첩된 경로에서 예기치 않은 런타임 오류를 우아하게 처리할 수 있습니다.

• 라우트 세그먼트와 그 중첩된 자식들을 React 에러 바운더리에서 자동으로 래핑합니다.
• 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춤화된 오류 UI를 생성하여 세분성을 조정합니다.
• 애플리케이션의 나머지 기능은 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리합니다.
• 전체 페이지를 다시 로드하지 않고 오류에서 복구를 시도하는 기능을 추가합니다.

라우트 세그먼트 안에 error.js 파일을 추가하고 React 컴포넌트를 내보내서 오류 UI를 만듭니다.

'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

error.js 작동 방식

• error.js 는 중첩된 자식 세그먼트 또는 page.js 컴포넌트를 감싸는 React Error Boundary를 자동으로 생성합니다.
• error.js 파일에서 내보낸 React 컴포넌트가 폴백 컴포넌트로 사용됩니다.