前端異常監控方案理論篇

目的

對前端線上代碼錯誤進行排查，下降 JS Error 的錯誤量，增強h5在不一樣手機的webview的兼容性，提高代碼質量，優化用戶體驗。

四個階段

採集

1. 在index.html文件添加window.onerror全局監聽。
2. 可能出現異常的代碼塊添加try catch，如JSON.parse()等。
3. Promise實例拋出異常捕獲，如網絡請求axios添加catch函數。
4. 在必要的代碼塊添加正常的log，以便追蹤數據的流轉以及分析代碼的運行順序。

存儲

將採集到的異常信息級別分爲info，warn，error，統一存儲在localstorage。

上報

接口：

後端配合提供上報接口：

Methods：get
請求參數：

{
errorType： //錯誤級別info，warn，error
errorMsg: //錯誤信息
url: //出錯的地址
row: //錯誤發生行
col: //錯誤發生列
time: //錯誤發生時間
ua: windw.navigator.userAgent
browser: //瀏覽器信息
osVersion: //客戶端版本
machine: {
//儘可能詳細的手機信息
},
remark: //備註、擴展字段
}

策略：

1. error日誌實時上報。
2. info或warn級別的先存在本地緩存，再10分鐘爲頻率統一上報到服務端。
3. 主動上報：在特定的可疑地方，實時上報必要信息

方式：

前端採起動態建立img標籤，src爲接口地址，並將全部錯誤信息拼接到地址後面。

分析

1.前期提供一個實時查看的監控控制檯。
2.服務器定時任務天天凌晨將錯誤上報信息表統計出來，後期在運營後臺添加一個錯誤報表界面。

注意事項

1.提供一個開關，能夠隨時控制是否錯誤上報。好比發現上報頻率太高、字段信息太多、死循環等，能夠暫時關閉上報功能。
2.線上的js代碼是經過壓縮、混淆的，採集到的信息不夠精確，分析問題有必定侷限性，可考慮Source Map處理，參考文章 http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html