一、前端監控現狀
近年來，前端監控是越來越火，目前已經有很多成熟的產品供我們選擇使用，如下圖所示
有這么多監控平台，那為什么還要學習自研前端監控？
一方面人家是要錢的
另一方面自己的項目需要定制化的功能。
二、前端監控的目的
提升用戶體驗
更快的發現發現異常、定位異常、解決異常
了解業務數據，指導產品升級——數據驅動的思想
三、前端監控的流程
3.1 采集
前端監控的第一個步驟就是數據采集，采集的信息包含環境信息、性能信息、異常信息、業務信息。
3.1.1 環境信息
環境信息是每個監控系統必備的內容，畢竟排查問題的時候需要知道來自哪個頁面、瀏覽器是誰、操作用戶是誰……,這樣才能快速定位問題，解決問題。一般這些常見的環境信息主要包含：
url：正在監控的頁面，該頁面可能會出現性能、異常問題。獲取方式為：
window.location.href
ua:訪問該頁面時該用戶的userAgent信息，包含操作系統和瀏覽器的類型、版本等。獲取方式為：
window.navigator.userAgent
token：記錄當前用戶是誰。通過記錄該用戶是誰。
一方面方便將該用戶的所有監控信息建立聯系，方便數據分析；
另一方面通過該標識可以查看該用戶的所有操作，方便復現問題。
3.1.2 性能信息
頁面的性能直接影響了用戶留存率，，Google DoubleClick 研究表明：如果一個移動端頁面加載時長超過 3 秒，用戶就會放棄而離開。BBC 發現網頁加載時長每增加 1 秒，用戶就會流失 10%。，Google DoubleClick 研究表明：如果一個移動端頁面加載時長超過 3 秒，用戶就會放棄而離開。BBC 發現網頁加載時長每增加 1 秒，用戶就會流失 10%。所以我們的追求就是提高頁面的性能，為了提高性能需要監控哪些指標呢？
3.1.2.1 指標分類
指標有很多，我總結為以下兩個方面：網絡層面和頁面展示層面。
一、網絡層面
從網絡層面來看涉及的指標有：重定向耗時、DNS解析耗時、TCP連接耗時、SSL耗時、TTFB網絡請求耗時、數據傳輸耗時、資源加載耗時……,各個指標的解釋如下表所示：
指標 解釋
重定向耗時 重定向所耗費的時間
DNS解析耗時 瀏覽器輸入網址后首先會進行DNS解析，其可以對服務器是否工作作出反饋
TCP連接耗時 指建立連接過程的耗時
SSL連接耗時 指數據安全性、完整性建立耗時
TTFB 網絡請求耗時 表示瀏覽器接收第一個字節的時間
數據傳輸耗時 瀏覽器接收內容所耗費的時間
資源加載耗時 DOM構建完畢后到頁面加載完畢這段時間
二、頁面展示層面
頁面展示層面的指標是針對用戶體驗提出的幾個指標，包含FP、FCP、LCP、FMP、DCL、L等，這幾個指標其實就是chrome瀏覽器中performance模塊的指標（如圖所示）。
FP（First Paint） 首次繪制，標記瀏覽器渲染任何在視覺上不同於導航前屏幕內容之內容的時間點.
FCP（First Contentful Paint） 首次內容繪制，標記瀏覽器渲染來自 DOM 第一位內容的時間點，該內容可能是文本、圖像、SVG 甚至 元素.
LCP（Largest Contentful Paint） 最大內容渲染，表示可視區“內容”最大的可見元素開始出現在屏幕上的時間點。
FMP（First Meaningful Paint） 首次有效繪制，表示頁面的“主要內容”開始出現在屏幕上的時間點。它是我們測量用戶加載體驗的主要指標。
DCL（DomContentLoaded） 當 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，無需等待樣式表、圖像和子框架的完成加載.
L（onLoad） 當依賴的資源全部加載完畢之后才會觸發
TTI（Time to Interactive） 可交互時間，用於標記應用已進入視覺渲染並能可靠響應用戶輸入的時間點
FID（First Input Delay） 首次輸入延遲，用戶首次和頁面交互（單擊鏈接、點擊按鈕等）到頁面響應交互的時間
3.1.3 異常信息
對於網站來說，異常信息是最致命、最影響用戶體驗的問題，需要重點監控。對於異常信息可以分為兩類：運行時錯誤、接口錯誤。下面就分別來嘮一嘮這兩類錯誤。
一、運行時錯誤
當JavaScript運行時有可能會發生錯誤，可歸類為七種：語法錯誤、類型錯誤、范圍錯誤、引用錯誤、eval錯誤、URL錯誤、資源加載錯誤。為了捕獲代碼錯誤，需要考慮兩類場景：非Promise場景和Promise場景，因為兩種場景捕獲錯誤的策略不同。
1.非Promise場景
非Promise場景可通過監聽error事件來捕獲錯誤。對於error事件捕獲的錯誤分為兩類：資源錯誤和代碼錯誤。資源錯誤指的就是js、css、img等未加載，該錯誤只能在捕獲階段獲取到，且為資源錯誤時event.target.localName存在值（用此區分資源錯誤與代碼錯誤）；代碼錯誤指的就是語法錯誤、類型錯誤等這一類錯誤，可以獲取代碼錯誤的信息、堆棧等，用於排查錯誤
2.Promise場景
Promise場景的處理方式有所不同，當Promise被reject且沒有reject處理器的時候，會觸發unhandlerejection事件，所以通過監聽unhandlerejection的事件來捕獲錯誤。
二、接口錯誤
對於瀏覽器來說，所有的接口均是基於XHR和Fetch實現的，為了捕獲接口中的錯誤，可以通過重寫該方法，然后通過接口返回的信息來判斷當前接口的狀況，下面以XHR為例來展示封裝過程。
3.3分析
日志上報之后需要進行清洗，獲取自己所需要內容，並將分析內容進行存儲。根據數據量的大小可分為兩種方式：單機和集群。
一、單機
訪問量小、日志少的網站可以采用單機的方式對數據進行分析，例如用node讀取日志文件，然后通過日志文件中獲取所需要的信息，最終將處理的信息存儲到數據庫中。
二、集群
很多產品的訪問量很大，日志很多，此時就需要利用Hadoop進行分布式處理，獲取最終處理結果，其處理流程圖如下所示：
根據自己的日志量級決定自己的分析方式，合適的就是最好的，不用一味追求最優的、最先進的處理方式。
3.4報警
當異常類型超多一定閾值之后需要進行報警通知，讓對應的工作人員去處理問題，及時止損。根據報警的級別不同，可以選擇不同的報警方式。
郵件——普通報警
短信——嚴重報警，已影響部分業務
電話——特別嚴重，例如系統已宕機