搭建前端監(jiān)控系統(tǒng)（七）之用戶細查篇前端程序員都知道搭建監(jiān)控系統(tǒng),，主要涉及幾大指標,，流量數(shù)據(jù)、錯誤數(shù)據(jù),、接口數(shù)據(jù),、性能數(shù)據(jù)等,；這些數(shù)據(jù)統(tǒng)計出來以后,，除了他們本身的作用外,，怎么利用這幾大類型數(shù)據(jù)來幫我們排查問題呢,，那就涉及到「用戶細查」的部分了?！赣脩艏毑椤诡櫭剂x就是把用戶所有的行為記錄統(tǒng)計出來,，幫助前端開發(fā)者來定位,，或者復(fù)現(xiàn)用戶所產(chǎn)生的問題,。如果一套前端監(jiān)控系統(tǒng)沒有用戶細查的能力，光能看問題,，卻不能解決問題,，那也就是失去了監(jiān)控系統(tǒng)的靈魂了。而作為監(jiān)控系統(tǒng)之一的webfunny前端監(jiān)控,，因為開發(fā)者也就是我本人就是從事前端多年,，深深知道監(jiān)控的痛點，所以在設(shè)計「用戶細查」的時候做了很多維度的細分功能,。webfunny支持私有化部署,，容器化部署，可支持千萬級PV的日活量!如何寫一個前端監(jiān)控和頁面性能監(jiān)控

webfunny前端監(jiān)控項目可實現(xiàn)：七,、分析用戶的場外信息當用戶所有的行為都被前端開發(fā)者掌握之后,，前端能夠復(fù)現(xiàn)出用戶的行為，甚至能夠復(fù)現(xiàn)出用戶的問題,，也許還需要一些場外信息才能準確定位問題,，比如，用戶的機型,，地理位置,，系統(tǒng)版本，當時的網(wǎng)絡(luò)環(huán)境（這個不準確,，我做webfunny前端項目場景測試時,，是依據(jù)用戶當時初次加載頁面的時間來判斷，只能作為參考依據(jù)）前端線上問題產(chǎn)生的原因五花八門,，只有把日志做全了,，才能夠準確的定位和解決前端問題、作好前端項目的監(jiān)控,。這是webfunny前端監(jiān)控項目開發(fā)者排查線上問題的經(jīng)驗和實戰(zhàn),，分享給所有的前端工程師們參考，當然理論有了,，作為前端開發(fā)技術(shù)同學(xué)還是實操效果更好,，感興趣的前端工程師們可以直接到webfunny前端監(jiān)控平臺來體驗demo更加直觀。國內(nèi)好用的前端監(jiān)控和前端錯誤監(jiān)控產(chǎn)品webfunny埋點系統(tǒng)可快速全鏈路數(shù)據(jù)接入,，打破數(shù)據(jù)孤島,，多角度洞察業(yè)務(wù),，實現(xiàn)數(shù)據(jù)智能決策。

這是搭建前端監(jiān)控系統(tǒng)的第二章,，主要是介紹如何統(tǒng)計js報錯,，跟著webfunny前端監(jiān)控項目的開發(fā)者一步步操作，你也能搭建出一個屬于自己的前端監(jiān)控系統(tǒng),。前端程序員可以移步線上：webfunny前端監(jiān)控系統(tǒng),，對于前端應(yīng)用來說，Js錯誤的發(fā)生直接影響前端應(yīng)用的質(zhì)量,。對前端異常的監(jiān)控是整個前端監(jiān)控系統(tǒng)中的一個重要環(huán)節(jié),。前端異常包含很多種情況：編譯時異常（開發(fā)階段就能排除）運行時異常；3.加載靜態(tài)資源異常（路徑寫錯,、資源服務(wù)器異常,、CDN異常、跨域）4.接口請求異常等,。這一篇我們只介紹Js運行時異常,。

搭建前端監(jiān)控系統(tǒng)（七）之用戶細查篇：用戶細查具體要分析哪些數(shù)據(jù)，更容易幫助我們定位前端問題呢說完用戶基本信息和頁面平均加載時間,，下面就要來說接口耗時正態(tài)分布,。接口耗時同樣能夠反饋出用戶當時的網(wǎng)絡(luò)狀態(tài)，同時他也能反饋出服務(wù)端接口的狀態(tài),。比如,，頁面平均耗時表現(xiàn)良好，接口耗時表現(xiàn)差,，則能反映出,，當時的后端服務(wù)狀態(tài)不是很好。還有完整的用戶行為記錄,，以上是用戶行為中的基本信息,，接下來要說的是用戶的完整行為鏈路，通過將頁面訪問,、接口請求,、代碼報錯、自定義行為等,，按照時間先后順序串聯(lián)起來,，可以達到復(fù)現(xiàn)用戶錯誤的目的。其中,，接口請求記錄,，除了會記錄接口耗時，還需要記錄接口的返回值,，這樣能夠更加明確的定位數(shù)據(jù)問題,。以上說到的關(guān)于「用戶細查」的詳細功能和信息展示,，前端程序員可以可以通過webfunny前端監(jiān)控系統(tǒng)進行demo實操查看。在搭建前端系統(tǒng)利用各種手段來豐富「用戶細查」,，將用戶的行為記錄下來,，復(fù)現(xiàn)用戶當時的問題便不再是那么困難的事情。這對開發(fā)者來說,，無疑是提高了解決問題的效率,。webfunny前端監(jiān)控致力于解決前端監(jiān)控的問題，提高前端的性能,。前端線上的用戶操作行為十分復(fù)雜,，部分問題可能隱藏在用戶多次操作之后。

三,、性能指標FP(FirstPaint)：繪制時間，包括了任何用戶自定義的背景繪制,，它是首先將像素繪制到屏幕的時刻,。FCP(FirstContentPaint)：內(nèi)容繪制。瀏覽器將個DOM渲染到屏幕的時間,，可能是文本,、圖像、SVG等,。這其實就是白屏?xí)r間FMP(FirstMeaningfulPaint)：有意義繪制,。頁面有意義的內(nèi)容渲染的時間LCP(LargestContentfulPaint)。比較大內(nèi)容渲染,。在viewport中比較大的頁面元素加載的時間,。DCL(DomContentLoaded)：DOM加載完成。當HTML文檔被完全加載和解析完成之后,，DOMContentLoaded事件被觸發(fā),。無需等待樣式表，圖像和子框架的完成加載,。L(onload)：當依賴的資源全部加載完畢之后才會觸發(fā),。TTI(TimetoInteractive)：可交互時間。用于標記應(yīng)用已進行視覺渲染并能可靠響應(yīng)用戶輸入的時間點,。FID(FirstInputDelay)：輸入延遲,。用戶和頁面交互(單擊鏈接、點擊按鈕等)到頁面響應(yīng)交互的時間,。webfunny前端監(jiān)控系統(tǒng)是純私有化部署,。如何寫一個前端監(jiān)控和頁面性能監(jiān)控

webfunny前端一體化埋點系統(tǒng)，可按項目設(shè)定不同的模型看板,，設(shè)定人員權(quán)限,，滿足多種數(shù)據(jù)分析需求,。如何寫一個前端監(jiān)控和頁面性能監(jiān)控

搭建前端監(jiān)控系統(tǒng)（三）靜態(tài)資源加載監(jiān)控篇前端監(jiān)控除了如何做JS錯誤監(jiān)控，還有一種錯誤是靜態(tài)資源加載報錯,，很多時候資源加載報錯對前端項目來說是致命的,，因為靜態(tài)資源加載出錯了，有可能就會導(dǎo)致前端頁面無法渲染,，用戶就只能對著一個空白屏幕發(fā)呆,，不知所措。因為突然有天,，我們的前端線上環(huán)境爆出了大量的白屏錯誤,，經(jīng)過很長時間的排查，終于定位到問題原因：我們使用的CDN路徑不知道怎么的,，把我們的https協(xié)議全部指向了http協(xié)議,，在安全協(xié)議下無法訪問非安全協(xié)議的資源，導(dǎo)致了大量的白屏,。所以我決定增加靜態(tài)資源監(jiān)控功能,，以應(yīng)對未來的未知情況。如何寫一個前端監(jiān)控和頁面性能監(jiān)控