클라이언트 사이드에서 발생하는 js Error Tracking, 전쟁의 서막…
결론만 말하면…
백엔드의 로그 트래킹, 분석을 ELK(Elasticsearch-Logstash-Kibana), GrayLog 같은 툴로 관리하는 것처럼 프론트엔드도 로그 트래킹 및 분석이 가능하다. 백엔드는 서비스를 제공하는 회사의 서버에서 발생하는 로그를 쌓는 것과 달리 프론트엔드는 클라이언트에서 발생하는 로그를 쌓아야하는데, Unexpected Error 가 발생할때마다 특정 서버에다가 에러 내용을 쏴주도록 만들어서 관리하면 되겠지만, 부분적 유료 서비스 중에 이를 제공해주는 Sentry.io라는 녀석이 있다. 적용하는건 너무 쉽다. Ga같은 마케팅 트래킹 툴을 붙이는 수준이다. 물론 커스텀에 따라 정도가 다르겠지만? 암튼 Sentry.io 붙이기는 아주 간단하지만, 이를 관리하고 쏟아지는 에러를 수정하는 전쟁의 서막이다.
프론트엔드의 약점(?)
백엔드와 달리 프론트엔드는 서비스가 클라이언트 사이드에서 돌아가는 경우가 많고, 그렇게에 다양한 사용자 환경에 대한 이슈들이 발생하기 마련이다.
크로스 브라우징, 모바일 데이터 환경, 모바일 기기별 대응 등…
가능한 많은 방법과 툴을 활용하여 이에 대응하지만 완벽은 없다.
결국 프론트엔드도 예상치 못한 버그에 대응을 해야하는데.. 사실 내가 안짠 레거시 코드들이 어디서 어떻게 폭주하고 있을지 모르…
이를 대응하기 위해서 클라이언트 사이드에서 발생하는 js error 들을 트래킹할 수 있는 툴을 알아보다가 Sentry.io를 적용해보기로 했다.
다양한 선택지가 있겠지만, Sentry.io Alternatives
회사에서 적용에 흔쾌히 오케이 해줘서 프론트엔드 리소스가 너무 부족해서 어쩔 수 없.. 바로 적용했다.
적용순서
-
Sentry.io 계정 생성(Team 도 생성하면 다양한 계정을 묶어서 사용가능)
-
Project 생성 (Javascript로 다양한 선택 가능 React도 가능)
-
Configure Application 따라서 적용하면 끝
-
자바스크립트의 경우
<script src="https://browser.sentry-cdn.com/5.4.0/bundle.min.js" crossorigin="anonymous"></script> <script>Sentry.init({dsn: 'https://[key]@sentry.io/[key]'});</script> -
특정 도메인에서만 트래킹 코드가 동작하도록 제한을 둘수도 있고,
-
트래킹할 조건과 트래킹 인터벌도 정할 수 있고,
-
Slack에 어플리케이션을 추가하여 채널에 알림을 받을 수도 있다.
그 결과물이다.
실 서비스에 배포한 이후로 폭주하는 에러로그에 크리티컬한 이슈는 바로바로 해소하고 그외에는 Jira 백로그에 쌓고, Ignore하면 동일한 이유의 알럿은 받지 않을 수 있다.
다행히도 전혀 생각지도 못했던 에러가 발생하지는 않았지만, 사용자들이 겪는 에러를 한눈에 볼 수 있다는 점에서 아주 유용한 툴이다.
물론 로그 트래픽에 따른 비용이 있긴하지만…ㅎ
유용한 툴은 비용을 지불하면서도 사용하자는 주의라 만족스럽다.
생각보다 아주 상세한 에러 로그를 확인할 수 있다. 사용자의 기기, ip 는 물론 에러가 발생하는 코드의 위치까지 상세하며, 유사한 로그를 모아보는 기능도 아주 쓸만하다.