[Next.js] Error part.2

Recovering from Errors

error.tsx에서 컴포넌트를 생성하면 reset 파라미터를 사용할 수 있습니다.

 

해당 함수는 에러가 발생했던 지점부터 다시 렌더링을 시도합니다. router의 refresh 함수와는 다시 시도 동작으로 비슷해 보이지만, 사용하는 목적이 다른 함수입니다.

 

	reset	refresh
목적	에러 상태 제거 및 에러 지점부터 다시 렌더링 시도	현재 URL 기준으로 전체 서버 컴포넌트 트리 강제 요청
동작 범위	ErrorBoundary까지	layout을 포함한 현재 경로 전체
사용 방법	error.tsx 내부에서 reset 함수	useRouter().refresh()로 어디서든 사용
적합한 상황	사용자 입력 오류, 네트워크 불안정 등 일시적인 에러	서버에서 최신 데이터 패칭

 

Handling Errors in Nestes Routes

Error는 항상 가장 가까운 ErrorBoundary로 이동합니다. 그렇기 때문에 error.tsx의 위치에 따라 어떤 에러를 잡아서 보여주는가에 대한 차이가 발생합니다.

 

예를 들어 app/error.tsx와 app/some/error.tsx가 있다면 some/page.tsx에서 발생한 에러는 app/some/error.tsx에서 처리합니다.

 

Handling errors in layouts

 에러가 가장 가까운 error boundary에 걸리기 때문에 같은 계층에 있는 layout에서 에러가 발생하면 error.tsx가 동작하지 않습니다. 그렇기에 layout의 에러를 잡고 싶다면 error.tsx를 layout보다 한 계층 위에 만들어야 합니다.

 

그렇다면 최상위 app/layout의 경우 어떻게 에러를 잡을 수 있을까?

 

Handling Global Errors

루트 layout에서 발생하는 에러를 잡기 위해서 사용되는 것이 global-error.tsx 파일입니다. app 폴더 밑에 생성하여 사용할 수 있습니다.

 

기타 error.tsx와의 차이점은 두 가지입니다.

• production mode에서만 동작한다.
• html과 body 태그로 감싸주어야 리렌더링이 가능하다.

 

참고

https://nextjs-ko.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY