qna-banner-ad

개발자

Nextjs Application error를 핸들링 할 수 있나요?

2024년 05월 02일조회 358

Nextjs로 개발중인데 Application error: a client-side exception has occurred가 간헐적으로 발생하고 있습니다. 위 에러가 뜰 경우에는 예외 처리를 해주려고 하는데 언제 어떻게 뜰 지 모르기 때문에 핸들링이 안되고 그대로 에러가 노출되고 있습니다 핸들링을 할 수 있는 방법이 있다면 공유 해주시면 감사하겠습니다!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

허니님의 프로필 사진

에러 바운더리로 되지 않을까요?

김태우님의 프로필 사진

제가 저 에러를 여러 번 경험했었는데 아마 라우팅할 때 같은 레벨에 있는 두 페이지 간에 이동할 때 발생했던 기억이 있습니다. 기존에 있던 페이지는 ssr 페이지이고 다른 페이지는 csr일 때 저 에러가 발생했었던 거 같습니다. 그당시 저 에러를 핸들링 해보려고 했으나 애플리케이션 자체 에러라서 저는 못했던 기억이 있네요. 도움이 되셨길 바랍니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 05월 02일

Next.js Application Error 핸들링은 아래의 단계를 통해 이루어질 수 있습니다. 기본적으로는 Next.js가 제공하는 Error 컴포넌트를 사용하거나 Apollo나 Sentry와 같은 도구를 함께 사용하여 에러 핸들링을 개선하는 방법이 있습니다. 1. **기본 에러 페이지 커스텀하기**: Next.js에서 `_error.js`라는 파일을 만들면, 이 파일이 모든 에러에 대한 디폴트 처리를 담당합니다. 여기서 HTTP 상태 코드에 따라 다른 오류 페이지를 렌더링하거나, 서버에서 클라이언트로 추가 데이터를 전달할 수 있습니다. 예시: ```js // _error.js function Error({ statusCode }) { return ( <p> {statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'} </p> ) } Error.getInitialProps = ({ res, err }) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404; return { statusCode }; } export default Error; ``` 2. **외부 에러 핸들링 도구 사용하기**: Apollo나 Sentry와 같은 외부 도구를 함께 사용할 것을 권장합니다. 이런 서비스들은 에러 추적 및 디버깅에 유용한 정보를 제공합니다. 3. **getServerSideProps / getInitialProps에서 예외 처리하기**: Next.js API Routes에서 예외를 발생시키면, 이를 _error.js 페이지에서 처리할 수 있습니다. 버그를 찾아 해결하거나 클라이언트에 의미있는 에러 메시지를 반환하는 것이 중요합니다. ```js export async function getServerSideProps() { try { // fetch data and stuff } catch (err) { return { props: { errors: err.message } } } } ``` 위 방법들을 통해 다양한 유형의 에러에 대응하는 핸들링 전략을 구축할 수 있습니다. 에러 상황 별로 적절한 처리 방식과 메시지를 선택하려고 노력하는 것이 중요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!