前端的監(jiān)控主要分為三個方面： 性能監(jiān)控
- 白屏時間；
- 首屏時間；
- 用戶可交互時間；
- 總下載時間；
- TCP連接時間；
- HTTP請求時間；
- HTTP響應時間；
異常監(jiān)控 監(jiān)控客戶端腳本發(fā)生的報錯，前端報錯受網(wǎng)絡(luò)，機型，業(yè)務(wù)邏輯影響而且大部分錯誤難以還原現(xiàn)場
需要對客戶端服務(wù)進行基于用戶行為的監(jiān)控 數(shù)據(jù)監(jiān)控做精益的數(shù)據(jù)分析
- 頁面PV,UV可能直接影響轉(zhuǎn)化率
- 從用戶訪問頁面的順序挖掘使用習慣（等等）
傳統(tǒng)解決方案及缺陷
傳統(tǒng)前端監(jiān)控解決方案：Sentry,Badjs,jsTracker,GrowingIo
要實現(xiàn)監(jiān)控，首先要采集指標
性能指標
這里要針對的主要是白屏時間、首屏時間、用戶可操作、總下載時間。 不要使用setTimeout和setInterval方法，因為在單線程執(zhí)行引擎中，異步隊列的執(zhí)行是不能確保執(zhí)行時間推薦 <doctype html>
<html>
<head>
<script type="text/javascript">
var timerStart = Date.now();
</script>
****
</head>
<body>
****
<script type="text/javascript">
$(document).ready(function() {
console.log("DOMready 時間 ", Date.now()-timerStart);
});
$(window).load(function() {
console.log("所有資源加載完成時間: ", Date.now()-timerStart);
});
</script>
</body>
</html> 另一種優(yōu)雅的解決方案是直接使用window.performance接口：
異常指標主動捕獲異常方案主要是 onError 和 addEventListener，onError 在 IE6 開始就支持了，所以 大部分系統(tǒng)的主動采集是使用的 onError。這里注意瀏覽器的同源性策略（CORS），在高級瀏覽器中如果瀏覽器捕獲到了錯誤信息，如果 JS 文件所在的域名（如：meituan.com）和當前的頁面地址（如：dianping.com)是跨域的，那么引擎會自動把onError 中的參數(shù) 替換為 script error，此時無法獲取行列數(shù)以及報錯詳細信息。解決方案是在標簽引入時加上crossorigin字段。
雖然傳統(tǒng)方法能夠自動catch大部分錯誤，但是也伴隨著以下缺陷：
- 部分應用在不同網(wǎng)絡(luò)，機型上表現(xiàn)不同，開發(fā)人員需要獲取到更詳細的分類信息，傳統(tǒng)系統(tǒng)很難做分類聚合，開發(fā)面對幾十頁分類的table無從下手。
- 錯誤與錯誤之間往往成相關(guān)性，但是在傳統(tǒng)系統(tǒng)中catch到的錯誤都是孤立的，沒有基于用戶行為的分析。
- 針對異常的告警配置不夠靈活，無法滿足開發(fā)需求：大部分異常告警指標伴隨高低峰期波動，沒有一成不變的指標，而傳統(tǒng)告警平臺都是采用絕對閾值的告警方案，要么高峰期誤報太多，要么低峰期錯誤無法發(fā)現(xiàn)。
數(shù)據(jù)指標
新解決方案
伴隨著上面討論的問題，我們尋求新的解決方案，一種高可用的監(jiān)控方案。它應該具有如下特征：
- 全量采集：監(jiān)控指標健全，端到端采集全量的性能指標，關(guān)鍵執(zhí)行方法，業(yè)務(wù)指標，覆蓋率做到2個9以上。
- 無需埋點：全量上報，無需開發(fā)人員手動埋點，從根本上杜絕錯埋和漏埋
- 查詢便捷：能夠按照地域，機型，操作系統(tǒng)，瀏覽器版本，網(wǎng)絡(luò)狀況等多個維度進行數(shù)據(jù)查詢，最好支持全文搜索，分類聚合。
- 場景還原：根據(jù)打點信息，還原用戶從登陸開始一系列操作，建立基于用戶行為的時序圖。
- 實時性強：秒級查詢，上線后能立即看到優(yōu)化效果并指導下一步優(yōu)化。
- 智能告警：采用靜態(tài)閾值和動態(tài)閾值結(jié)合的方式，兼顧高低峰，減少誤報漏報。并針對業(yè)務(wù)數(shù)據(jù)建立告警指標，發(fā)現(xiàn)系統(tǒng)深層次問題。
根據(jù)這些需求，我們團隊打造了一套全新的監(jiān)控體系，新系統(tǒng)采用了無埋點SDK（小程序），ELK做本地化日志存儲，并使用了基于動態(tài)閾值的告警策略。下面是系統(tǒng)架構(gòu)圖：
目前監(jiān)控平臺：實時數(shù)據(jù)監(jiān)控平臺prajna，實時錯誤日志平臺CAT和 打點日志平臺GALAXY。
prajna上實時可查數(shù)據(jù)，理想情況下有對各個指標有相關(guān)域值，可查看當日異常數(shù)據(jù)情況
CAT上可以觀測到當天的異常報錯數(shù)據(jù)，對比前一天和上周同一天同事間段的數(shù)據(jù)，是否錯誤異常。
GALAXY上可以收集到當日之前的打點數(shù)據(jù)，可以拉取前一天和上周同一天同事間段的數(shù)據(jù)來模擬當日的數(shù)據(jù)。
document渲染完成最準確的是chrome.debugger提供的timeline-Layout接口,詳細可以參考官方文檔 https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Fevaluate-performance%2Fperformance-reference
