前端異常日誌捕獲-定位偶現問題

其實已經有很多文章有寫過這幾種實現方法了。

有些消費者端偶現的問題，嚴重影響了消費體驗，但是作爲開發要求消費者把手機郵過來聯調的概率更小。爲了能重現用戶的鏈路，看下控制檯有沒有報錯。可以全局攔截報錯信息，並傳入後臺。

前端異常攔截

vue

// 1. errorHandler
// 2. warnHandler
// 3. renderError
// 4. errorCaptured

window.onerror

1. 可以捕捉語法錯誤，也可以捕捉運行時錯誤；
2. 可以拿到出錯的信息，堆棧，出錯的文件、行號、列號；
3. 只要在當前頁面執行的js腳本出錯都會捕捉到，例如：瀏覽器插件的javascript、或者flash拋出的異常等。
4. 跨域的資源需要特殊頭部支持。

window.onerror = function(message, source, lineno, colno, error) { }

• message：錯誤消息（字符串）。在HTML onerror=""處理程序event（sic！）中可用。
• source：引發錯誤的腳本的URL（字符串）
• lineno：發生錯誤的行號（數值）
• colno：發生錯誤的行的列號（數值）
• error：錯誤對象（對象）

try catch中的console

業務屬性強的，在try catch中的報錯，自己寫異常等級及加載機制組件，配置變量來看是否需要上報，和log4j的debug info類似。在我的項目中，對於異常的場景都是有用try catch包裹並且使用console.error進行錯誤日誌打印的。

// 備份原有的console
var _console = console
// 自定義console，重寫error方法
myConsole.error = (...arg)=>{_console.error(...arg),collect(...arg)}
myConsole.info = _console.info
// 自定義console覆蓋已使用的console
window.console = myConsole;

Nginx錯誤日誌

通過nginx日誌獲取,nginx中可生成access.log日誌，包含所有請求接口的響應值。異常如404、401等

後端存儲

1. 記錄日誌，用日誌系統如ELK進行查詢
2. 存入MongoDB，設置過期時間，不佔用大內存，非結構化數據
3. 主動告警，當某種錯誤到達一定數量，主動發送郵件或者短信通知用戶。