https://nextjs.org/learn/dashboard-app/error-handling
JS의 try/catch 구분과 Next.js API를 통해 에러를 다루는 법을 배운다.
In this chapter...
- 루트 세그먼트에서 에러를 잡기 위해 error.tsx 파일을 쓰는 법과, 사용자에게 fallback UI를 보여주는 법을 배운다
- 404에러 핸들링을 위해 notFound 함수와 not-found 파일을 사용하는 법
Adding try/catch to Server Actions
에러 핸들링을 위해 서버 액션에 try/catch를 넣어보자.
redirect가 try/catch 블럭 밖에서 호출되는 것 명시.
왜냐하면 redirect는 catch 블럭에서 잡히는 에러 던지기를 통해 실행되기 때문이다.
이것을 피하기 위해, try/catch 다음에 redirect를 실행한다.
redirect는 try가 성공적일 때만 실행된다.
에러가 서버 액션에 던져지면 무슨일이 일어나는지 보자.
예시로) deleInvoice 액션의 최상단에 에러를 던진다.
export async function deleteInvoice(id: string) {
throw new Error('Failed to Delete Invoice');
삭제 시도 시 에러를 볼 수 있다.
이 에러 들은 잠재적 에러를 발견할 때 도움이 되지만, 에러를 사용자에게 보여줌으로써 실패를 방지하고 앱이 계속 실행중이길 원할 것이다.
이것이 Next.js 의 error.tsx 파일이 하는 일이다.
Handling all errors with error.tsx
error.tsx 파일은 루트 세그먼트를 위한 UI 바운더리를 정의할 때 사용할 수 있다.
예상치 못했던 에러를 잡고 사용자에게 fallback UI를 보여준다.
/dashboard/invoices 폴더 안에 error.tsx를 만든다.
코드 설명
- use client : 클라이언트 컴포넌트여야 한다.
- 2개의 프롭을 받는다
- error: JS Error 객체의 인스턴스
- reset: 에러 바운더리 초기화 함수. 실행 시, 루트 세그먼트를 리렌더 함
삭제 다시 시도 시, 다음 UI를 볼 수 있다.
Handling 404 errors with the notFound function
에러를 다루는 또 다른 방법은 notFound 함수이다.
error.tsx가 모든 에러를 잡는다면, notFound는 존재하지 않는 리소스 fetch에 적합나다.
예시로, http://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit 를 들어가본다.
이것은 db에 존재하지 않는 가짜 UUID이다.
즉각적으로 error.tsx가 실행되는 것을 볼 수 있는데, error.tsx가 정의된 /invoices의 자식 루트이기 때문이다.
그러나, 더 구체적으로 사용자에게 접근하려하는 리소스가 없다고 404 에러를 보여주기 원한다.
data.ts 내 getchInvoiceById 함수에 가서 리소스가 존재 하지 않음을 확실히 할 수 있다. 또한 반환되는 인보이스를 콘솔에 로그로 찍는다.
이제 인보이스가 db에 없음을 알았고, 관리를 위해 notFound를 사용하자.
/dashboard/invoices/[id]/edit/page.tsx 로 가서 import { notFound } from 'next/navigation'
이제 인보이스 존재 여부에 따른 조건문 추가 가능하다
Pae는 특정 인보이스가 없으면 이제 에러를 던질 것이다.
UI를 사용자에게 보이기 위해 /edit 폴더에 not-found.tsx 를 생성한다.
notFound는 error.tsx 이전이므로 다른 특정 에러들을 위해 더 나아갈 수 있다.
