개발자
Next.js 에러 핸들링
Next.js 에러 핸들링을 위해 루트에 error.tsx파일을 생성했습니다. 특정페이지에서 서버 컴포넌트를 만든 후 `throw new Error` 를 통해 에러 발생시 위에서 생성했던 에러페이지(root/error.tsx)로 대체됩니다. 그러나 클라이언트 컴포넌트("use client")에서 테스트 하기위해, button태그의 onClick을 통해 `throw new Error`를 실행시켰습니다. 이때 콘솔에만 출력되고 따로 에러페이지로 대체 되진않았습니다. 클라이언트 컴포넌트에선 해당 동작을 통해서는 에러페이지로 대체되는 핸들링이 되지않는걸까요?? Next: v14
답변 1
Next.js에서 에러 핸들링을 하기 위해서는 ErrorBoundary 컴포넌트로 핸들링할 컴포넌트를 감싸주고 fallback으로 error 레이아웃 컴포넌트를 넘겨줘야 하는 것으로 알고 있습니다. 다음은 공식문서에 해당 내용입니다. https://nextjs.org/docs/app/building-your-application/routing/error-handling
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 05일
Next.js의 서버 컴포넌트에서 발생하는 에러는 _error.js나 _error.tsx 파일을 통해 핸들링 될 수 있습니다. 하지만 클라이언트 사이드에서 발생한 에러는 이렇게 핸들링 되지 않습니다. 서버사이드와 클라이언트 사이드 에러를 동일하게 처리하려면, React의 Error Boundaries를 사용할 수 있습니다. Error Boundaries는 자식 컴포넌트 트리에서 어디서든 JavaScript 오류를 catch하여 렌더링 도중에 오류가 발생해도 UI를 깨뜨리지 않게 해줍니다. Error Boundary는 새로운 클래스 컴포넌트를 만들어 `getDerivedStateFromError` 또는 `componentDidCatch` 라이프사이클 메서드 중 하나 혹은 모두를 사용합니다. 이 메서드들은 에러 정보를 파악하고 fallback UI를 제공할 때 유용합니다. 그런 다음, 애플리케이션의 최상위 레벨에 이 Error Boundary 컴포넌트를 사용하면 클라이언트 사이드에서 발생하는 모든 에러를 catch하고 처리할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!