如何做前端異常監控？

01-24

雖然上線前會有自測 QA等但是還是會有線上異常情況，如何快速發現或者監控到這些異常的出現？

瀏覽器端 JavaScript 異常監控 For Dummies

演講視頻預計在12月底發布。

可以用 Sentry(GitHub - getsentry/sentry: Sentry is cross-platform crash reporting built with love) 來收集錯誤。

每次發布把 sourcemap 文件上傳到 Sentry 上還能還原代碼壓縮後的錯誤。

每次發布創建一個 release

把每次發布的 soucemap 文件傳上去

收集到的錯誤

根據 soucemap 把壓縮代碼的錯誤棧還原出來，上面是用戶信息

還能發送自定義的數據來幫助定位錯誤

【更新】

推薦幾個成熟的異常監控平台 ——

Fundebug - 不放過每一個BUG
Error reporting, monitoring, and resolution with Bugsnag
前端異常監控-BetterJS

【原回答】

「Web 前端異常監控/遠程日誌」這個領域我從近一年前就開始關注、嘗試，先列一下參考文獻 ——

前端代碼異常監控
前端相關數據監控
阿里巴巴（中國站）用戶體驗設計部博客（文中提到的 FdSafe 並沒有被 阿里巴巴 UED 開源）
hlg-front/前端性能監控/monitor.js-master at master · huanleguang/hlg-front · GitHub
sap1ens/javascript-error-logging · GitHub

就目前來看，無論是 開源項目 還是 開放平台，適合國內程序猿使用的此類成熟系統依然缺乏，是一個值得探索的領域~（我在考慮用 Node.JS 寫一個）

剛才 @藍浩提醒我 —— 初期若不考慮記錄調用堆棧這樣複雜的信息，可以直接簡單粗暴地讓前端頁面把報錯信息作為 URL 參數，去 GET 一個固定且不存在（404 Not Found）的 URL，然後就可以直接在伺服器用命令行過濾 HTTP 服務程序（Apache、LightHTTPd、IIS、Nginx 等）的 Access Log 來分析 Web 前端日誌 —— 簡單、高效、可靠~

分享一段我修改自上文所提【參文 1】的「Web 前端全局異常監控」代碼（基於 jQuery）——

(function (BOM, $) {


    var Console_URL = $("head link[rel="console"]").attr("href");
    BOM.onerror = function (iMessage, iURL, iLine, iColumn, iError){

        BOM.setTimeout(function () {

            var iData = {

                    message:    iMessage,

                    url:        iURL,

                    line:       iLine,

                    column:     iColumn  ||  (BOM.event  BOM.event.errorCharacter)  ||  0

                };
            if (iError  iError.stack)

                iData.stack = (iError.stack || iError.stacktrace).toString();
            if (Console_URL) {

                if (iData.stack)

                    $.post(Console_URL, iData);

                else

                    $.get(Console_URL, iData);

            }

        }, 0);
        return true;

    };

})(self, self.jQuery);

下面的方案中包括性能檢測和錯誤檢測，部分方法是hack性質的，將來不一定適用，不過至少當前主流瀏覽器可行，還有是基於新興性能介面的，瀏覽器將來會全面支持吧。

====================================================================

前端寫一個監控腳本，實現以下功能：

1、onerror捕獲JavaScript異常，對應跨域檢測也有方案；

2、addEventListener("error", handler, true)來捕獲靜態資源異常，包括js、img、css等；

3、Resource Timing API 和 Performance Timing API來進行性能檢測和內存檢測；

4、擴展XHR原型，檢測返回的狀態碼，如404等，來檢測ajax請求失敗、錯誤；

5、通過正則匹配等方式去檢測DOM結構的合法性，如ID重複、文檔類型未聲明之類的；

6、頁面的死鏈接可以通過Nodejs的第三方模塊，如request等，來檢測。

====================================================================

再詳細點的，回頭再補充吧！歡迎討論。

8年前我們那個產品就有JS異常上報機制，後來也有了監控；

在IE下能夠列印堆棧，在代碼混淆後排查就比較麻煩了，error信息有時候很不靠譜，不過能夠知道報錯的代碼文件、行號和基本的錯誤已經可以解決很多問題。

幾點建議：

1、除了列印上面說的3個主要信息（文件，行號和錯誤信息），還要記錄下瀏覽器信息，IE下把堆棧列印出來；

2、在日誌中列印用戶的身份信息，因為有些代碼分支是根據用戶身份有不同的，方便你排障；

3、除了腳本錯誤，還可以上報AJAX介面的請求超時，返回碼錯誤等，有時候是客戶網路實在有問題，還得記錄每一個AJAX請求的約定隨機數，讓服務端業務系統也作為標準處理，可以用一個隨機數代碼查到底層的日誌；

4、上報的信息最好分模塊，具體提現在日誌文件或者欄位都可以；

5、監控報警找運維同志負責一下；

Sai · GitHub

很久之前支付寶的前端異常監控項目，不怎麼維護了，最有價值的是 JavaScript 異常檔案。

推薦使用FrontJS。

FrontJS 最早是用於蒲公英旗下產品 Tracup - 軟體開發團隊協作系統中的一個性能工具，也就是我們一個月前發布的frontend-tracker，發布後在一些社區內也有一些良好的反應。

當我們嘗試在蒲公英上使用這款工具的時候也出現了一些問題，比如，蒲公英每天能產生千萬級別的訪問信息，這使得原有的統計分析性能變得不是很理想，這對於一款統計分析為主的產品來說是致命的。

我們及時調整了從於數據單元到分析單元的結構和代碼，在不增長機器數量的情況下解決了這個問題。現在，一款簡單的性能工具也變成了一個性能監控平台，我們有信心面對更大的數據量，於是我們把這個平台開放出來，讓每個 Web 開發者能夠從中獲益。

前端大部分異常是來自於請求異常（超時，數據錯誤等等）。所以歸根結底還是要監控請求狀況。

目前市面上服務請求級別的監控實現很少，基本都是容器級別的硬體監控，到不了請求的粒度。最近發現一個開源項目還不錯，很好部署，功能也比較實用。可以做請求分析，查看單次請求報文等等。最有用的是它會在所有請求頭上添加requestId，可以快速定位異常請求的詳細信息，非常實用。

如何做前端異常監控？

github地址 benhouse1987/Monitor-Ares

演示地址 http://sugarclub.oss-cn-shanghai.aliyuncs.com/monitor.html