有時候碰到難以複製的User操作情境產生的Javascript Error，或是想要追蹤網頁上的Javascript
Error，光是Browser的Console功能只能log出當前操作的JS錯誤，難以完全掌握JS Error。
尤其現在又越來越多的程式開發透過nodejs執行，直接cli的開發方式碰到複雜的程式更是難檢視相關log!
這時候就可以使用log4javascript來幫忙啦!
log4javascript設計的概念基於Java的log4j，主要實做了loggers,
appenders, layouts跟level。
設定方式
2. 定義js。
<script
type="text/javascript"
src="log4javascript.js"></script>
3. 直接使用。
<script
type="text/javascript">
var log =
log4javascript.getDefaultLogger();
log.trace(message[, message2, ... ][,
exception])
log.debug(message[, message2, ... ][,
exception])
log.info(message[, message2, ... ][,
exception])
log.warn(message[, message2, ... ][,
exception])
log.error(message[, message2, ... ][,
exception])
log.fatal(message[, message2, ... ][,
exception])
</script>
實際案例
以下整理幾個使用的目的並結合相關設定說明：
l 用在正式環境(Production Env.)時，通常僅需要檢視有發生Error或者監控一些狀態的時候使用，因此通常需要保存下來存查。
l 目前已經在很多的開發程式中使用了console在監控，又不想要每一隻都改寫。
綜合上述會變成以下的Code：
/**
* 初始化log4javascript相關設定
* initial log4javascript
* **/
function initialLogger(){
/**
* 預設不會印出Error的Stack資訊，不容易Trace Code
* Default won't print error stack,set true to get stack information **/
log4javascript.setShowStackTraces(true);
/**
* 使用Default沒有PopupAppender的Logger
* Use logger without PopupAppender
* **/
var logger = log4javascript.getLogger('simpleLogger'),
/**
* Use JSP or PHP to handler every log request
* **/
requestUrl = 'urlToHandleLogInfo',
/**
* Setup Ajax appender
* **/
ajaxAppender = new log4javascript.AjaxAppender(requestUrl),
/**
* 使用JSON的格式傳送log
* Use JSON format to send log
* **/
jsonLayout = new log4javascript.JsonLayout(),
/**
* 設定需要通知的Log Level
* Threshold to send ajax request
* ALL,TRACE,DEBUG,INFO,WARN,ERROR,FATAL,OFF is available
* **/
threshold = log4javascript.Level.ERROR;
/** Optional if cross domain is needed**/
ajaxAppender.addHeader('Access-Control-Allow-Origin', '*');
ajaxAppender.addHeader("Content-Type", "application/json");
ajaxAppender.setThreshold(threshold);
ajaxAppender.setLayout(jsonLayout);
logger.addAppender(ajaxAppender);
return logger;
}
/**
* 覆蓋Console的log機制，在console.error的同時印出log且Ajax記錄相關資訊
* Override Console Log ,
* use original console.error to print in console and send ajax request to save log **/
(function () {
let logger = initialLogger();
if (window.console && console.error) {
let old = console.error;
console.error = function () {
logger.error.apply(this, arguments);
Array.prototype.unshift.call(arguments, 'JS Error Report: ');
old.apply(this, arguments);
}
}
})();
* 初始化log4javascript相關設定
* initial log4javascript
* **/
function initialLogger(){
/**
* 預設不會印出Error的Stack資訊，不容易Trace Code
* Default won't print error stack,set true to get stack information **/
log4javascript.setShowStackTraces(true);
/**
* 使用Default沒有PopupAppender的Logger
* Use logger without PopupAppender
* **/
var logger = log4javascript.getLogger('simpleLogger'),
/**
* Use JSP or PHP to handler every log request
* **/
requestUrl = 'urlToHandleLogInfo',
/**
* Setup Ajax appender
* **/
ajaxAppender = new log4javascript.AjaxAppender(requestUrl),
/**
* 使用JSON的格式傳送log
* Use JSON format to send log
* **/
jsonLayout = new log4javascript.JsonLayout(),
/**
* 設定需要通知的Log Level
* Threshold to send ajax request
* ALL,TRACE,DEBUG,INFO,WARN,ERROR,FATAL,OFF is available
* **/
threshold = log4javascript.Level.ERROR;
/** Optional if cross domain is needed**/
ajaxAppender.addHeader('Access-Control-Allow-Origin', '*');
ajaxAppender.addHeader("Content-Type", "application/json");
ajaxAppender.setThreshold(threshold);
ajaxAppender.setLayout(jsonLayout);
logger.addAppender(ajaxAppender);
return logger;
}
/**
* 覆蓋Console的log機制，在console.error的同時印出log且Ajax記錄相關資訊
* Override Console Log ,
* use original console.error to print in console and send ajax request to save log **/
(function () {
let logger = initialLogger();
if (window.console && console.error) {
let old = console.error;
console.error = function () {
logger.error.apply(this, arguments);
Array.prototype.unshift.call(arguments, 'JS Error Report: ');
old.apply(this, arguments);
}
}
})();
參考資料
