반응형
5. Error Handling
- error.js file은 중첩된 Route 내에서 런타임 에러를 처리할 수 있다.
1. 자동으로 Route와 중첩된 자식 컴포넌트들을 React ErrorBoundary Component로 감싼다.
2. 파일 시스템 구조를 활용해 특정 segment에 맞는 Error UI 제공.
3. 나머지 기능을 유지하며, 에러가 발생한 segment만 격리.
4. 전체 페이지 새로고침 없이 Error 복구를 시도할 수 있다.
'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>
)
}
- error.js 예시 파일로, 특정 segment에서 error가 발생 시 error를 격리하고 보여지게 될 UI.
- Error가 발생한 segment를 제외한 segment는 여전히 상태를 유지하고 상호작용이 가능하다.!?!!?!
- error.js 파일에서 제공하는 reset()함수는 Error Boundary 내에 있는 segment를 재 렌더링하고, 성공 시 결과물로 Error UI가 대체 된다.
- 중첩된 sement에서 error가 발생 시, 버블링 되어 가장 가까운 부모 Error Boundary에서 처리가 된다.
- 동일 레벨의 layout에서 발생한 에러는 부모 Error Boundary에서 처리가 된다. (Next.js 특수 파일 계층 구조로 인해 ErrorBoundary는 Layout 내부에 위치한다.)
root layout에서 발생한 에러는 global-error.js를 이용해 처리한다. (production에서만 활성화.)
- global-error.js는 전체 Application을 감싸는 형태이므로, Error UI 구성 시 <html>과 <body> 태그가 포함되어야 한다.
- global-error.js와 동시에 error.js도 함께 작성하는 게 좋다. (root layout 하위 에러도 처리해야지?!!!?)
- Server Component에서 발생한 에러는 민감한 정보를 제거하고 error.js 내 error 객체로 전달된다. (이 때는 digest라는 hash가 함께 전송된다고 한다. -> server 측 log확인 시 비교하여 확인 가능한 용도.)
처음 뵙겠습니다.
Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.
Preference
Routing: Error Handling | Next.js
Handle runtime errors by automatically wrapping route segments and their nested children in a React Error Boundary.
nextjs.org