에러 처리
error.js 활용해서 런타임 오류를 적절하게 처리할 수 있습니다.
error.js 는 중첩된 하위 세그먼트 또는 page.js 구성 요소를 래핑하는 React Error Boundary 를 자동으로 생성합니다.Error boundary 내에서 오류가 발생하면 오류가 포함되고 대체 구성 요소가 렌더링됩니다.
Error boundary 를 감싸는 레이아웃은 상태를 유지 하고 상호작용이 가능합니다.
오류 복구
reset() 메서드를 사용하여 사용자에게 오류 복구를 시도하라는 메시지를 표시할 수 있습니다. 함수 실행 시 error boundary 안의 내용을 다시 렌더링하려고 시도합니다. 성공하면 대체 오류 컴포넌트가 다시 렌더링된 결과로 대체됩니다.
// app/dashboard/error.tsx
'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>
)
}중첩경로
특수 파일들을 통해 생성된 중첩된 컴포넌트 계층 구조는 중첩된 경로에서 error.js 파일의 동작에 영향을 미칩니다.
오류는 가장 가까운 error boundary 로 전달됩니다. 이는 error.js 파일이 중첩된 모든 하위 세그먼트에 대한 오류를 처리한다는 의미입니다. 위 특징들로 인해 과정에서 서로 다른 위치에 error.js 파일을 배치하면 세분화된 오류 UI 를 구성할 수 있습니다.
오류 처리와 레이아웃
error.js 로 생성된 error boundary 는 동일한 세그먼트의 layout.js 또는 template.js 컴포넌트에서 발생하는 오류를 포착하지 않습니다. 이는 오류가 발생했을 때 공유되는 UI 를 표시하고 사용할 수 있게 하기 위한 의도적인 설계입니다.
특정 레이아웃이나 템플릿 내의 오류를 처리하려면 error.js 파일을 레이아웃의 상위 세그먼트에 배치해야 하며 루트 레이아웃이나 템플릿 내의 오류를 처리하려면 error.js 의 형태인 global-error.js 를 활용할 수 있다.
루트 error.js 와 마찬가지로 global-error.js 오류 경계는 전체 애플리케이션을 감싸고 해당 폴백 구성 요소가 활성화되면 루트 레이아웃을 대체합니다. 그렇기 때문에 global-error.js 는 자체 <html> 및 <body> 태그를 정의해서 사용해야 합니다.
global-error.js 가 정의된 경우에도 공통적으로 공유되는 UI 및 브랜딩을 포함하는 루트 레이아웃 내에서 대체 구성 요소가 렌더링될 루트 error.js 를 정의하는 것이 좋습니다.
// app/global-error.tsx
'use client'
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
)
}서버 오류 처리
Server Component 에서 오류가 발생하면 Next.js는 오류 개체(프로덕션에서 민감한 오류 정보가 제거된)를 가장 가까운 error.js 파일에 오류 소품으로 전달합니다.
민감한 오류 정보 보호
배포 환경에서 클라이언트에 전달되는 Error 객체에는 일반 메시지와 digest 속성만 포함됩니다. 이는 오류에 포함된 잠재적으로 민감한 세부 정보가 클라이언트에 유출되는 것을 방지하기 위한 보안 예방 조치입니다.
참고
'nextjs > next 14 공식 문서 부시기' 카테고리의 다른 글
| [next 14 공식문서 부시기] 2.6 Dynamic Routes (0) | 2024.01.17 |
|---|---|
| [next 14 공식문서 부시기] 2.5. Router Handlers (0) | 2024.01.16 |
| [next 14 공식문서 부시기] 2.3. <Link> & navigating (0) | 2024.01.15 |
| [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming (0) | 2024.01.15 |
| [next 14 공식문서 부시기] 2.1 Page & Layout (0) | 2024.01.13 |
