前端相關資料監控

作者：AlloyTeam

網址：http://www.alloyteam.com/2014/03/front-end-data-monitoring/

專案開發完成外發後，沒有一個監控系統，我們很難瞭解到釋出出去的程式碼在使用者機器上執行是否正確，所以需要建立前端程式碼效能相關的監控系統。

所以我們需要做以下的一些模組：

一、收集指令碼執行錯誤

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

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載入之前打上時間戳，載入之後打上時間戳，並且將資料上報到後臺。載入時間反映了頁面白屏，可操作的等待時間。

 	 	 	 	
 	 	 	 	 	 	
 	 	 	 	 	 	

var cssLoadTime = (+new Date) - cssLoadStart;

var jsLoadStart = +new Date;