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

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

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

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

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

webfunny前端一體化埋點系統，可按項目設定不同的模型看板，設定人員權限，滿足多種數據分析需求。如何寫一個前端監控和頁面性能監控

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