Routing: Error Handling

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

• 자동으로 라우트 세그먼트와 해당 중첩된 자식을 React 에러 바운더리로 감쌉니다.
• 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춤형 에러 UI를 만들어 정밀도를 조절합니다.
• 나머지 애플리케이션은 기능적인 상태를 유지하면서 오류를 영향받는 세그먼트로 격리합니다.
• 전체 페이지 리로드 없이 오류에서 복구를 시도할 수 있는 기능을 추가합니다.

에러 UI를 만들려면 라우트 세그먼트 내에 error.js 파일을 추가하고 React 컴포넌트를 내보냅니다:

'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(() => {
    // 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>
  )
}

[코드] app/dashboard/error.tsx

How error.js Works

• error.js는 자동으로 중첩된 하위 세그먼트나 page.js 컴포넌트를 감싸는 React 에러 바운더리를 생성합니다.
• error.js 파일에서 내보낸 React 컴포넌트가 대체 컴포넌트로 사용됩니다.
• 에러 바운더리 내에서 오류가 발생하면 오류가 포함되고 대체 컴포넌트가 렌더링됩니다.
• 대체 오류 컴포넌트가 활성화되면 에러 바운더리 위의 레이아웃은 상태를 유지하고 상호 작용 가능한 상태로 유지되며, 오류 컴포넌트에서 오류에서 복구하는 기능을 표시할 수 있습니다.

Recovering From Errors

오류의 원인은 때로는 일시적일 수 있습니다. 이러한 경우에는 단순히 다시 시도하면 문제가 해결될 수 있습니다.

오류 컴포넌트는 reset() 함수를 사용하여 사용자에게 오류에서 복구를 시도하도록 요청할 수 있습니다. 함수를 실행하면 Error 바운더리의 내용을 다시 렌더링하려고 시도합니다. 성공하면 대체 오류 컴포넌트가 다시 렌더링 결과로 대체됩니다.