前端監控系統 目前已經上線，歡迎使用！ 背景：應工作要求，需要整理出前端項目的報錯信息，嘗試過很多統計工具，如： 騰訊bugly、聽雲、OneApm、還有一個忘記名字的工具。 因為各種原因，如： 統計的日誌無法正確分類，收費太高，存儲數量有限制等等，都放棄使用了。 後來，我說：“我們自己來分析吧”， ...
前端監控系統 目前已經上線，歡迎使用！
背景：應工作要求，需要整理出前端項目的報錯信息，嘗試過很多統計工具，如： 騰訊bugly、聽雲、OneApm、還有一個忘記名字的工具。 因為各種原因，如： 統計的日誌無法正確分類，收費太高，存儲數量有限制等等，都放棄使用了。 後來，我說：“我們自己來分析吧”，後來，我就開發了這個系統。
既然要做，就要做的像樣一點。
準備工作。
一、監控系統必須是獨立出來的服務，這樣才能夠服務於多個前端項目。
①購買阿裡雲伺服器（雙核，4G記憶體，3M帶寬）
②安裝環境（node, nvm, pm2, JDK, Nginx, Tomcat, Mysql）
③部署項目（運行Jenkins服務，因為會經常更新代碼，最好做自動化部署，節省很多力氣）
④搭建Git服務（畢竟都買伺服器了，能自己乾的事就自己乾吧，自己管理Git倉庫吧）
⑤購買功能變數名稱（阿裡雲上購買）
⑥購買安全證書（因為很多項目是支持https協議的，所以監控服務也必須支持https）
二、頁面數據監控，要收集頁面上的那些數據呢？我們先來搜集JS錯誤吧
①怎麼搜集JS報錯呢
window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj){
// 執行代碼邏輯
};
這裡有一點小問題，重寫了window.onerror方法，確實能夠捕獲頁面運行是的大部分錯 誤，但是在頁面初始化時的報錯是無法捕獲的。
這時候我們需要重寫一下console.error方法後，就可以搜集到頁面更全面的報錯信息，如下：
console.error = function () {
// 處理報錯的邏輯
return oldError.apply(console, arguments);
};
②信息收集到了，怎麼上報呢？
方案一： 發現一個錯誤，立馬上報。
不好，因為上報太頻繁了，前端請求次數太多，後臺處理的壓力也很大，這是我們不願意見到的。
方案二： 發現一個錯誤，存起來，等存夠一定的數量，再一起上報。 如果一直存不夠數量，怎麼辦。 所以增加一個定時器保證報錯信息一定會被上傳上去。
上報方式呢， GET請求方式實在無法滿足大數據量的上傳，所以封裝了一個簡易的ajax，供監控代碼上傳數據使用
/**
*
* @param method 請求類型(大寫) GET/POST
* @param url 請求URL
* @param param 請求參數
* @param successCallback 成功回調方法
* @param failCallback 失敗回調方法
*/
function monitor_ajax(method, url, param, successCallback, failCallback) {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlHttp.open(method, url, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var res = JSON.parse(xmlHttp.responseText);
typeof successCallback == 'function' && successCallback(res);
} else {
typeof failCallback == 'function' && failCallback();
}
};
xmlHttp.send("data=" + JSON.stringify(param));
}
③代碼寫好了，怎麼部署呀？
監控代碼必須要優先載入，放在頁面的頂部, 這樣就可以優先重寫onerror方法
<script type='text/javascript'>監控代碼</script>
三、頁面上的上報信息搜集到了，怎麼存起來，怎麼分析呢？
①搭建express後臺服務（為什麼一個前端工程師還要寫後臺）
node + express + easy_mysql + mysql
②開始擼介面
這裡涉及統計日誌的介面，需要在前端和後臺功能處理高併發的情況，畢竟小小的伺服器性能真的很有限。
也涉及分析日誌的介面， 隨著數據的不斷增多, sql查詢的方式必須得到優化，否則很影響載入效果。
③部署後臺服務
建議安裝pm2 ，而不是直接使用node server.js , 用pm2啟動更穩定。
四、信息也監控了，也存儲了，我怎麼看到呢？ oh my god ! 其實真想放棄了，一個監控系統居然要這麼多東西
①需要一套管理系統的架子，我真的不想再自己設計了，否則我要吐了，還好，網上資源挺多，選了一個，經過一些列的裁剪和大動工，終於可以為我所用了
②既然到了面向用戶的界面，就得考慮用戶體驗了，這個我不太想細說了，可以參考一下我的系統
文章寫得有點粗糙，其實，JS錯誤監控只是系統的一小部分。
其中包含了很多如：日活量、頁面數據、介面請求，設備分析等等
我把這個系統發佈出來，是希望得到更多的認可，也希望得到更多的意見和建議
謝謝閱讀！
