6. 에러 처리

Next.js에서는 error.js 파일 컨벤션을 통해 에러를 처리할 수 있도록 제공함

서비스는 적절한 에러 처리를 통해 사용자가 당황하지 않고 서비스를 지속적으로 이용할 수 있도록 안내해야함

localhost:3000/dashboard 페이지에 대한 에러 처리를 적용할 경우
→ app/dashboard/error.js 생성

error.js


'use client' // Error 컴포넌트는 Client Component로 정의되어야함(Rendering 파트 설명 참고)
 
import { useEffect } from 'react'
 
export default function Error({ error, reset }) {
  useEffect(() => {
    // 에러 내용 출력
    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>
  )
}

2. 발생한 에러로부터 회복, 벗어나기(Recovering)

에러는 네트워크 상황 등으로 인해 일시적으로 발생할 수도 있기 때문에,

이러한 상황에서는 사용자에게 간단하게 다시 요청을 시도하여 해결할 수 있도록 안내하여 에러를 빠르게 해결하고 지속적인 서비스 이용을 유도해야함

Next.js에서는 props를 통해 전달되는 reset( )을 활용하여 사용자에게 에러로부터 회복할 수 있도록 기능을 제공할 수 있음

error.js


'use client'
 
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>문제가 발생했습니다!</h2>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  )
}

만약 사용자 다시 시도 버튼을 클릭하면,

해당 함수는 에러 경계에 해당하는 컨텐츠를 다시 렌더링하려고 시도하게 되며, 에러 페이지가 아닌 컨텐츠가 표시된 정상적인 페이지로 전환됨

3. error.js의 동작 방식

에러가 발생하였을 경우, Next.js는 아래와 같이 동작함

error.js는 내부적으로 React Error Boundary 컴포넌트를 생성하며, page.js 를 래핑함


<ErrorBoundary fallback={<Error />}>
 <Page />
</ErrorBoundary>

error.js에 작성된 <Error /> 컴포넌트는 에러를 표시하는 fallback 용도로 사용됨

💡

Tip

fallback
(만일의 사태에 대한) 대비책

<ErrorBoundary /> 내에서 에러가 발생하였을 경우, 에러 메시지를 포함하여 fallback 컴포넌트인 <Error />가 화면에 렌더링됨