[Nextjs] ErrorBoundary, Application error: a client-side exception has occurred

[상황]

1. 현재 서비스가 앱의 웹뷰를 통해 진입하여 사용함

2. graphql 를 통한 api 데이터 호출을 함

3. 채팅기능을 위해 폴링 방식으로 진행(이관)

4. addEventListener를 통해 focus, blur 시에 폴링(interval)을 set and clear 

5. 새로운 data가 폴링을 통해 들어오면 랜더링에 사용하는 generator 객체에 추가되어 리랜더링됨

6. 리랜더링되는 과정 or 장시간 앱에서 이탈후 진입시, Application error: a client-side exception has occurred 라는 에러 발생

 

[원인분석, 해결방안]

1. 해당 문제 구글링 검색, Next.js 공식 사이트에 해당 문제 및 해결방법 기재되어있음

https://nextjs.org/docs/messages/client-side-exception-occurred

Client-side Exception Occurred

https://legacy.reactjs.org/docs/error-boundaries.html

Error Boundaries – React

비슷한 상황을 가진 사람의 글도 있음

https://velog.io/@hwon3814/NextJS-ErrorBoundary%EC%97%90%EB%9F%AC-%EA%B2%BD%EA%B3%84

NextJS ErrorBoundary(에러 경계)

 

2. 다시 돌아와 바뀐 UI 가 corrupted and crashed 가 남, 공식사이트에서 다음과 같이 설명되어있음

Error boundaries do not catch errors for:

• Event handlers 
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server side rendering
• Errors thrown in the error boundary itself (rather than its children)

 이벤트 핸들러, 비동기처리, 서버사이드 랜더링 등 자바스크립트에서 발생한 에러를 랜더링과정에서 에러가 나고 훼손될때 catch 하지못함

3. class component 형식으로 getDerivedStateFromError 으로 에러에 따른 state를 업데이트해줌, 또한 DidComponentCatch를 통한 추가적인 로직및 로그를 출력해줌

 

4. 나의 경우 앱을 이탈후 다시 돌아와서 에러 발생시 빈 화면으로만 출력해주고 error state를 true로 해주었다가 1초후 false를하여 해당 페이지를 다시 리렌더링되게 하였다. 리렌더링 하게한것은 _app.js 에 전역으로 <ErrorBoundary> 를 사용하였기 때문임.

하지만 카카오나 다른 글을 봤을때 전역으로 안하고 부분마다 혹은 에러의 컨셉에 따라 부분적으로 주고 해당 Fallback UI 를 주고 retry 버튼을 만들어도됨, 하지만 그정도로 별개의 컴포넌트를 관리할수있는 상황이 아니므로 그렇게까진 안하지만, _app.js가 아닌 해당 채팅 페이지에서만 사용하는 것으로 고려하여 해당 특정 ErrorBoundary 컴포넌트 이름으로 변경하여 사용할 것

[참고하면 좋은 글]
카카오 Error Boundary 사용 에러처리 

https://fe-developers.kakaoent.com/2022/221110-error-boundary/

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기 | 카카오엔터테인먼트 FE 기술블로그