[javascript] Marionette.js로 개발된 웹 애플리케이션의 성능 모니터링 도구와 로깅 솔루션은 어떤 것들이 있는가?

29 Nov 2023

javascript

성능 모니터링 도구

Boomerang - 브라우저의 성능을 모니터링하기 위해 사용되는 JavaScript 기반의 오픈 소스 프로젝트입니다. Boomerang은 네트워크 지연, 페이지 로딩 속도 등의 성능 지표를 수집하고 분석할 수 있습니다.

 // Boomerang 초기화
 var BOOMR_start = new Date().getTime();
 var BOOMR = window.BOOMR || {};
 BOOMR.init({
   beacon_url: "/beacon", // 결과 전송 URL
   log: {
     enabled: false // 로그 활성화 여부
   }
 });

 // Boomerang 시간 측정 종료
 var BOOMR_end = new Date().getTime();
 BOOMR.addVar("t_done", BOOMR_end - BOOMR_start);
 BOOMR.sendBeacon();

Google Analytics - 웹 애플리케이션의 사용자 행동, 페이지 뷰, 성능 등을 모니터링하기 위해 사용되는 무료 웹 분석 서비스입니다. Google Analytics를 Marionette.js 애플리케이션과 통합하여 페이지 로딩 시간 또는 AJAX 요청에 대한 응답 시간을 측정할 수 있습니다.

 // Google Analytics 초기화
 ga('create', 'UA-XXXXXXXX-X', 'auto');

 // 페이지 로딩 시간 추적
 ga('send', 'timing', 'page', 'load', performance.timing.loadEventEnd - performance.timing.navigationStart);

 // AJAX 요청 시간 추적
 Backbone.ajax = function() {
   var startTime = new Date().getTime();
   var ajax = Backbone.$.ajax.apply(Backbone.$, arguments);
   ajax.done(function() {
     var endTime = new Date().getTime();
     var duration = endTime - startTime;
     ga('send', 'timing', 'ajax', 'request', duration, arguments[0]['url']);
   });
   return ajax;
 };

로깅 솔루션

Log4js - JavaScript 기반의 로깅 프레임워크로, 다양한 로깅 레벨 및 출력 형식을 지원합니다. Marionette.js 애플리케이션에서 Log4js를 사용하면 클라이언트 측 로그를 관리하고 디버깅에 도움이 됩니다.

 // Log4js 초기화
 var log4js = require('log4js');
 log4js.configure({
   appenders: { 'console': { type: 'console' } },
   categories: { default: { appenders: ['console'], level: 'debug' } }
 });
 var logger = log4js.getLogger();

 // 로그 출력
 logger.trace('This is a trace log');
 logger.debug('This is a debug log');
 logger.info('This is an info log');
 logger.warn('This is a warning log');
 logger.error('This is an error log');

Sentry - 오픈 소스 에러 추적 도구로, 애플리케이션에서 발생하는 에러를 수집하고 모니터링할 수 있습니다. Marionette.js 애플리케이션에서 Sentry를 사용하면 애플리케이션의 안정성을 향상시킬 수 있습니다.
```
 // Sentry 초기화
 var Raven = require('raven-js');
 Raven.config('YOUR_SENTRY_DSN').install();

 // 에러 추적
 try {
   // 애플리케이션 코드
 } catch (error) {
   Raven.captureException(error);
 }
```

이상의 성능 모니터링 도구와 로깅 솔루션은 Marionette.js로 개발된 웹 애플리케이션의 성능을 모니터링하고 로그를 기록하는 데에 유용합니다. 각 도구 및 솔루션의 문서를 참조하여 필요한 설정 및 활용 방법을 확인하시기 바랍니다.

참고 자료: