說到監控，大家第一時間想到的肯定是 Zabbix、Nagios 等各種強大的後端監控服務。誠然，這些強大的平臺通過採集服務器以及鏈路上各種中間件的數據，為我們的應用穩定起到了不可或缺的保駕護航作用。
然而在互聯網的另一端，運行在用戶終端上的代碼卻缺少這樣強大的監控能力。
對於資深工程師來說，想到或者做出一個前端監控方案並不是什麼難事 —— 通過監聽全局的 window.onerror 事件捕獲到運行時錯誤，然後上報到採集端，再做一個頁面展示數據 —— 看起來確實只需要寫一個簡單的 CRUD 應用就能搞定。
本文將從 採集、數據處理、分析、報警 4 個維度進一步闡述如何把前端監控做到極致。
小福利
如果你還沒有使用前端監控服務，那麼可以先看看這個小福利。只用兩行代碼就能打造一個前端異常實時監控平臺，還帶報錯數統計功能。
其實現思路正如開題所言，通過 window.onerror 採集到所有的未捕獲異常，並通過 new Image 的方式構造一個 404 的 HTTP 請求，最後在服務端實時過濾 access.log 中匹配的請求並計數即可。
實際運行效果如下：
瀏覽器端效果
服務端效果
當然，這個監控系統並不能直接應用在生產環境。要讓監控真正發揮價值，還需要從採集、處理、分析、報警等多個方面進行優化增強。
採集
Script Error
當我們採集前端報錯的時候，第一個遇到的問題就是 Script Error。Script Error 不是一種具體的錯誤，而是瀏覽器對跨域錯誤出於安全機制考慮的一種處理方式。
一個前端錯誤為什麼涉及到了「安全」問題呢？2006 年一位安全研究人員發現第三方腳本可以通過頁面中報錯信息的不同判斷當前用戶是否登錄了指定的網站，並向 Webkit 項目提出了相關的 issue。7 年之後，各大瀏覽器廠商基本都支持了這一安全設定。
Webkit 源碼中對 Script Error 的處理
簡單的說，如果你的頁面和頁面中引用的 JavaScript 文件不同源（協議、域名、端口不一致），那麼這些腳本拋出的錯誤都屬於跨域錯誤。那麼我們在做前端監控捕獲這些錯誤的時候，應該怎麼避免採集到 Script Error 呢？
答案是 crossorigin 屬性。這是一個應用在
閱讀更多 架構師筆記 的文章
