項目開發完成外發后，沒有一個監控系統，我們很難了解到發布出去的代碼在用戶機器上執行是否正確，所以需要建立前端代碼性能相關的監控系統。
所以我們需要做以下的一些模塊：
一、收集腳本執行錯誤
function error(msg,url,line){
var REPORT_URL = "xxxx/cgi"; // 收集上報數據的信息
var m =[msg, url, line, navigator.userAgent, +new Date];// 收集錯誤信息，發生錯誤的腳本文件網絡地址，用戶代理信息，時間
var url = REPORT_URL + m.join('||');// 組裝錯誤上報信息內容URL
var img = new Image;
img.onload = img.onerror = function(){
img = null;
};
img.src = url;// 發送數據到后台cgi
}
// 監聽錯誤上報
window.onerror = function(msg,url,line){
error(msg,url,line);
}
通過管理后台系統，我們可以看到頁面上每次錯誤的信息，通過這些信息我們可以很快定位並且解決問題。
二、收集html5 performance信息
performance 包含頁面加載到執行完成的整個生命周期中不同執行步驟的執行時間。performance相關文章點擊如下：使用performance API 監測頁面性能
計算不同步驟時間相對於navigationStart的時間差，可以通過相應后台CGI收集。
function _performance(){
var REPORT_URL = "xxxx/cgi?perf=";
var perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ),
points = ['navigationStart','unloadEventStart','unloadEventEnd','redirectStart','redirectEnd','fetchStart','domainLookupStart','connectStart','requestStart','responseStart','responseEnd','domLoading','domInteractive','domContentLoadedEventEnd','domComplete','loadEventStart','loadEventEnd'];
var timing = pref.timing;
perf = perf ? perf : window.performance;
if( perf && timing ) {
var arr = [];
var navigationStart = timing[points[0]];
for(var i=0,l=points.length;i<l;i++){
arr[i] = timing[points[i]] - navigationStart;
}
var url = REPORT_URL + arr.join("-");
var img = new Image;
img.onload = img.onerror = function(){
img=null;
}
img.src = url;
}
通過后台接口收集和統計，我們可以對頁面執行性能有很詳細的了解。
三、統計每個頁面的JS和CSS加載時間
在JS或者CSS加載之前打上時間戳，加載之后打上時間戳，並且將數據上報到后台。加載時間反映了頁面白屏，可操作的等待時間。
<script>var cssLoadStart = +new Date</script>
<link rel="stylesheet" href="xxx.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx1.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx2.css" type="text/css" media="all">
<sript>
var cssLoadTime = (+new Date) - cssLoadStart;
var jsLoadStart = +new Date;
</script>
<script type="text/javascript" src="xx1.js"></script>
<script type="text/javascript" src="xx2.js"></script>
<script type="text/javascript" src="xx3.js"></script>
<script>
var jsLoadTime = (+new Date) - jsLoadStart;
var REPORT_URL = 'xxx/cgi?data='
var img = new Image;
img.onload = img.onerror = function(){
img = null;
};
img.src = REPORT_URL + cssLoadTime + '-' + jsLoadTime;
</script>
參考資料：
轉載自AlloyTeam：http://www.alloyteam.com/2014/03/front-end-data-monitoring/