首頁>編程相關>JAVA源碼
下載

JavaScript 錯誤手冊

本自述文件包含我多年來學到的有關處理 JavaScript 錯誤、將錯誤報告給伺服器以及解決許多可能使這一切變得非常困難的錯誤的資訊。瀏覽器在這方面已經有所改進，但仍有改進的空間，以確保所有應用程式都能理智、健全地處理發生的任何錯誤。

本指南中內容的測試案例可以在 https://mknichel.github.io/javascript-errors/ 中找到。

目錄

  • 介紹

  • JavaScript 錯誤剖析

    • 產生 JavaScript 錯誤

    • 錯誤訊息

    • 堆疊追蹤格式

  • 捕獲 JavaScript 錯誤

    • 視窗錯誤

    • 嘗試/捕捉

    • 受保護的入口點

    • 承諾

    • 網路工作者

    • Chrome 擴充功能

介紹

捕獲、報告和修復錯誤是任何應用程式的重要組成部分，以確保應用程式的健康和穩定性。由於 JavaScript 程式碼也在客戶端和許多不同的瀏覽器環境中執行，因此掌握應用程式中的 JS 錯誤也可能很困難。沒有關於如何報告 JS 錯誤的正式 Web 規範，這會導致每個瀏覽器的實作有差異。此外，瀏覽器的 JavaScript 錯誤實作中也存在許多錯誤，這使得這變得更加困難。本頁面將介紹 JS 錯誤的這些方面，以便未來的開發人員能夠更好地處理錯誤，瀏覽器有望收斂於標準化解決方案。

JavaScript 錯誤剖析

JavaScript 錯誤由兩個主要部分組成：錯誤訊息和堆疊追蹤。錯誤訊息是一個字串，描述出了什麼問題，堆疊追蹤描述了程式碼中發生錯誤的位置。 JS 錯誤可以由瀏覽器本身產生，也可以由應用程式程式碼引發。

產生 JavaScript 錯誤

當一段程式碼沒有正確執行時，瀏覽器可能會拋出JS錯誤，也可能由程式碼直接拋出。

例如：

 var a = 3;a();

在此範例中，實際上是數字的變數不能作為函數呼叫。瀏覽器會拋出類似TypeError: a is not a function with a stack trace that point of that line of code 的錯誤。

如果不滿足某個先決條件，開發人員可能還想在一段程式碼中拋出錯誤。例如

if (!checkPrecondition()) {
  throw new Error("不符合前提條件！");}

在這種情況下，錯誤將是Error: Doesn't meet precondition! 。此錯誤還將包含指向對應行的堆疊追蹤。瀏覽器和應用程式程式碼拋出的錯誤可以進行相同的處理。

開發人員可以透過多種方式在 JavaScript 中拋出錯誤：

  • throw new Error('Problem description.')

  • throw Error('Problem description.') <-- 相當於第一個

  • throw 'Problem description.' <-- 不好

  • throw null <-- 更糟

實際上不建議拋出字串或 null，因為瀏覽器不會將堆疊追蹤附加到該錯誤，從而丟失程式碼中發生該錯誤的上下文。最好拋出一個實際的 Error 對象，其中包含錯誤訊息以及指向發生錯誤的正確程式碼行的堆疊追蹤。

錯誤訊息

每個瀏覽器都有自己的一組訊息，用於內建異常，例如上面嘗試呼叫非函數的範例。瀏覽器將嘗試使用相同的訊息，但由於沒有規範，因此無法保證這一點。例如，Chrome 和 Firefox 都使用{0} is not a function ，而 IE11 將報告Function expected （特別是也不報告嘗試呼叫什麼變數）。

然而，瀏覽器也經常出現分歧。當switch語句中存在多個 default 語句時，Chrome 會拋出"More than one default clause in switch statement"而 Firefox 則會報告"more than one switch default" 。隨著新功能添加到網路中，這些錯誤訊息必須更新。當您嘗試處理混淆程式碼報告的錯誤時，這些差異可能會在稍後發揮作用。

您可以在以下位置找到瀏覽器用於錯誤訊息的範本：

  • 火狐 - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg

  • Chrome - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js

  • Internet Explorer - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h

對於某些異常，瀏覽器會產生不同的錯誤訊息。

堆疊追蹤格式

堆疊追蹤是對程式碼中發生錯誤的位置的描述。它由一系列幀組成，其中每個幀描述程式碼中的特定行。最上面的幀是引發錯誤的位置，而後續幀是函數調用堆疊 - 或如何執行程式碼以到達引發錯誤的位置。由於 JavaScript 通常是連接和縮小的，因此列號也很重要，以便在給定行有多個語句時可以找到準確的語句。

Chrome 中的基本堆疊追蹤如下所示： 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

每個堆疊幀由一個函數名稱（如果適用且程式碼不在全域範圍內執行）、它來自的腳本以及程式碼的行號和列號組成。

不幸的是，堆疊追蹤格式沒有標準，因此這因瀏覽器而異。

Microsoft Edge 和 IE 11 的堆疊追蹤看起來與 Chrome 類似，只是它明確列出了全域程式碼： 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3)
  at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3)

Firefox 的堆疊追蹤如下所示： 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9
  @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Safari 的格式與 Firefox 的格式類似，但也略有不同： 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18
  global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13

基本資訊相同，但格式不同。

另請注意，在 Safari 範例中，除了格式與 Chrome 不同之外，列號也與 Chrome 和 Firefox 不同。在不同的錯誤情況下，列號也可能偏差較大 - 例如在程式碼中(function namedFunction() { throwError(); })(); ，Chrome 將報告throwError()函數呼叫的列，而 IE11 則將列號報告為字串的開頭。當伺服器需要解析堆疊追蹤以查找報告的錯誤並對混淆的堆疊追蹤進行反混淆時，這些差異將在稍後重新發揮作用。

有關錯誤堆疊屬性的更多信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack。存取 Error.stack 屬性時，Chrome 確實將錯誤訊息包含在堆疊中，但 Safari 10+ 則不會。

堆疊追蹤的格式因瀏覽器使用的形式和列號而異。

進一步深入了解，堆疊追蹤格式有很多細微差別，將在下面幾節中討論。

命名匿名函數

預設情況下，匿名函數沒有名稱，並且在堆疊追蹤的函數名稱中顯示為空字串或「匿名函數」（取決於瀏覽器）。為了改進偵錯，您應該為所有函數新增名稱，以確保它出現在堆疊幀中。最簡單的方法是確保使用名稱指定匿名函數，即使名稱未在其他任何地方使用。例如：

 setTimeout(函數名稱OfTheAnonymousFunction() { ... }, 0);

這將導致堆疊追蹤來自： 

at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17

到

at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31)

在 Safari 中，這將來自： 

https://mknichel.github.io/javascript-errors/javascript-errors.js:175:27

到

nameOfTheAnonymousFunction@https://mknichel.github.io/javascript-errors/javascript-errors.js:171:41

此方法可確保nameOfTheAnonymousFunction出現在該函數內部任何程式碼的框架中，讓偵錯更加容易。請參閱 http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/#toc-debugging-tips 以了解更多資訊。

將函數分配給變數

如果函數本身沒有名稱，瀏覽器也會使用函數指派給的變數或屬性的名稱。例如，在

var fnVariableName = 函數() { ... };

瀏覽器將使用fnVariableName作為堆疊追蹤中函數的名稱。 

    at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9)
    at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

比這更微妙的是，如果這個變數是在另一個函數中定義的，那麼所有瀏覽器都將僅使用該變數的名稱作為堆疊追蹤中的函數名稱，但Firefox 除外，它將使用不同的形式來連接變數的名稱外部函數與內部變數的名稱。例子：

函數 throwErrorFromInnerFunctionAssignedToVariable() {
  var fnVariableName = function() { throw new Error("foo"); } };
  fn變數名();}

將在 Firefox 中產生： 

throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37

在其他瀏覽器中，這看起來像是： 

at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Firefox 對另一個函數中定義的函數使用不同的堆疊框架文字。

顯示名稱 屬性

在 IE11 之外的所有主要瀏覽器中，函數的顯示名稱也可以透過displayName屬性來設定。在這些瀏覽器中，displayName 將出現在 devtools 偵錯器中，但在 Safari 以外的所有瀏覽器中，它不會在錯誤堆疊追蹤中使用（Safari 與其他瀏覽器的不同之處在於，它還在與錯誤關聯的堆疊追蹤中使用displayName）。

 var someFunction = function() {};someFunction.displayName = " # 函數的詳細描述。";

displayName 屬性沒有官方規範，但所有主要瀏覽器都支援它。請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName 和http://www.alertdebugging.com/2009/04/29/building-a- better -javascript-profiler-with-webkit/ 以了解有關 displayName 的更多資訊。

IE11 不支援 displayName 屬性。

Safari 使用 displayName 屬性作為錯誤堆疊追蹤中的符號名稱。

以程式設計方式捕捉堆疊追蹤

如果報告錯誤時沒有堆疊追蹤（請參閱下面發生這種情況的更多詳細資訊），則可以以程式設計方式擷取堆疊追蹤。

在 Chrome 中，透過使用Error.captureStackTrace API 可以輕鬆做到這一點。有關使用此 API 的更多信息，請參閱 https://github.com/v8/v8/wiki/Stack%20Trace%20API。

例如：

函數ignoreThisFunctionInStackTrace() {
  var err = 新錯誤();
  Error.captureStackTrace(err,ignoreThisFunctionInStackTrace);
  返回 err.stack;}

在其他瀏覽器中，還可以透過建立新錯誤並存取該物件的堆疊屬性來收集堆疊追蹤：

 var err = new Error('');回傳 err.stack;

但是，IE10 僅在實際引發錯誤時填充堆疊追蹤：

嘗試 {
  拋出新的錯誤('');} catch (e) {
  返回 e.stack;}

如果這些方法都不起作用，那麼可以透過迭代arguments.callee.caller物件來建立沒有行號或列的粗略堆疊追蹤——但這在ES5嚴格模式下不起作用，並且不是建議的方法。

非同步堆疊追蹤

將非同步點插入到 JavaScript 程式碼中是很常見的，例如當程式碼使用setTimeout或透過使用 Promises 時。這些非同步入口點可能會導致堆疊追蹤出現問題，因為它們會導致形成新的執行上下文，並且堆疊追蹤再次從頭開始。

Chrome DevTools 支援非同步堆疊追蹤，或者換句話說，確保錯誤的堆疊追蹤也顯示引入非同步點之前發生的幀。透過使用 setTimeout，這將捕獲誰呼叫了最終產生錯誤的 setTimeout 函數。請參閱 http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/ 以了解更多資訊。

非同步堆疊追蹤將如下所示： 

  throwError	@	throw-error.js:2
  setTimeout (async)		
  throwErrorAsync	@	throw-error.js:10
  (anonymous function)	@	throw-error-basic.html:14

目前，非同步堆疊追蹤僅在 Chrome DevTools 中受支持，僅適用於 DevTools 開啟時引發的異常。從程式碼中的 Error 物件存取的堆疊追蹤不會將非同步堆疊追蹤作為其一部分。

在某些情況下，可以填充非同步堆疊追蹤，但這可能會對應用程式的效能造成重大影響，因為擷取堆疊追蹤並不便宜。

只有 Chrome DevTools 本身支援非同步堆疊追蹤。

命名內聯腳本和 eval

已評估或內聯到 HTML 頁面中的程式碼的堆疊追蹤將使用頁面的 URL 和執行程式碼的行/列號。

例如： 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

如果這些腳本實際上來自出於最佳化原因而內聯的腳本，則 URL、行號和列號將是錯誤的。為了解決此問題，Chrome 和 Firefox 支援//# sourceURL=註解（Safari、Edge 和 IE 不支援）。此註解中指定的 URL 將用作所有堆疊追蹤的 URL，並且將相對於