JavaScript 錯誤處理的最佳實踐是什么？

Question

我希望開始讓我的 JavaScript 更加防錯，而且我找到了大量關於使用try 、 catch 、 finally和throw的文檔，但我沒有找到專家關於何時何地的大量建議拋出錯誤。

• 每段代碼都應該包含在 try/catch 中嗎？
• 關於應該在什么時候發現錯誤，是否有更多這樣的建議？
• 引發錯誤而不是讓代碼在生產中靜默失敗有什么缺點嗎？
• 就實現而言，這已經在 SO 上有所涉及，但是服務器記錄 JS 錯誤是否是一種有效的策略？
• 關於在我的應用程序中捕獲錯誤，還有什么我應該知道的嗎？

我也完全喜歡聽有精彩章節或深入解釋錯誤處理的書籍。 Eloquent JavaScript 談到了這個問題，但對這個問題不是很規范或自以為是。

感謝您提供的任何建議！

Answer 1

可以在https://web.archive.org/web/20140126104824/http://www.devhands.com/2008/10/javascript-error-handling-and找到一組關於企業 JavaScript 錯誤處理的非常有趣的幻燈片-一般最佳實踐/

簡而言之，它總結了：

1. 假設你的代碼會失敗
2. 將錯誤記錄到服務器
3. 你，而不是瀏覽器，處理錯誤
4. 確定可能發生錯誤的位置
5. 拋出自己的錯誤
6. 區分致命錯誤和非致命錯誤
7. 提供調試模式

幻燈片 go 更詳細，很可能會給您一些指導。

編輯：

上面提到的演示可以在這里找到： https://www.slideshare.net/nzakas/enterprise-javascript-error-handling-presentation

Answer 2

雅虎的 Nicholas Zakas！ fame 在 Ajax Experience 2008 上做了一個關於企業錯誤處理的演講（ 幻燈片），他在演講中提出了這樣的建議：

function log(sev,msg) {
    var img = new Image();
    img.src = "log.php?sev=" +
        encodeURIComponent(sev) +
        "&msg=" + encodeURIComponent(msg);
}

// usage
log(1, "Something bad happened.")

// Auto-log uncaught JS errors
window.onerror = function(msg, url, line) {
    log(1, msg);
    return true;
}

一年后，Nicholas Zakas 在他的博客上發布了一個更新，其中包括一個巧妙的模式，可以在您的生產環境中自動注入錯誤處理代碼（使用面向方面的編程）。

當您開始記錄 window.error 調用時，您會注意到兩件事：

1. 如果您的站點相當復雜，您將記錄很多錯誤
2. 您會看到一堆無用的“window.error in undefined:0”消息

減少日志條目的洪流就像在登錄到服務器之前測試嚴重性和/或隨機數一樣簡單：

function log(sev,msg) {
    if (Math.random() > 0.1) return; // only log some errors

    var img = new Image();
    img.src = "log.php?sev=" +
        encodeURIComponent(sev) +
        "&msg=" + encodeURIComponent(msg);
}

處理window.error in undefined:0錯誤取決於您的站點架構，但可以嘗試識別所有 Ajax 調用並在出現故障時拋出異常（可能使用stacktrace.js返回堆棧跟蹤）。

Answer 3

IHMO，您應該像使用其他幾種語言（AFAIK：Python，Java）一樣在 javascript 中使用錯誤處理。

為了更好的可讀性（可能還有更好的性能，盡管我不確定它是否真的有很大的影響），你應該主要在以下情況下使用 try / catch 塊：

• 您要包裝的代碼部分是整個算法的關鍵部分。 如果失敗，它可以：

  • 在代碼的下一部分創建錯誤（例如，因為缺少 var...）
  • 使頁面看起來不像預期的那樣（對內容或 css 的影響）
  • 使結果對用戶來說很奇怪（對代碼行為的影響）

• 您知道您正在編寫的代碼與所有瀏覽器都不兼容

• 您計划代碼可能會失敗（因為沒有其他方法可以通過 if...then... 塊檢查它是否應該工作）
• 還有當你想在不打擾最終用戶的情況下進行調試時

最終，javascript 專家可能還有其他元素可以給出。

我的 2 美分到盒子里，

問候，

最大限度

Answer 4

除了其他答案：一件重要的事情是使用 JavaScript 錯誤對象和window.onerror function 參數中可用的上下文數據。

諸如堆棧跟蹤 (errorObject.stack)、文件名、行號和列號之類的東西。 請注意，每個瀏覽器都有一些差異......因此請盡最大努力獲得良好的錯誤。

控制台 object 本身甚至可能存在問題。 我使用受此啟發的自定義 window.onerror function 和受此代碼啟發的特殊 function 來跟蹤任何給定的標准錯誤 object。

另一個好處是將 web 應用程序的版本包括在堆棧跟蹤附近的某個位置（以便快速安全地復制和粘貼）。 您還可以在開發模式下更積極地顯示錯誤（警告...），因為開發人員不會持續監視瀏覽器控制台並且可能看不到某些問題。

也可以使用 avoid using throw 'My message' ，使用throw new Error('My message') ，你甚至可以有自定義錯誤，閱讀這篇文章。

始終為錯誤添加一些上下文（版本、object 的 ID、一些自定義消息，...）並確保區分外部錯誤（某些外部數據或環境導致系統失敗）和內部錯誤/斷言（你自己的系統搞砸了），閱讀“按合同設計”。

這是指南。

還要考慮使用一般的錯誤處理，比如攔截你的庫和框架：

• jQuery
• Angular 1.x和http
• Angular 2.x
• 你的新塗料框架在這里......

Answer 5

我為此創建了腳本。 它阻止除允許列表中提到的項目之外的所有控制台命令，或阻止阻止列表中的所有內容。 即使使用彩色控制台日志也能很好地工作。

https://github.com/iiic/consoleFilter.js