首页>编程相关>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，并且将相对于