Learn Next.js 제 13장 : Handling Errors

이번 장에서 배울 내용

* 스페셜 사용 방법error.tsx 경로 세그먼트에서 오류를 발견하고 사용자에게 폴백 UI를 보여주기 위해 파일을 작성합니다.

* 사용 방법notFound 함수 및not-found 404개의 오류를 처리할 파일입니다(존재하지 않는 리소스의 경우).

---

next.js에서 에러 핸들링을 어떻게 하는지 배운 챕터

챕터를 시작하면서 데이터베이스와 관련된 에러는 치명적일 수 있기 때문에 try catch문을 사용하는 걸 권장한다.

Error Handling 2가지 개념을 소개한다.

error.tsx 와 not-found.tsx 이다.

점차 폴더 기반 시스템에 익숙해지는 중이라면 이해하기 쉬울 것이다.

우선 invoices 폴더 내의 error를 관리하는 게 목적이니 해당 폴더의 자식으로 error.tsx 파일을 생성한다.

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <main className="flex h-full flex-col items-center justify-center">
      ......
      >
        Try again
      </button>
    </main>
  );
}

해당 페이지는 브라우저 기능을 사용하는 게 아닌 개발자가 의도한 환경을 보여준다. 즉 기본적인 오류 페이지이다.

404 Error 같은 error는 잘못된 UUID로 접속하면 존재하지 않은 URL이라고 개발자가 의도한 페이지를 보여주는 것이다.

이를 위해서 not-found.tsx 파일을 dashboard/invoices/[id]/edit 폴더의 자식으로 생성한다.

 

이번챕터는 간단한 내용이어서 이것으로 마무리한다.