목표
Next 공식 문서의 내용에 따라
Routing 간 발생하는 Error를 처리하는 방법을 소개한다.
내용
서론
기존 React의 class component에서 ErrorBoundary를 통해
rendering error에 대한 예외 처리를 하는 방식을 활용한다.
본론
Convention
runtime(request time)에 발생할 오류 발생 시에 보여줄 컴포넌트를
error 파일에 정의한다.
not-found 파일은 내부적으로 NEXT_NOT_FOUND을 throw하는 notFound() 함수가 호출되었을 때 처리하는 파일이다.
즉, 일반적인 Error는 error 파일에서 처리하고,
not-found 파일은 흔히 발생하는 404 Error에 대한 처리를 전담한다.
app/dashboard/error.tsx
'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가 상위 컴포넌트로 확산되는 것을 방지하여 애플리케이션이 계속적으로 기능하도록 만든다. 또한 에러가 발생하더라도 ErrorBoundary 상위 컴포넌트의 상태는 모두 보존된 상태로 유지되며, 이를 통해 구분된 영역에 대해 독립적으로 에러를 처리하거나 복구할 수 있도록 돕는다.
위 그림에서는 명시되어 있지 않지만,
에러 페이지는 반드시 Client 컴포넌트로 작성되어야 한다.
(이는 자명한데, ErrorBoundary라는 React concept을 빌렸기 때문이다.)
reset() 함수를 통해 ErrorBoundary 내부에 대한 rerendering을 시도할 수 있다. 성공하면 error 컴포넌트는 대체된다.
Handling Errors in Layouts
주의할 점은 error가 발생했을 때, 가장 가까운 부모 컴포넌트의 ErrorBoundary로 bubble up 된다는 것이다. (Event 위임 패턴)
따라서, 가능하면 Segment 별로 error 파일을 생성하는 것이 좋다.
이전에도 다룬 적 있지만, segment에서 중첩되는 방식은 다음과 같다.
따라서 layout, template과 같은 수준에서 error 파일을 정의하면
layout과 template에서 발생하는 에러는 처리할 수 없다. 이는 매우 합리적인 결정인데, 병렬적으로 위치하여 layout을 공유하는 경우가 존재하기 때문이다.
이러한 사실을 기반으로 두 가지 전략을 취할 수 있다.
- Error가 발생할 수 있는 부분은 Page로 분리하여 관리한다.
- 어떤 Segment에 대한 예외 처리를 부모 Segment에서 관리한다.
Handling Errors in Root Layouts
Root layout에 대한 error 파일은 별도로 global-error이라는 이름으로 정의한다. 이 파일은 전체 애플리케이션의 범위에서 catch-all error handling을 주관한다.
전체 애플리케이션을 감싸야 하기 때문에 <html>과 <body> 태그가 포함되어야 한다. 또한 page가 완전히 대체(full loading)되기 때문에 가능하면 Root 디렉토리에도 별도의 error 파일을 선언하여, 가능하면 global-error 파일이 사용되지 않도록 하는 것이 좋다.
Handling Server Errors
Server 컴포넌트에서 전달되는 Error는 error 파일의 error prop으로 전달된다. Development 단계에서는 message로 original error가 전달되나, Production에서는 보안 이슈로 generic message로 대체된다.
다음 단계
Parallel Routes 기능을 활용하여
하나의 Layout에 다양한 페이지를 병렬적으로 위치시키는 방법을 소개한다.
시리즈
Terminology
Defining Routes
Pages and Layouts
Linking and Navigating
Route Groups
Dynamic Routes
Loading UI and Streaming
Error Handling
Parallel Routes
Intercepting Routes
Route Handlers
Middleware
Project Organization
Internationalization
layout에서 발생하는 에러를 처리하기 위한 두가지 전략 중 " 어떤 Segment에 대한 예외 처리를 부모 Segment에서 관리한다." 이 부분이 잘 이해가 안갑니다. 그렇다면 어떤 페이지의 nested layout에 대한 에러를 처리하기 위해서는 부모의 세그먼트에 error.js를 만들어주면 자식의 layout에 대한 에러를 처리할 수 있다는 말인가요?