Next.js에서 에러를 핸들링 하는 방법
😉error.js
https://nextjs.org/docs/app/api-reference/file-conventions/error
File Conventions: error.js | Next.js
Using App Router Features available in /app
nextjs.org
error.js는 예약된 이름의 파일입니다.
에러가 발생했을 때 표시되게 되는 파일이에요
사실 Next.js가 제공하는 문서에서 아주 잘 설명을 해주고 있습니다.
'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는 레이아웃 컴포넌트 안에 중첩되어 있기때문에
같은 깊이의 layout.js 컴포넌트에서 발생한 오류는 처리하지 않는다는 특징도 있어요!
그런데 그러면 의문이 생길 수 있습니다.
항상 한단계 상위의 위치에서 error.js를 작성해야한다면 루트에서의 에러처리는 어떻게...하지..?
라고 생각을 할 수 있지만 그런 경우에는
app/global-error.js라는 예약된 이름으로 파일을 생성해주면 됩니다.
또한 error 컴포넌트는 props로 error 객체와 reset 함수를 전달 받습니다.
이 reset 함수는 말그대로의 의미를 지닌다고 생각할 수 있습니다.
'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>
);
}이런형식으로 비슷하게 작성을 해주면 되는데
다만 GlobalError시에는 루트가되는 layout.js도 맛이 갔을수있으니
html,body태그를 갖고 리턴을 시켜줘야하는 부분이 다른점이라고 볼 수 있습니다.
공식문서에서도 global-error.js는 layout.js또한 대체하게 되니
html, body태그도 함께 리턴해야한다고 알려주네요
같이 보면 좋은 문서로 라우팅 카테고리의
Error handling 파트가 있습니다.
https://nextjs.org/docs/app/building-your-application/routing/error-handling
Routing: Error Handling | Next.js
Using App Router Features available in /app
nextjs.org
아까 제공되었던 reset()함수 기억나실까요?
이 reset 함수는 오류의 원인이 일시적인 것일 때 유용하게 사용됩니다.
reset함수가 실행되면 Error boundary에 포함되어있는 내용들을 다시 렌더링하려고 시도하게 되어요!
그리고 만약 이 시도가 성공하게 되면 error.js가 렌더링되고 있던 화면은
렌더링된 결과로 대체되게 된답니다.
추가로 매개변수의 타입같은 경우에는 공식문서의 경우를 참고하면
{
error: Error;
reset: () => void;
}이렇게 작성한다는 것도 기억하고 가면 좋겠습니다.