Next.js 에러 핸들링

Question

Next.js 에러 핸들링을 위해 루트에 error.tsx파일을 생성했습니다.

특정페이지에서 서버 컴포넌트를 만든 후 `throw new Error` 를 통해 에러 발생시 위에서 생성했던 에러페이지(root/error.tsx)로 대체됩니다.

그러나 클라이언트 컴포넌트(use client)에서 테스트 하기위해, button태그의 onClick을 통해 `throw new Error`를 실행시켰습니다. 이때 콘솔에만 출력되고 따로 에러페이지로 대체 되진않았습니다.

클라이언트 컴포넌트에선 해당 동작을 통해서는 에러페이지로 대체되는 핸들링이 되지않는걸까요??

Next: v14

김태우 · Answer

Next.js에서 에러 핸들링을 하기 위해서는 ErrorBoundary 컴포넌트로 핸들링할 컴포넌트를 감싸주고 fallback으로 error 레이아웃 컴포넌트를 넘겨줘야 하는 것으로 알고 있습니다. 다음은 공식문서에 해당 내용입니다. https://nextjs.org/docs/app/building-your-application/routing/error-handling

다음은 공식문서에 해당 내용입니다.
https://nextjs.org/docs/app/building-your-application/routing/error-handling