728x90
next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의
Error Handling
error.js 이용
- React Error Boundary에서 경로 세그먼트와 중첩된 자식을 자동으로 래핑
- 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춤화된 오류 UI를 생성하여 세분성을 조정
- 나머지 앱 기능을 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리
- 전체 페이지를 다시 로드하지 않고 오류 복구를 시도하는 기능이 있음
error.tsx
'use client'; // Error components must be Client components
import { useEffect } from 'react';
export default function Error({
error,
reset,
}: {
error: Error;
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 작동방식
- error.js는 중첩된 자식 세그먼트 또는 page.js 컴포넌트를 감싸는 React Error Boundary를 자동으로 생성함.
- error.js 파일에서 내보낸 React 컴포넌트가 폴백 컴포넌트로 사용됨.
- 에러 경계 내에서 에러가 발생하면 에러가 포함되고 폴백 컴포넌트가 렌더링됨.
- 폴백 오류 컴포넌트가 활성화되면 오류 경계 위의 레이아웃은 해당 상태를 유지하고 대화형 상태를 유지하며 오류 컴포넌트는 오류를 복구하는 기능을 표시할 수 있음.
오류 복구
오류가 일시적일 수 있음. reset() 기능을 이용해 오류복구를 시도하라는 메세지를 출력하고 리렌더링을 시도함.
중첩 경로
중첩해서 error.js가 있는 경우
- 가장 가까운 상위 오류 경계까지 버블링됨
- 레이아웃 내부에 중첩되어 있어서 동일한 세그먼트의 layout.js에는 동작안함
레이아웃의 오류 처리
상위에 error.js 를 배치하셈
루트 레이아웃의 오류 처리
루트의 app/error.js는 layout.js나 template.js의 오류를 처리하지 않음.
이런 경우 global-error.js 를 쓰면됨.(대신 루트레이아웃을 대체하기때문에 <html> <body>가 있어야함.)
'use client';
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
);
}
서버 오류 처리
데이터를 가져오는 동안 또는 서버 컴포넌트 내부에서 오류가 발생하면 Error 개체를 가장 가까운 error.js에 props로 전달함.
'공부공부 > Next.js 공식문서' 카테고리의 다른 글
| [next.js 공식문서] 08. Parallel Routes (0) | 2024.02.27 |
|---|---|
| [next.js 공식문서] 07. Route Handlers (0) | 2024.02.27 |
| [next.js 공식문서] 05. Loading UI (0) | 2024.02.27 |
| [next.js 공식문서] 04. Linking and Navigating (1) | 2024.02.27 |
| [next.js 공식문서] 03. Pages and Layouts (0) | 2024.02.27 |