Next.js

Next.js에서 에러를 핸들링 하는 방법

냠냠맨 2023. 5. 27. 21:57

😉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;
}

이렇게 작성한다는 것도 기억하고 가면 좋겠습니다.

 

반응형