ReactJS 에러 추적 장치 삽입 #7
Labels
Projects
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
기능 제안 (Feature Request)
기능 요약
React JS에서 사용자의 브라우저에서 발생하는 에러를 추적하기 위한 도구 삽입
기능 배경
우리는 프로젝트에서 React JS 를 바탕으로 생성된 애플리케이션을 사용자에게 FE로서 제공합니다. React JS는 Single Page Application(SPA)로서, 사용자에게 애플리케이션 구동을 위하여 필요한 모든 파일을 전달한다는 특징이 있습니다. 이렇게 전달된 파일에는 HTML, JS, CSS등 웹 브라우저에서 화면을 랜더링하기 위하여 필요한 도구들을 포함하고 있으며, 추가적인 정보는 외부 API를 통하여 요청 & 표현 하게 됩니다.
SPA의 특성상 실행되는 코드(JS, React)와 이에 대한 결과 모두 사용자의 브라우저에서 존재하게 됩니다. 그러므로 SPA가 한번 배포되어 사용자에게 전달되면, 이 애플리케이션에 대한 제어권은 저희(개발자)의 손을 벗어나게 됩니다.
이는 서비스 이용에 전혀 문제가 없는 형태이며, 이상한 점도 없지만 에러 발생시에 그 추적이 어렵게 됩니다.
개발자 모드에서 React JS를 개발하게 되면, 다양한 debugging 도구를 통하여 오류를 검출하고 개선하게 됩니다. 또한, 테스트를 통하여 어느정도 품질에 대한 자신감을 부여할 수 있습니다. 다만, 아무리 잘 작성된 테스트라 하여도 사용자의 모든 사용 패턴을 포함할 수 없고, 예상치 못한 에러는 항상 존재하는 문제 입니다.
위에서 언급한 배포된 React앱의 경우, 사용자에게 전달된 시점에서 서술하였듯이 다양한 에러가 발생 할 수 있지만, 이를 개발자의 입장에서는 알 수 없습니다. 최악의 경우에는 사용자 브라우저에서 앱이 완전히 정지(crash되어) 되어도 개발자는 전혀 알 수 없으며, 이 상황에 대한 자발적인 사용자의 "오류 신고"가 제공될 때 까지 오랜 시간이 소요될 수 있습니다.
사용자에서 발생하는 주요하고 긴급한 에러와 여러 크고 작은 에러들을 수집하고, 이를 관리 & 분석 하여 서비스를 개선 시킬 수 있는 방법이 필요합니다.
원하는 결과
사용자에게 전달된 React JS 에서 발생하는 에러들을 실시간에 가깝게 통보받을 수 있고, 다양한 분석 도구를 포함하여 빠른 서비스 개선을 가능토록 합니다.
원하는 결과를 위한 방법 제시
Sentry
상용화된 도구이자, 오픈소스 도구인 Sentry를 사용하는 방법을 제안합니다.
이 도구는 ReactJS에 손쉽게 삽입할 수 있는 구체적인 공식 문서를 제공하여 빠른 사용이 가능하게 해줍니다.
또한, 디버깅을 위한 다양한 도구들과 시각화 도구를 제공합니다.
고려할만한 대안 (선택)
React 16 Error Boundaries
React JS의 v16 부터는 Error Boundaries라는 기능을 제공합니다. 이 기능을 통하여 우리는 중앙에서 ReactJS에서 발생된 다양한 에러들을 중앙에서 수집할 수 있습니다. 수집된 에러를 우리의 에러 수집 공간으로 보내어 관리할 수 있습니다.
다만, 이 방식을 사용하면 별도의 분석 & 시각화 도구가 필요합니다.
Try / Catch
React JS의 공식문서에 언급되어 있듯이, try/catch는 imperative 스타일의 코드에서 사용 됩니다. 반면, React JS는 declarative 한 스타일을 제공하여 try/catch의 에러 처리 방식이 적합하지 않습니다.
다만, 컴포넌트 내부에서 외부 통신등과 같은 상황은 try/catch 로 에러를 수집하여 외부로 전송하는 방법을 사용할 수 있습니다.
체크리스트
The text was updated successfully, but these errors were encountered: