Error 핸들링
Next.js에서는 error.js 파일을 통해서 중첩된 라우트에서 발생하는 예기치 못한 런타임 오류를 처리 할 수 있음
클라이언트 컴포넌트에서는 처리할 방법이 많기 때문에 서버에서 다루는 방법에 대해 작성해보자.
- error.tsx : 특정 경로(페이지)에서 발생한 에러를 처리(재시도 or 홈으로 이동)
- global-error.tsx : 앱 전체에서 발생하는 에러를 전역으로 처리
error.tsx
각 경로에서 에러가 발생하면 해당 경로에 생성된 error.tsx가 자동 렌더링
"use client";
import { useRouter } from "next/navigation";
import { startTransition } from "react";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
const { refresh } = useRouter();
return (
<div>
<h2>에러가 발생했습니다</h2>
<h2>{error.message}</h2>
<button
onClick={() =>
startTransition(() => {
refresh();
reset();
})
}
>
Try again
</button>
</div>
);
}
useRouter()와 startTransition()을 꼭 포함시키기
사용하지 않으면 버튼을 클릭해도 새로고침이 되지 않음
refresh() : 강제 새로고침
startTransition() : 상태 업데이트가 긴급하지 않은 경우, 해당 업데이트를 낮은 우선순위 작업으로 처리(ui 응답성 개선)
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>
);
}global-error.tsx가 필요한 이유
- error.tsx는 각 경로(폴더)마다 별도로 적용되기에 해당 경로 내에 발생하는 에러만 처리
- 따라서 앱 전체에서 발생하는 예외, 비동기 로직에서 잡히지 않은 에러, 최상단에서 발생한 에러에 대해서는 error.tsx로는 처리 할 수 없음
항상 “Why?”로 시작하는 프론트엔드 개발자