作者：京東物流 李菲菲

1 前言

現(xiàn)有的大部分監(jiān)控方案都是針對(duì)服務(wù)端的，而針對(duì)前端的監(jiān)控很少，諸如線上頁面的白屏?xí)r間是多少、靜態(tài)資源的加載情況如何、接口請(qǐng)求耗時(shí)好久、什么時(shí)候掛掉了、為什么掛掉，這些都不清楚。

同時(shí)，在產(chǎn)品推廣過程中，經(jīng)常需要統(tǒng)計(jì)頁面的使用情況及用戶行為，從而可以從運(yùn)營(yíng)和產(chǎn)品的角度去了解用戶群體，進(jìn)而迭代升級(jí)產(chǎn)品，使其更加貼近用戶，為業(yè)務(wù)的擴(kuò)展提供更多可能性。

因而，我們需要一個(gè)前端的頁面監(jiān)控系統(tǒng)，持續(xù)監(jiān)控和預(yù)警頁面性能的狀況，并且在發(fā)現(xiàn)瓶頸時(shí)用于指導(dǎo)優(yōu)化工作。

2 前端監(jiān)控目標(biāo)

前端監(jiān)控主要包含兩大塊：性能監(jiān)控及異常監(jiān)控

1. 保證穩(wěn)定性（異常監(jiān)控）
   錯(cuò)誤監(jiān)控包括 JavaScript 代碼錯(cuò)誤，Promsie 錯(cuò)誤，接口（XHR，fetch）錯(cuò)誤，資源加載錯(cuò)誤（script，link等）等，這些錯(cuò)誤大多會(huì)導(dǎo)致頁面功能異常甚至白屏。
2. 提升用戶體驗(yàn)（性能監(jiān)控）
   性能監(jiān)控包括頁面的加載時(shí)間，接口響應(yīng)時(shí)間等，側(cè)面反應(yīng)了用戶體驗(yàn)的好壞。

3 性能監(jiān)控

3.1 簡(jiǎn)單描述頁面加載

簡(jiǎn)單看一下，從輸入url到頁面加載完成的過程如下：

首先需要通過 DNS（域名解析系統(tǒng)）將 URL 解析為對(duì)應(yīng)的 IP 地址，然后與這個(gè) IP 地址確定的那臺(tái)服務(wù)器建立起 TCP 網(wǎng)絡(luò)連接，隨后我們向服務(wù)端拋出 HTTP 請(qǐng)求，服務(wù)端處理完我們的請(qǐng)求之后，把目標(biāo)數(shù)據(jù)放在 HTTP 響應(yīng)里返回給客戶端，拿到響應(yīng)數(shù)據(jù)的瀏覽器就可以開始走一個(gè)渲染的流程。渲染完畢，頁面便呈現(xiàn)給了用戶。

我們可以將這個(gè)過程分為如下的過程片段：

1. DNS 解析
2. TCP 連接
3. HTTP 請(qǐng)求拋出
4. 服務(wù)端處理請(qǐng)求，HTTP 響應(yīng)返回
5. 瀏覽器拿到響應(yīng)數(shù)據(jù)，解析響應(yīng)內(nèi)容，把解析的結(jié)果展示給用戶

3.2 從開發(fā)者角度，看頁面加載各階段

從輸入url到用戶可以使用頁面的全過程時(shí)間統(tǒng)計(jì)，會(huì)返回一個(gè)PerformanceTiming對(duì)象，單位均為毫秒。
關(guān)于performace，已經(jīng)在《從前端角度淺談性能》中進(jìn)行過介紹,，下面再?gòu)?qiáng)調(diào)一下：

各階段的性能耗時(shí)可以通過API：window.performance來獲取，對(duì)應(yīng)的具體方法有：performance.timing、performance.getEntriesByType(‘resource’)、performance.navigation等。
如上，開發(fā)者可以通過performance中各階段的時(shí)間戳，分別獲取到 頁面各階段的性能指標(biāo)，具體的個(gè)靜態(tài)資源的加載耗時(shí)、及 頁面是否重定向和重定向耗時(shí)。

按觸發(fā)順序排列所有屬性：

• navigationStart:在同一個(gè)瀏覽器上下文中，前一個(gè)網(wǎng)頁（與當(dāng)前頁面不一定同域）unload 的時(shí)間戳，如果無前一個(gè)網(wǎng)頁 unload ，則與 fetchStart 值相等
• redirectStart:第一個(gè) HTTP 重定向發(fā)生時(shí)的時(shí)間。有跳轉(zhuǎn)且是同域名內(nèi)的重定向才算，否則值為 0
• unloadEventStart:前一個(gè)網(wǎng)頁（與當(dāng)前頁面同域）unload 的時(shí)間戳，如果無前一個(gè)網(wǎng)頁 unload 或者前一個(gè)網(wǎng)頁與當(dāng)前頁面不同域，則值為 0
• redirectEnd:最后一個(gè) HTTP 重定向完成時(shí)的時(shí)間。有跳轉(zhuǎn)且是同域名內(nèi)的重定向才算，否則值為 0
• unloadEventEnd:和 unloadEventStart 相對(duì)應(yīng)，返回前一個(gè)網(wǎng)頁 unload 事件綁定的回調(diào)函數(shù)執(zhí)行完畢的時(shí)間戳
• fetchStart:瀏覽器準(zhǔn)備好使用 HTTP 請(qǐng)求抓取文檔的時(shí)間，這發(fā)生在檢查本地緩存之前
• domainLookupStart:DNS 域名查詢開始的時(shí)間，如果使用了本地緩存（即無 DNS 查詢）或持久連接，則與 fetchStart 值相等
• domainLookupEnd:DNS 域名查詢完成的時(shí)間，如果使用了本地緩存（即無 DNS 查詢）或持久連接，則與 fetchStart 值相等
• connectStart:HTTP（TCP） 開始建立連接的時(shí)間，如果是持久連接，則與 fetchStart 值相等,如果在傳輸層發(fā)生了錯(cuò)誤且重新建立連接，則這里顯示的是新建立的連接開始的時(shí)間
• secureConnectionStart:HTTPS 連接開始的時(shí)間，如果不是安全連接，則值為 0
• connectEnd:HTTP（TCP） 完成建立連接的時(shí)間（完成握手），如果是持久連接，則與 fetchStart 值相等,如果在傳輸層發(fā)生了錯(cuò)誤且重新建立連接，則這里顯示的是新建立的連接完成的時(shí)間
• requestStart:HTTP 請(qǐng)求讀取真實(shí)文檔開始的時(shí)間（完成建立連接），包括從本地讀取緩存,連接錯(cuò)誤重連時(shí)，這里顯示的也是新建立連接的時(shí)間
• responseStart:HTTP 開始接收響應(yīng)的時(shí)間（獲取到第一個(gè)字節(jié)），包括從本地讀取緩存
• responseEnd:HTTP 響應(yīng)全部接收完成的時(shí)間（獲取到最后一個(gè)字節(jié)），包括從本地讀取緩存
• domLoading:開始解析渲染 DOM 樹的時(shí)間，此時(shí) Document.readyState 變?yōu)?loading，并將拋出 readystatechange 相關(guān)事件
• domInteractive:完成解析 DOM 樹的時(shí)間，Document.readyState 變?yōu)?interactive，并將拋出 readystatechange 相關(guān)事件
• domContentLoadedEventStart:DOM 解析完成后，網(wǎng)頁內(nèi)資源加載開始的時(shí)間,文檔發(fā)生 DOMContentLoaded事件的時(shí)間
• domContentLoadedEventEnd:DOM 解析完成后，網(wǎng)頁內(nèi)資源加載完成的時(shí)間（如 JS 腳本加載執(zhí)行完畢），文檔的DOMContentLoaded 事件的結(jié)束時(shí)間
• domComplete:DOM 樹解析完成，且資源也準(zhǔn)備就緒的時(shí)間，Document.readyState 變?yōu)?complete，并將拋出 readystatechange 相關(guān)事件
• loadEventStart:load 事件發(fā)送給文檔，也即 load 回調(diào)函數(shù)開始執(zhí)行的時(shí)間,如果沒有綁定 load 事件，值為 0
• loadEventEnd:load 事件的回調(diào)函數(shù)執(zhí)行完畢的時(shí)間,如果沒有綁定 load 事件，值為 0

3.3 各階段性能的計(jì)算（自定義）

const { timing, navigation } = window.performance
const loadPageInfo = {};

// 頁面加載類型，區(qū)分第一次load還是reload, 0初次加載、1重加載
loadPageInfo.loadType = navigation.type;

// 頁面加載完成的時(shí)間 - 幾乎代表了用戶等待頁面白屏的時(shí)間
loadPageInfo.loadPage = timing.loadEventEnd - timing.navigationStart;

// 重定向的時(shí)間
loadPageInfo.redirect = timing.redirectEnd - timing.redirectStart;

// 卸載頁面的時(shí)間
loadPageInfo.unloadEvent = timing.unloadEventEnd - timing.unloadEventStart;

// 查詢 DNS 本地緩存的時(shí)間
loadPageInfo.appCache = timing.domainLookupStart - timing.fetchStart;

// 【重要】DNS 查詢時(shí)間
// 頁面內(nèi)是不是使用了太多不同的域名，導(dǎo)致域名查詢的時(shí)間太長(zhǎng)？推薦 DNS 預(yù)加載。
// 可使用 HTML5 Prefetch 預(yù)查詢 DNS
loadPageInfo.lookupDomain = timing.domainLookupEnd - timing.domainLookupStart;

// HTTP（TCP）建立連接完成握手的時(shí)間
loadPageInfo.connect = timing.connectEnd - timing.connectStart;

// 【重要】HTTP請(qǐng)求及獲取 文檔內(nèi)容的時(shí)間
loadPageInfo.request = timing.responseEnd - timing.responseStart;

// 【重要】前一個(gè)頁面 unload 到 HTTP獲取到 頁面第一個(gè)字節(jié)的時(shí)間
// 【原因】這可以理解為用戶拿到你的資源占用的時(shí)間，推薦 加異地機(jī)房，加 CDN 處理，加寬帶，加 CPU 運(yùn)算速度
// TTFB 即 Time To First Byte
loadPageInfo.ttfb = timing.responseStart - timing.navigationStart;

// 解析 DOM 樹結(jié)構(gòu)的時(shí)間
loadPageInfo.domReady = timing.domComplete - timing.responseEnd;

// 【重要】執(zhí)行 onload 回調(diào)函數(shù)的時(shí)間
// 【原因】是否太多不必要的操作都放在 onload 回調(diào)函數(shù)里執(zhí)行了，推薦 延遲加載、按需加載的策略
loadPageInfo.loadEvent = timing.loadEventEnd - timing.loadE

4 異常監(jiān)控

前端需要監(jiān)控的錯(cuò)誤主要有兩類：

1. Javascript錯(cuò)誤（js錯(cuò)誤、promise錯(cuò)誤）
2. 監(jiān)聽error錯(cuò)誤（資源加載錯(cuò)誤）

4.1 console.error

// 重寫console.error，可以捕獲更全面的報(bào)錯(cuò)信息
var oldError = console.error;


console.error = function(tempErrorMsg){
    var errorMsg = ( arguments[0] && arguments[0].message ) || tempErrorMsg;
    var lineNumber = 0;
    var columnNumber = 0;
    var errorStack = arguments[0] && arguments[0].stack;


    if( !errorStack ){
        saveJSError( 'console_error', errorMsg, '', lineNumber, columnNumber, 'CustomizeError: ' + errorMsg );
    }else{
        saveJSError( 'console_error', errorMsg, '', lineNumber, columnNumber, errorStack );
    }


    return oldError.apply( console, arguments );

4.2 error事件

通過對(duì)error事件的監(jiān)聽，可以捕捉到 js語法 及 資源加載 的錯(cuò)誤。根據(jù) event.target.src / href 來判斷是否為資源加載錯(cuò)誤。

window.addEventListener( 'error', function(e){
    var errorMsg = e.error && e.error.message,
        errorStack = e.error && e.error.stack,
        pageUrl = e.filename,
        lineNumber = e.lineno,
        columnNumber = e.colno;


    saveJSError( 'on_error', errorMsg, pageUrl, lineNumber, columnNumber, errorStack );
} );

4.3 Promise

// 捕獲未處理的Promise錯(cuò)誤
window.onunhandledrejection = function(e){
    var errorMsg = '';
    var errorStack = '';
    if( typeof e.reason === 'object' ){
        errorMsg = e.reason.message;
        errorStack = e.reason.stack;
    }else{
        errorMsg = e.reason;
        errorStack = '';
    }
    saveJSError( 'on_error', errorMsg, '', 0, 0, 'UncaughtInPromiseError: ' + errorStack );
}

5 總結(jié)

以上，通過簡(jiǎn)單的js代碼，即可實(shí)現(xiàn)對(duì)頁面性能與異常的監(jiān)控與數(shù)據(jù)上報(bào)，后續(xù)還需要相應(yīng)具體的平臺(tái)匯總，及相應(yīng)的業(yè)務(wù)所需數(shù)據(jù)（如PV、UV等）的計(jì)算，才能真正實(shí)現(xiàn)對(duì)產(chǎn)品的頁面數(shù)據(jù)呈現(xiàn)，用于業(yè)務(wù)擴(kuò)展及宣導(dǎo)。

6 后續(xù)

上述代碼，實(shí)現(xiàn)了對(duì)頁面性能及異常的監(jiān)控，但其實(shí)前端的監(jiān)控還包括了請(qǐng)求接口的監(jiān)控與埋點(diǎn)的實(shí)現(xiàn)，后續(xù)將陸續(xù)推出，敬請(qǐng)期待。