JENNIFER Front로 웹사이트 모니터링하기

• 키워드: jennifer front, monitoring, error logging, ajax error, js error
• 상황
  1. 웹사이트를 이용하던 유저로부터 버그 제보가 들어왔을 경우, Server Error이거나 반복적인 버그인 경우 추적 및 해결이 간단하지만 프론트엔드 단에서 간헐적으로 발생하거나 우연히 발생한 버그인 경우 추적이 어렵다.
  2. 웹사이트에서 발생하는 network error 또는 JS error를 로깅할 필요가 있다.
• 해결 방법
  1. 쉽고 빠르게 웹사이트에 적용할 수 있는 모니터링 툴을 간단하게 소개하고자한다.
     바로 제니퍼 프론트(https://front.jennifersoft.com/about/ko/)이다.
     

     

     제니퍼 프론트 랜딩페이지

  2. 구글 계정으로 로그인을 하고, 추적 코드를 복사한다.
     

     

     새 애플리케이션 만들기

     추적 코드를 웹사이트의 필요한 페이지에 복사하면 되는데, 본인의 경우 리액트 프로젝트 전체의 JS error를 추적하는 것이 주목적이므로 'index.html'의 head tag에 코드를 복사한다.
     

       <!-- index.html -->
     <script>
       if ('%REACT_APP_MODE%' === 'production') {
         (function(j,ennifer) {
           j['dmndata']=[];j['jenniferFront']=function(args){window.dmndata.push(args)};
           j['dmnaid']=ennifer;j['dmnatime']=new Date();j['dmnanocookie']=false;j['dmnajennifer']='JENNIFER_FRONT@INTG';
         }(window, '...'));
       }
     </script>
     <script async src="https://d-collect.jennifersoft.com/.../demian.js"></script>

      'if ('%REACT_APP_MODE%' === 'production')' 을 통해 production mode일 때만 로깅하도록 한다.
     
     
  3. 이제 웹사이트를 배포하면 제니퍼 프론트 대시보드를 통해 모든 정보를 모니터링 할 수 있다.
     

     

     메인 대시보드

     페이지 호출 시간/수, 접속자 수, resource/page load 시간 등 기본 정보를 확인할 수 있다.
     
     
     

     

     JS Error 탭

     오른쪽의 JS Error 탭을 눌러 어떤 js error가 언제 발생했는지 알 수 있다. 프론트엔드 단에서 발생하는 에러의 원인을 찾고 재현하는 데에 큰 도움이 될 것 같다.
     
     

     

     AJAX 탭

     AJAX 탭에서 모든 ajax 요청에 대한 정보를 확인할 수 있다.
     에러 추적과 더불어 network 시간, 용량 등의 정보를 바탕으로 백엔드 개발자와 수월한 의논이 가능하다.
     
     JENNIFER Front 외의 모니터링 툴도 많겠지만, JENNIFER Front는 쉽고 빠르게 도입할 수 있었고 제공해주는 정보와 UI/UX 모두 만족스러웠다.