[Next.js] 프로덕션 환경에서 런타임 에러로 인한 무한루프(해결)

특정 페이지 진입시 무한루프 도는 현상 발생

SWR 에러 아님

Request 결과도 정상

local dev 환경에서는 무한루프 발생하지 않음. build 후 production 에서만 발생

원인 : 채널톡 객체 참조 불가 (채널톡 객체 검증 예외처리 미흡)

 

기존 채널톡 스크립트 로드를 전역 script에서 특정 페이지 내부로 옮기면서 문제 발생.

 

 

-> 예외처리 미흡.

 

공통 Page 컴포넌트에는 예외처리 되어있었으나, 해당 페이지는 Page컴포넌트를 사용하지 않고 독자적으로 로직 구현되어 있었음.

공통 page 컴포넌트

 

그로 인해

 

hmr 에러 핸들링에 잡힌 에러

런타임 환경에서 에러 발생 (스크린샷은 local dev 환경)

 

 

GitHub Next.js Issue : _error 페이지가 렌더되지 않고 무한루프에 빠진 케이스

Endless loop when _error render throws on client side · Issue #6973 · vercel/next.js

 

에러 발생 프로세스

1. 클라이언트 런타임 에러 발생
2. next/client/index.js에 error catch됨
3. componentDidCatch 메소드는 renderError function를 호출하는 AppContatiner props.fn 실행
   (이 때 걸리는 error boundary component가 있으면 해당 컴포넌트에서 처리. 없으면 상위로 타고 올라감)
4. dev_mode 에서는 최종적으로 이 renderError function를 Next에 있는 HMR이 핸들링해줌
5. production 에서는 _error 페이지를 로드하고 즉시 리렌더링
6. 사용자 정의 error 페이지(_error)에서 에러가 발생하면 다시 _error 페이지 렌더링 → 무한루프 진입

결론 : 무한루프 원인은 _error 페이지에 있음

error는 toString에서 발생중.

_error page에서 사용되는 toString

status 코드가 undefined. (400, 500처럼 SERVER ERROR HTTP STATUS가 있는게 아닌, 런타임 에러이기 때문)

따라서 undefined에서 toString 호출하며 에러 발생 - > error페이지 무한 리다이렉트 발생.

 

해결책 : toString 메소드 제거(리터럴 처리) 및 statusCode검증 후 렌더링 로직으로 변경