2022年再不知道前端監(jiān)控就OUT了

作者：前端點(diǎn)線面 2022-04-12 09:04:57

開發(fā) 前端

前端監(jiān)控的第一個(gè)步驟就是數(shù)據(jù)采集，采集的信息包含環(huán)境信息、性能信息、異常信息、業(yè)務(wù)信息。

前端監(jiān)控現(xiàn)狀

近年來，前端監(jiān)控是越來越火，目前已經(jīng)有很多成熟的產(chǎn)品供我們選擇使用，如下圖所示

有這么多監(jiān)控平臺(tái)，那為什么還要學(xué)習(xí)自研前端監(jiān)控?

一方面人家是要錢的。
另一方面自己的項(xiàng)目需要定制化的功能。

前端監(jiān)控的目的

提升用戶體驗(yàn)。
更快的發(fā)現(xiàn)發(fā)現(xiàn)異常、定位異常、解決異常。
了解業(yè)務(wù)數(shù)據(jù)，指導(dǎo)產(chǎn)品升級(jí)——數(shù)據(jù)驅(qū)動(dòng)的思想。

前端監(jiān)控的流程

采集

前端監(jiān)控的第一個(gè)步驟就是數(shù)據(jù)采集，采集的信息包含環(huán)境信息、性能信息、異常信息、業(yè)務(wù)信息。

環(huán)境信息

環(huán)境信息是每個(gè)監(jiān)控系統(tǒng)必備的內(nèi)容，畢竟排查問題的時(shí)候需要知道來自哪個(gè)頁面、瀏覽器是誰、操作用戶是誰……,這樣才能快速定位問題，解決問題。一般這些常見的環(huán)境信息主要包含：

url：正在監(jiān)控的頁面，該頁面可能會(huì)出現(xiàn)性能、異常問題。獲取方式為：
window.location.href.
ua:訪問該頁面時(shí)該用戶的userAgent信息，包含操作系統(tǒng)和瀏覽器的類型、版本等。獲取方式為：
window.navigator.userAgent
token：記錄當(dāng)前用戶是誰。通過記錄該用戶是誰。
一方面方便將該用戶的所有監(jiān)控信息建立聯(lián)系，方便數(shù)據(jù)分析;
另一方面通過該標(biāo)識(shí)可以查看該用戶的所有操作，方便復(fù)現(xiàn)問題。

性能信息

頁面的性能直接影響了用戶留存率，，Google DoubleClick 研究表明：如果一個(gè)移動(dòng)端頁面加載時(shí)長超過 3 秒，用戶就會(huì)放棄而離開。BBC 發(fā)現(xiàn)網(wǎng)頁加載時(shí)長每增加 1 秒，用戶就會(huì)流失 10%。，Google DoubleClick 研究表明：如果一個(gè)移動(dòng)端頁面加載時(shí)長超過 3 秒，用戶就會(huì)放棄而離開。BBC 發(fā)現(xiàn)網(wǎng)頁加載時(shí)長每增加 1 秒，用戶就會(huì)流失 10%。所以我們的追求就是提高頁面的性能，為了提高性能需要監(jiān)控哪些指標(biāo)呢?

指標(biāo)分類

指標(biāo)有很多，我總結(jié)為以下兩個(gè)方面：網(wǎng)絡(luò)層面和頁面展示層面。

網(wǎng)絡(luò)層面

從網(wǎng)絡(luò)層面來看涉及的指標(biāo)有：重定向耗時(shí)、DNS解析耗時(shí)、TCP連接耗時(shí)、SSL耗時(shí)、TTFB網(wǎng)絡(luò)請(qǐng)求耗時(shí)、數(shù)據(jù)傳輸耗時(shí)、資源加載耗時(shí)……,各個(gè)指標(biāo)的解釋如下表所示：

頁面展示層面

頁面展示層面的指標(biāo)是針對(duì)用戶體驗(yàn)提出的幾個(gè)指標(biāo)，包含F(xiàn)P、FCP、LCP、FMP、DCL、L等，這幾個(gè)指標(biāo)其實(shí)就是chrome瀏覽器中performance模塊的指標(biāo)(如圖所示)。

各個(gè)指標(biāo)的解釋如下表所示。

指標(biāo)求解

上述這么多指標(biāo)該怎么獲取呢?瀏覽器給我們留了相應(yīng)的接口——神奇的window.performance，通過該接口可以獲取一些列與性能相關(guān)的參數(shù)，下面以https://baidu.com 為例來看一下與這些指標(biāo)相關(guān)的參數(shù)：

window.performance中的timing屬性中的內(nèi)容不就是為了求解上述指標(biāo)所需要的值嗎?看著上面的屬性值再對(duì)應(yīng)下面的performance訪問流程圖，整個(gè)過程是不是一目了然。

有了上面的值我們就一起求解上述的指標(biāo)：

網(wǎng)絡(luò)層面

頁面展示層面

Google工程師一直在推動(dòng)以用戶為中心的性能指標(biāo)，所以頁面展示層面的變化較大，求解方式稍有不同：

FP和FCP

通過window.performance.getEntriesByType(‘paint’)的方式獲取。

const paint = window.performance.getEntriesByType('paint');
const FP = paint[0].startTime,
const FCP = paint[1].startTime,

LCP

function getLCP() {
    // 增加一個(gè)性能條目的觀察者
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1];
        observer.disconnect();
        console.log('LCP', lastEntry.renderTime || lastEntry.loadTime);
    }).observe({entryTypes: ['largest-contentful-paint']});
}

FMP

function getFMP() {
    let FMP;
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        observer.disconnect();
        console.log('FMP', entries);
    }).observe({entryTypes: ['element']});
}

DCL

domContentLoadEventEnd – fetchStart

L

loadEventStart – fetchStart

TTI

domInteractive – fetchStart

FID

function getFID() {
    new PerformanceObserver((entryList, observer) => {
        let firstInput = entryList.getEntries()[0];
        if (firstInput) {
            const FID = firstInput.processingStart - firstInput.startTime;
            console.log('FID', FID);
        }
        observer.disconnect();
    }).observe({type: 'first-input', buffered: true});
}

異常信息

對(duì)于網(wǎng)站來說，異常信息是最致命、最影響用戶體驗(yàn)的問題，需要重點(diǎn)監(jiān)控。對(duì)于異常信息可以分為兩類：運(yùn)行時(shí)錯(cuò)誤、接口錯(cuò)誤。下面就分別來嘮一嘮這兩類錯(cuò)誤。

運(yùn)行時(shí)錯(cuò)誤

當(dāng)JavaScript運(yùn)行時(shí)有可能會(huì)發(fā)生錯(cuò)誤，可歸類為七種：語法錯(cuò)誤、類型錯(cuò)誤、范圍錯(cuò)誤、引用錯(cuò)誤、eval錯(cuò)誤、URL錯(cuò)誤、資源加載錯(cuò)誤。為了捕獲代碼錯(cuò)誤，需要考慮兩類場(chǎng)景：非Promise場(chǎng)景和Promise場(chǎng)景，因?yàn)閮煞N場(chǎng)景捕獲錯(cuò)誤的策略不同。

非Promise場(chǎng)景

非Promise場(chǎng)景可通過監(jiān)聽error事件來捕獲錯(cuò)誤。對(duì)于error事件捕獲的錯(cuò)誤分為兩類：資源錯(cuò)誤和代碼錯(cuò)誤。資源錯(cuò)誤指的就是js、css、img等未加載，該錯(cuò)誤只能在捕獲階段獲取到，且為資源錯(cuò)誤時(shí)event.target.localName存在值(用此區(qū)分資源錯(cuò)誤與代碼錯(cuò)誤);代碼錯(cuò)誤指的就是語法錯(cuò)誤、類型錯(cuò)誤等這一類錯(cuò)誤，可以獲取代碼錯(cuò)誤的信息、堆棧等，用于排查錯(cuò)誤。

export function listenerError() {
    window.addEventListener('error', (event) => {
        if (event.target.localName) {
            console.log('這是資源錯(cuò)誤', event);
        }
        else {
            console.log('這是代碼錯(cuò)誤', event);
        }
    }, true)
}

Promise場(chǎng)景

Promise場(chǎng)景的處理方式有所不同，當(dāng)Promise被reject且沒有reject處理器的時(shí)候，會(huì)觸發(fā)unhandlerejection事件，所以通過監(jiān)聽unhandlerejection的事件來捕獲錯(cuò)誤。

export function listenerPromiseError() {
    window.addEventListener('unhandledrejection', (event) => {
        console.log('這是Promise場(chǎng)景中錯(cuò)誤', event);
    })
}

接口錯(cuò)誤

對(duì)于瀏覽器來說，所有的接口均是基于XHR和Fetch實(shí)現(xiàn)的，為了捕獲接口中的錯(cuò)誤，可以通過重寫該方法，然后通過接口返回的信息來判斷當(dāng)前接口的狀況，下面以XHR為例來展示封裝過程。

function newXHR() {
    const XMLHttpRequest = window.XMLHttpRequest;
    const oldXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = (method, url, async) => {
        // 做一些自己的數(shù)據(jù)上報(bào)操作
        return oldXHROpen.apply(this, arguments);
    }
    const oldXHRSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = (body) => {
        // 做一些自己的數(shù)據(jù)上報(bào)操作
        return oldXHRSend.apply(this, arguments);
    }
}

業(yè)務(wù)信息

每個(gè)產(chǎn)品都會(huì)有自己的業(yè)務(wù)信息，例如用戶在線時(shí)長、pv、uv、用戶分布等，通過獲取這些業(yè)務(wù)信息才能更加清楚的了解目前產(chǎn)品的狀況，以便產(chǎn)品經(jīng)理更好的去規(guī)劃產(chǎn)品的未來方向。由于每個(gè)產(chǎn)品業(yè)務(wù)信息多種多樣，小伙伴本可以按照自己的需求進(jìn)行撰寫代碼，此處我就不再贅述。

上報(bào)

對(duì)于上報(bào)的方式無外乎兩種：一種是Ajax的方式上報(bào);另一種是通過Image的形式進(jìn)行上報(bào)。目前很多大廠采用的上報(bào)方式均是通過一個(gè)1*1像素的的gif圖片進(jìn)行上報(bào)，既然人家都采用該種策略，那我們就來嘮一嘮下面兩個(gè)問題。

為什么采用Image的方式上報(bào)?

沒有跨域問題。因?yàn)閿?shù)據(jù)服務(wù)器和后端服務(wù)器大概率是不同的域名，若采用Ajax的方式進(jìn)行處理還要處理跨域問題，否則數(shù)據(jù)會(huì)被瀏覽器攔截。
不會(huì)阻塞頁面加載，只需new Image對(duì)象即可。

圖片類型很多，為什么采用gif這種格式進(jìn)行上報(bào)?

其實(shí)歸結(jié)為一個(gè)字——小。對(duì)于1*1px的圖片，BMP結(jié)構(gòu)的文件需要74字節(jié)，PNG結(jié)構(gòu)的文件需要67字節(jié)，GIF結(jié)構(gòu)的文件只需要43字節(jié)。同樣的響應(yīng)，GIF可以比BMP節(jié)約41%的流量，比PNG節(jié)約35%的流量，所以選擇gif進(jìn)行上報(bào)。