前端監(jiān)控之性能與異常

作者：京東云開(kāi)發(fā)者 2023-03-01 09:07:44

通過(guò)簡(jiǎn)單的js代碼，即可實(shí)現(xiàn)對(duì)頁(yè)面性能與異常的監(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)品的頁(yè)面數(shù)據(jù)呈現(xiàn)，用于業(yè)務(wù)擴(kuò)展及宣導(dǎo)。

作者：京東物流李菲菲

1 前言

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

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

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

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

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

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

3 性能監(jiān)控

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

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

首先需要通過(guò) 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ù)的瀏覽器就可以開(kāi)始走一個(gè)渲染的流程。渲染完畢，頁(yè)面便呈現(xiàn)給了用戶。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 解析 DOM 樹(shù)結(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ò)誤主要有兩類：

Javascript錯(cuò)誤（js錯(cuò)誤、promise錯(cuò)誤）
監(jiān)聽(tīng)error錯(cuò)誤（資源加載錯(cuò)誤）

4.1 console.error

// 重寫(xiě)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事件

通過(guò)對(duì)error事件的監(jiān)聽(tīng)，可以捕捉到 js語(yǔ)法及資源加載的錯(cuò)誤。根據(jù) event.target.src / href 來(lái)判斷是否為資源加載錯(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é)

以上，通過(guò)簡(jiǎn)單的js代碼，即可實(shí)現(xiàn)對(duì)頁(yè)面性能與異常的監(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)品的頁(yè)面數(shù)據(jù)呈現(xiàn)，用于業(yè)務(wù)擴(kuò)展及宣導(dǎo)。