error.js

앱 라우터의 에러 파일은 페이지에서 특정 영역의 에러를 격리하기 위해 사용합니다.

'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])
 
  return (
    <div>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

위 코드처럼 에러 컴포넌트는 error와 reset이라는 프롭스를 받아서 에러를 로깅하거나 다시 해당 에러 영역을 복구하는 요청을 보낼 수 있습니다. 그리고 이 에러 컴포넌트는 에러 바운더리 컴포넌트와 같은 역할을 합니다.

에러 제어 범위

에러 파일은 layout.js나 template.js 파일에서 발생한 에러는 제어하지 않습니다. 만약 같은 레벨에 있는 레이아웃의 에러를 처리하고 싶다면 한단계 더 상위의 라우트 영역에 에러 파일을 배치합니다.

이런 규칙으로 에러 파일을 추가하더라도 루트 레벨의 레이아웃이나 템플릿 파일의 에러는 제어할 수 없을텐데요. 그럴 때는 앱 폴더의 루트 레벨에 app/global-error.js을 만들어서 모든 에러를 처리할 수 있게 만들 수 있습니다. 다만, 이 전역 에러 처리 파일은 특정 영역에 대한 에러 처리나 UI 표시를 담당하지 않고 전역 레벨의 에러 페이지 역할을 하므로 <html>, <body> 등의 태그를 선언해 주어야 합니다.

error.js

에러 제어 범위​

에러 제어 범위