[Next.js] Error Handling(Next.js 14)

error.js

• page, layout와 같이 Next.js에서 지원해주는 파일명이다.
• 중첩된 라우테에서 예기치 않은 런타임 오류를 처리할 수 있다.

• 파일 시스템 계층 구조를 활용해 세부 사항을 조정해 특정 세그먼트에 맞는 오류 UI를 만든다.
• 나머지 애플리케이션은 작동 상태로 유지하면서 오류를 영향을 받은 세그먼트에만 격리한다.
• 전체 페이지를 다시 로드하지 않고도 오류에서 복구를 시도하는 기능을 추가한다.

'use client' // Error 컴포넌트는 Client 컴포넌트로 생성해야 한다.
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // 세그먼트를 리렌더링하여 복구를 시도한다.
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

error.js 작동방식

• error.js은 자동으로 react Error Boundary를 생성해 중첩된 자식 세그먼트나 구성요소를 래핑한다.
• fallback으로 사용된 error.js를 react 컴포넌트로 가져온다.
• 오류가 발생하면 오류가 포함되고 fallack 구성 요소가 렌더링된다.
• 폴백 오류 구성 요소가 활성화되면 오류 경계 위의 레이아웃은 상태를 유지 하고 대화형 상태 를 유지하며 오류 구성 요소는 오류에서 복구하는 기능을 표시한다.

reset()

'use client'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

• 오류 구성 요소는 이 reset()함수를 사용하여 사용자에게 오류에서 복구를 시도하도록 요청할 수 있다.
• 실행되면 이 함수는 Error 경계의 내용을 다시 렌더링하려고 시도한다.

중첩된 경로

• 특수 파일을 통해 생성된 React 구성요소는 특정 충첩 계층 구조로 렌더링된다.
• 두 개의 세그먼트가 포함된 중첩 경로와 이 두 세그먼트에 layout.js파일 이 있는 경우 다음과 같은 error.js 구성 요소 계층 구조 로 렌더링된다.

• error.js중첩된 구성 요소 계층 구조는 중첩된 경로에서 파일 의 동작에 영향을 미친다.