前言：
如果你碰巧是一名前端開發，而又碰巧在維護著一個對可用性有極高要求的站點，那麼也許你我有過共同的苦惱：如何在第一時間發現線上出現的前端異常？畢竟前端不是每天都可以過網頁裸奔節，線上的Javascript錯誤也足以讓使用者抓狂地拿起他們的投訴電話。。。每天心驚膽戰釋出的日子不好過吧？
是時候改變下了，讓心驚膽戰見鬼去吧！我的目標很簡單：要在使用者和boss發現異常之前就徹底修復問題，其餘的時間充分地享受高質量生活:）
一：前端異常監控系統的構建目標
在對被監控頁面無侵入的前提下，提供7*24小時全天候的監控任務，第一時間發現“裸奔”、“半裸奔”頁面或是有Javascript異常丟擲的頁面，並給網站前端負責人提供簡訊、郵件等方式的報警服務。
可以說，前端異常監控系統主要是解決兩大異常情況：a. 頁面上有javascript異常 b. 各種因素造成的頁面的樣式丟失。我先分別介紹下兩種這兩種異常的解決思路：
二：Javascript的異常監控
由於客戶端瀏覽器環境的不同，在開發環境中能夠工作的程式碼，並非就能夠在使用者的電腦上正常執行，各種畸形瀏覽器造成的問題弄得我們很頭大，如果能像後端開發那樣可以隨時地檢視伺服器端錯誤日誌就好了！可為什麼不呢？
Javascript語言自身就提供了try catch的異常處理語法，我們假以利用的話，就能夠在增強前端應用魯棒性的同時，又可以把捕獲到的異常拋送給前端異常監控系統，以錯誤日誌的形式記錄到資料庫中。
給應用新增異常處理功能，我們是可以充分發揮javascript語言是動態語言這一優勢的。我可不想為了新增異常處理而在程式碼中寫N多的try-catch語句。 我的思路是：通過Javascript類模組在應用中註冊的時候，遍歷類模組中的每個函式，然後統一的加上try-catch處理，這樣前端裡面的所有函式就都在異常處理的範圍之內了。怎麼樣，是不是要比Java等靜態語言cool很多？ 程式碼示例如下：
有了以上的全域性異常處理函式之後，解決線上的Javascript異常就是小菜一碟，只需要定義好錯誤message的格式，並在catch語句中向異常監控系統的固定介面傳送請求即可。我們可以在錯誤訊息中傳送關於錯誤的瀏覽器資訊，JS模組資訊，函式資訊，或具體的錯誤訊息等，要傳送哪些資訊全看你自己的需要。在FdSafe異常監控系統中，我們傳輸了如下錯誤資訊：
三：樣式丟失的異常監控
如果你的頁面在不該裸奔的時候突然裸奔了，那就是嚴重的可用性問題，需要前端同學在第一時間定位問題並迅速修復。引發“裸奔”的可能性很多，也許是CSS檔案404了，也許是CSS檔案@import url的問題，但是最終的表象只有一個，那就是頁面樣式突然發生極大改變。
在fdsafe系統中，我們使用了圖片對比的方法來探測線上頁面發生“裸奔”的現象，原理上很簡單：對於被監控頁面的URL，我們讓監控系統保留其前一天頁面被瀏覽器渲染後的截圖，然後讓監控系統週期性的定時抓取線上頁面的截圖，兩張圖片做相似度對比，如果相似度差值超過一定的閾值，則會觸發報警條件。
頁面的截圖我們是使用QT的webkit核心渲染並擷取的，當然也推薦使用selenium的瀏覽器截圖功能。而圖片相似度的演算法很多，我們最終採用的是OpenCV中的cvCompareHist演算法。
四：其它的異常監控
除了樣式丟失及javascript異常之外，前端還是有很多其它異常可以通過系統來監控的，比如說JS、CSS檔案的404錯誤，HTML原始碼的閉合異常，或JS、CSS檔案的壓縮異常等。fdSafe系統能夠通過新增外掛的方式來提供對不同異常的監控，然後統一彙總到異常日誌中。
五：系統總體框架圖
搭建前端的異常監控系統，自然也要體現我們前端的特色，後臺的系統我們是基於NodeJS來實現的，它主要完成兩個功能：
1）定時抓取被監控頁面的HTML原始碼，並分析是否存在頁面樣式丟失異常或是其它異常。
2）接受來自使用者瀏覽器傳送的Javascript異常。
一旦異常發生，且超出設定的允許閾值，則觸發報警條件，給負責人傳送報警簡訊，系統原理圖如下：
六：總結
隨著web應用朝著富客戶端方向的發展，前端應用的可用性重要性越來越高，搭建前端異常監控系統的必要性也是越來也高，希望本文能夠給大家提供一些思路上的啟發。有疑問或建議，歡迎探討：terence.wangt@alibaba-inc.com