客戶端javascript的錯誤記錄

Question

我的項目包含很多帶有表單的頁面。 這是銀行CRM系統的后端，因此可以捕獲和調查工作過程中的任何錯誤。 在服務器端，我們有增強的java異常系統，但是如果在客戶端發生錯誤 - javascript我們現在獲得的唯一信息是IE中的js-error窗口，或者有時是高級用戶制作的頁面截圖。

Javascript代碼包含Jquery支持的UI擴展和硬編碼的內聯事件處理程序和函數。

所以我問是否可以使用任何捕獲任何類型的js-errors的方法？ 一些額外的庫或某些東西可以給我一個像Mozilla中的firebug或Chrome中的web控制台的堆棧跟蹤？

Answer 1

查看window.onerror 。 如果您想捕獲任何錯誤並將它們報告給服務器，那么您可以嘗試使用AJAX請求。

window.onerror = function(errorMessage, errorUrl, errorLine) {
    jQuery.ajax({
        type: 'POST',
        url: 'jserror.jsf',
        data: {
            msg: errorMessage,
            url: errorUrl,
            line: errorLine
        },
        success: function() {
            if (console && console.log) {
                console.log('JS error report successful.');
            }
        },
        error: function() {
            if (console && console.error) {
                console.error('JS error report submission failed!');
            }
        }
    });

    // Prevent firing of default error handler.
    return true;
}

Answer 2

免責聲明：我是Sentry的首席執行官和創始人，這是一種開源和付費服務，可以為許多語言（包括Javascript）進行崩潰報告。

捕獲前端異常可能非常具有挑戰性。 技術已經變得更好（瀏覽器JS引擎），但仍有很多局限性。

1. 您將需要一個服務器端日志記錄端點。 這有一些復雜性，因為它可能會濫用它（即PEN測試人員可能會嘗試暴露其中的漏洞）。 你還需要在這里處理CORS。 我明顯推薦Sentry，因為我們在課堂上是最好的，如果你願意，你可以自己托管服務器（作為開源）。
2. 實際捕獲代碼中的錯誤的實現非常復雜。 由於各種原因你不能依賴window.onerror （主要是因為瀏覽器歷史上在這里提供了不好的信息）。 我們在raven.js客戶端（基於TraceKit）中所做的是修補許多函數來將它們包裝在try / catch語句中。 例如， window.setTimeout 。 有了這個，我們就可以安裝錯誤處理程序，在大多數瀏覽器中生成完整的堆棧跟蹤。
3. 您需要確保為代碼生成源映射，並且處理數據的服務器支持它們。 Sentry通過自動（通過標准）抓取它們或允許您通過API上傳它們來實現這一點。 如果沒有這個，假設您正在縮小代碼，事情幾乎無法使用。
4. 最后一個主要問題是噪音。 大多數瀏覽器擴展將直接注入您的腳本，因此您需要過濾掉噪音。 我們以兩種方式解決這個問題：要忽略的模式黑名單（即“腳本錯誤”是最無用的），以及要接受的域名白名單（即“example.com”）。 我們發現兩者的組合在消除大多數隨機噪聲方面足夠有效。

您應該在服務器上注意的一些事項：

• 客戶端有時會持續打開（即機器人或壞用戶）並導致大量無用數據或簡單的舊錯誤。
• 您的服務器應該能夠處理這些事件的級聯並正常失敗。 Sentry通過限速和采樣數據來做到這一點。
• 異常被本地化為瀏覽器語言，如果沒有集中式數據庫，您將無法自己翻譯它們（盡管它們的含義通常很明顯）。

Answer 3

如果你想做無痛的實現，只需在你的應用程序中放置這個人的javascript代碼。 否則如果你想實現一個，那么試試這個以獲得window error的堆棧跟蹤，你可以使用ajax來報告錯誤。 跟蹤olark報告的錯誤的好方法

Answer 4

http://exceptionhub.com應該訣竅。 http://errorception.com/不提供調試信息，但也很好看。

proxino似乎不知道他們在做什么，他們在他們的記錄器代碼中包含一個完整的jQuery來記錄我上次檢查時的錯誤事件。 我不相信一個對客戶端JavaScript很少掌握的服務來記錄我的JavaScript錯誤。

Answer 5

我建議使用JsLog.me服務

除了錯誤和堆棧跟蹤之外，它還可以捕獲整個控制台輸出。 我們在項目中使用它，記錄整個控制台日志有助於我們的QA團隊記錄問題再現方式。 此外，它適用於Chrome控制台中的大型JSON對象，並且具有搜索功能。

Answer 6

如果您的網站使用的是Google Analytics，您可以執行以下操作：

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

關於上面代碼的一些評論：

• 對於現代瀏覽器，將記錄完整堆棧跟蹤。
• 對於不捕獲堆棧跟蹤的舊瀏覽器，將記錄錯誤消息。 （根據我的經驗，大多數早期的iOS版本）。
• 還會記錄用戶的瀏覽器版本，因此您可以查看哪些操作系統/瀏覽器版本正在拋出哪些錯誤。 這簡化了錯誤優先級和測試。
• 如果你使用谷歌分析“的analytics.js”，此代碼的工作是這樣 。 如果你使用“gtag.js”， 就像這樣 ，你需要調整函數的最后一行。 詳情請見此處 。

代碼到位后，您就可以查看用戶的Javascript錯誤：

1. 在Google Analytics中，點擊“ Behavior部分，然后點擊“ Top Events報告。
2. 您將獲得一個事件類別列表。 單擊列表中的window.onerror 。
3. 您將看到Javascript堆棧跟蹤和錯誤消息的列表。 通過單擊“ Secondary dimension按鈕並在顯示的文本框中輸入“ Event Label ，為用戶的操作系統/瀏覽器版本添加一列報告。
4. 該報告將如下面的屏幕截圖所示。
5. 要將操作系統/瀏覽器字符串轉換為更易於閱讀的描述，我將它們復制粘貼到https://developers.whatismybrowser.com/useragents/parse/

Answer 7

Atatus捕獲JavaScript錯誤並捕獲錯誤之前的用戶操作。 這有助於更好地理解錯誤。 Atatus幫助您監控前端，不僅僅是出錯，還有其性能（真實用戶監控）

https://www.atatus.com/

免責聲明：我是Atatus的網絡開發人員。