前端監控包括 行為監控、異常監控、效能監控，這裡主要討論異常監控。對於前端而言，和後端處於同乙個監控系統中，前端有自己的監控方案，後端也有自己的監控方案，但兩者並不分離，因為乙個使用者在操作應用的過程中如果出現異常，有可能是前端引起，也有可能是後端引起，需要有乙個機制，將前後端串聯起來，使監控本身統一於監控系統。因此，即使只討論前端異常監控，其實也不能嚴格區分前後端界限，而要根據實際系統的設計，在最終的報表中體現出監控對開發和業務的幫助。
一般而言，乙個監控系統，大致可以分為四個階段：日誌採集。日誌儲存、統計與分析、報告和警告。
採集階段：收集異常日誌，先在本地做一定的處理，採取一定的方案上報到伺服器。
儲存階段：後端接收前端上報的異常日誌，經過一定處理，按照一定的儲存方案儲存。
分析階段：分為機器自動分析和人工分析。
報警階段：分為告警和預警。
前端異常是指使用者使用 web 應用時無法快速得到符合預期結果的情況，不同的異常帶來的後果程度不同，輕則引起使用者使用不悅，重則導致產品無法使用，使使用者喪失對產品的認可。
前端異常分類
根據異常**的後果程度，對前端異常的表現分為如下幾類
1、出錯：介面呈現的內容與使用者預期的內容不符，例如點選進入非目標介面，資料不準確，出現的錯誤提示不可理解，介面錯位，提交後跳轉到錯誤介面等情況。這類異常出現時，雖然產品本身功能還能正常使用，但使用者無法達成自己的目標。
2、呆滯：介面出現操作後沒有反應的現象，例如點選按鈕無法提交，提示成功後無法繼續操作。這類異常出現時，產品已經存在介面級區域性不可用現象。
4、假死：介面出現卡頓，任何功能都無法使用的現象。例如使用者無法登陸導致無法使用應用內功能，由於某個遮罩層阻擋且不可關閉導致無法進行任何後續操作。這類異常出現時，使用者很可能殺死應用。
5、崩潰：應用出現經常性自動退出或無法操作的現象。例如間歇性 crash，網頁無法正常載入或載入後無法進行任何操作。這類異常持續出現，將導致使用者流失，影響產品生命力。
異常錯誤原因分類
1、邏輯錯誤
2、資料型別錯誤
3、語法錯誤
4、網路錯誤
5、系統錯誤
採集內容
當異常出現的時候，我們需要知道異常的具體資訊，根據異常的具體資訊來決定採用什麼樣的解決方案。
1、使用者資訊
出現異常時該使用者的資訊，例如該使用者在當前時刻的狀態、許可權等，以及需要區分使用者可多終端登入時，異常對應的是哪乙個終端。
2、行為資訊
使用者進行宣告操作時產生了異常：
3、異常資訊
產生異常的**資訊：使用者操作的dom元素節點、異常級別、異常型別、異常描述、**stack資訊等
4、環境資訊
網路環境、裝置型號和標識碼、作業系統版本、客戶端版本、api介面版本等
前端捕獲異常分為全域性捕獲和單點捕獲。全域性捕獲**集中，易於管理；單點捕獲作為補充，對某些特殊情況進行捕獲，但分散，不利於管理。
1、全域性捕獲
通過全域性的介面，將捕獲**集中寫在乙個地方，可以利用的介面有：
2、單點捕獲
在業務**中對單個**塊進行包裹，或在邏輯流程中打點，實現由針對性的異常捕獲
由於瀏覽器安全策略限制，跨域腳本報錯時，無法直接獲取錯誤的詳細資訊，只能得到乙個 script error。例如，我們會引入第三方依賴，或者將自己的指令碼放在 cdn 時。
解決script error 的方法：
方案一：
方案二：
為頁面上script標籤新增crossorigin屬性
被引入指令碼所在伺服器響應頭中，增加 access-control-allow-origin 來支援跨域資源共享
對於乙個異常，僅僅擁有該異常的資訊還不足以完全抓住問題的本質，因為異常發生的位置，並不一定是異常根源所在的位置。我們需要對異常現場進行還原，才能復原問題全貌，甚至避免類似問題再其他介面中發生。這裡需要引進乙個概念，就是 「異常錄製」。錄製通過 「時間」 「空間」 兩個維度記錄異常發生前到發生的整個過程，對於找到異常根源更有幫助。
一般而言，我們會將收集資訊的級別分為 info、warn、error等，並在此基礎上進行擴充套件。
當我們監控到異常發生時，可以將該異常劃分到「重要---緊急」 模型找那個分為 a、b、c、d 四個等級。有些異常，雖然發生了，但是並不影響使用者的正常使用，使用者其實並沒有感知到，雖然理論上應該修復，但是實際上相對於其他異常而言，可以放在後面進行處理。
一般而言，越靠近右上角的異常會越快通知，保證相關人員能最快接收到資訊，並進行處理。a級異常需要快速響應，甚至需要相關負責人知悉。
上面已經提到，除了異常報錯資訊本身，我們還需要記錄使用者操作日誌，以實現場景復原。這就涉及到上報的量和頻率問題。如果任何**都立即上報，這無異於自造的 ddos 攻擊。因此，我們需要合理的上報方案。下面會介紹4種上報方案，但實際我們不會僅限於其中一種，而是經常同時使用，對不同級別的日誌選擇不同的上報方案。
前端異常監控實踐
前端異常監控系統的開發其實並不複雜，開源實現方案也頗多，技術實現成本並不難，痛點有但是並不是都不能解決，根據我們的情況總結了一下 捕獲使用者的操作路徑，根據操作路徑我們去還原使用者的使用場景，來幫助我們快速定位問題的所在。操作路徑分為以下幾個點 當然這塊整體的資料我們會基於cookie和locals...
前端錯誤異常捕獲監控
前端錯誤的分類 即時執行錯誤 錯誤 資源載入錯誤 第一種錯誤一般用 try.catch例項 try catch err window.onerror例項 window.onerror function msg,url,line,col,error function finderror finderr...
前端監控之白屏異常
一 意義 這裡和測速的白屏不同，測速的白屏是指 導航頁面開始到ttfb之間的時間稱之為白屏時間。白屏異常是指 使用者看到的一直是白屏，頁面沒有任何內容。比如渲染函式報錯 vue或react路由頁面沒有內容 網頁載入很慢很慢以至規定的時間範圍內一直沒內容。監控白屏異常能發現一些遺漏的bug並及時修復。...