Next.js 앱 라우터의 에러 핸들링

error.tsx

App Router에서는 error.tsx 파일을 사용하여 특정 경로 및 그 하위 경로에서 발생한 에러에 대한 UI를 설정할 수 있다.

기본 사용법

"use client";

export default function Error() {
  return (
    <div>
      <h3>오류가 발생했습니다.</h3>
    </div>
  );
};

• "use client" 지시어를 통해 반드시 클라이언트 컴포넌트로 설정해야 한다.
• 서버와 클라이언트 양쪽에서 발생할 수 있는 모든 에러에 대응할 수 있다.

 

Props 활용

Next.js는 error와 reset props를 에러 컴포넌트에 자동으로 전달한다.

"use client";

import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error.message);
  }, [error]);

  return (
    <div>
      <h3>오류가 발생했습니다.</h3>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
};

• error: 발생한 오류 정보
• reset: 에러 상태를 초기화하고 컴포넌트들을 다시 렌더링하는 함수

 

서버 컴포넌트 재실행

reset 함수만으로는 서버 관련 에러를 복구할 수 없다.

서버 컴포넌트를 재실행하려면 다음과 같은 방법을 사용할 수 있다

1. 브라우저 새로고침 (권장하지 않음)

<button onClick={() => window.location.reload()}>다시 시도</button>

• 모든 상태와 클라이언트 데이터가 초기화되므로 주의가 필요하다.

2. useRouter의 refresh 메서드 활용

import { startTransition, useEffect } from "react";

// ...

  <button
    onClick={() => {
      // 함수 하나는 인수로받아서, 해당 함수 내부의 코드를 동기적으로 실행
      startTransition(() => {
        router.refresh(); // 서버 컴포넌트 재실행
        reset(); // 에러 상태 초기화 및 재렌더링
      });
    }}
  >
    다시 시도
  </button>

• router.refresh()는 현재 페이지의 서버 컴포넌트만 재실행한다.
• startTransition을 사용하여 비동기 작업을 처리한다.

 

주의사항

• error.tsx의 영향 범위는 해당 파일이 위치한 디렉토리와 그 하위 경로이다.
• 하위 경로에 대해 다른 에러 처리를 원할 경우, 해당 경로에 별도의 error.tsx를 생성하면 된다.