[next.js] error.js

next.js 13버전의 App Router 기준

error.js란

라우팅할 폴더에 layout.js를 만들고 {children}을 넣어주면 자동으로 page.js 파일이 children으로 들어가는 것처럼
error.js라는 폴더를 만들게 되면 자동으로 React의 Error Boundary의 역할을 해줌

• error.js automatically creates an React Error Boundary that wraps a nested child segment or page.js component.

기존 리액트에서는

    <ErrorBoundary fallback={error.js에서 렌더링하는 컴포넌트}>
            <Page>
    </ErrorBoundary>

이렇게 렌더링 하려는 페이지의 상위 컴포넌트에 에러 바운더리를 직접 명시해야 했지만, 이 과정을 자동으로 해준다는 소리
이렇게 되면 컴포넌트 내에서 try-catch문을 통해 error handling을 할 필요 없이, 특정 과정에서 에러가 발생하면 자동으로 error.js파일이 렌더링 됨(이건 그냥 ErrorBoundary의 기능)

'use client'
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

error.js는 무조건 client components여야 함

const fetchData = async (url) => {
  try {
    const res = await fetch(baseURL + url);
    if (res.status !== 200) {
      throw res.status;
    }
    return res.json();
  } catch (e) {
    throw new Error(e); //e.message에 res.status를 담은 Error 객체 return
  }
};
await fetchData()

page.js 내에서 따로 try-catch문을 사용하지 않아도 저 함수에서 error가 발생하면 자동으로 error.js가 렌더링 되고,
error props에는 저 error 객체가 담기게 됨