JavaScript内核与高级编程之：`Error Stacks` 提案：`JavaScript` 如何标准化错误堆栈信息。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们聊点儿 JavaScript 里的“案发现场”调查——Error Stacks。

相信各位写代码的时候，总会遇到程序突然崩溃，屏幕一片红的情况吧？这时候，Error Stack 就成了咱们的救命稻草，它记录了函数调用的轨迹，能帮咱们追溯到错误发生的源头。

但是，长期以来，JavaScript 的 Error Stack 格式一直是个老大难问题，各个浏览器厂商各有各的实现，导致解析和处理起来非常麻烦。好在，TC39 意识到了这个问题，提出了“Error Stacks”提案，试图统一 Error Stack 的格式，让开发者们的日子好过一些。

今天，咱们就来深入剖析一下这个提案，看看它解决了哪些问题，带来了哪些好处，以及如何更好地利用 Error Stack 来调试代码。

一、Error Stack 的前世今生：混乱的格式

在“Error Stacks”提案之前，Error Stack 的格式可以用“百花齐放，乱象丛生”来形容。不同的浏览器，甚至同一浏览器的不同版本，Error Stack 的格式都可能不一样。这给开发者带来了很大的困扰，因为我们需要针对不同的浏览器编写不同的解析代码。

举个例子，在 Chrome 浏览器中，Error Stack 可能是这样的：

Error: Something went wrong!
    at foo (index.js:2:9)
    at bar (index.js:5:5)
    at baz (index.js:8:5)
    at <anonymous> (index.js:11:1)

而在 Firefox 浏览器中，Error Stack 可能是这样的：

foo@http://localhost:8080/index.js:2:9
bar@http://localhost:8080/index.js:5:5
baz@http://localhost:8080/index.js:8:5
@http://localhost:8080/index.js:11:1

可以看到，虽然都包含了函数名、文件名和行号等信息，但格式却大相径庭。这种不一致性给错误追踪工具的开发带来了很大的挑战。

二、“Error Stacks”提案：拨乱反正的希望

为了解决 Error Stack 格式不统一的问题，TC39 提出了“Error Stacks”提案，旨在标准化 Error Stack 的格式，使其更易于解析和处理。

该提案主要做了以下几件事：

定义了统一的 Error Stack 格式： 提案规定了 Error Stack 中每一行的格式，包括函数名、文件名、行号、列号等信息。
引入了 Error.prepareStackTrace： 允许开发者自定义 Error Stack 的格式，可以根据自己的需求定制 Error Stack 的输出。
增加了 Error.stackTraceLimit： 允许开发者设置 Error Stack 的最大深度，可以控制 Error Stack 的大小。

三、Error Stack 的格式规范：有章可循

“Error Stacks”提案定义了 Error Stack 中每一行的格式，使其更易于解析和处理。具体的格式如下：

at functionName (fileName:lineNumber:columnNumber)

其中：

functionName：函数名，如果函数是匿名函数，则显示 <anonymous>。
fileName：文件名，包含路径信息。
lineNumber：行号。
columnNumber：列号。

例如：

at foo (index.js:2:9)

表示在 index.js 文件的第 2 行第 9 列调用了 foo 函数。

四、Error.prepareStackTrace：定制你的 Error Stack

Error.prepareStackTrace 是一个非常有用的 API，它允许开发者自定义 Error Stack 的格式。通过 Error.prepareStackTrace，我们可以根据自己的需求定制 Error Stack 的输出，使其更易于阅读和理解。

Error.prepareStackTrace 的使用方法如下：

Error.prepareStackTrace = function (error, stack) {
  return stack.map(function (frame) {
    return {
      functionName: frame.getFunctionName(),
      fileName: frame.getFileName(),
      lineNumber: frame.getLineNumber(),
      columnNumber: frame.getColumnNumber(),
      toString: function () {
        return `at ${this.functionName} (${this.fileName}:${this.lineNumber}:${this.columnNumber})`;
      },
    };
  }).join('n');
};

function foo() {
  throw new Error('Something went wrong!');
}

function bar() {
  foo();
}

function baz() {
  bar();
}

baz();

在上面的例子中，我们定义了一个 Error.prepareStackTrace 函数，该函数接收两个参数：error 和 stack。error 是一个 Error 对象，stack 是一个 StackFrame 对象数组。

在 Error.prepareStackTrace 函数中，我们将 StackFrame 对象数组转换成一个字符串，该字符串包含了函数名、文件名、行号和列号等信息。

当我们抛出一个 Error 对象时，JavaScript 引擎会自动调用 Error.prepareStackTrace 函数，并将 Error 对象和 StackFrame 对象数组作为参数传递给该函数。Error.prepareStackTrace 函数的返回值将作为 Error 对象的 stack 属性的值。

五、Error.stackTraceLimit：控制 Error Stack 的深度

Error.stackTraceLimit 允许开发者设置 Error Stack 的最大深度。通过 Error.stackTraceLimit，我们可以控制 Error Stack 的大小，避免 Error Stack 过大导致性能问题。

Error.stackTraceLimit 的使用方法如下：

Error.stackTraceLimit = 10;

function foo() {
  throw new Error('Something went wrong!');
}

function bar() {
  foo();
}

function baz() {
  bar();
}

baz();

在上面的例子中，我们将 Error.stackTraceLimit 设置为 10，这意味着 Error Stack 的最大深度为 10。如果函数调用链的深度超过 10，那么 Error Stack 中只会包含最近的 10 个函数调用信息。

六、Error Stack 的实际应用：调试利器

Error Stack 是一个非常有用的调试工具，它可以帮助我们快速定位错误发生的位置。

下面是一些 Error Stack 的实际应用场景：

追踪错误： 当程序崩溃时，Error Stack 可以帮助我们追踪错误发生的位置，找到导致错误的代码。
分析性能问题： Error Stack 可以帮助我们分析性能问题，找到导致性能瓶颈的代码。
调试异步代码： Error Stack 可以帮助我们调试异步代码，找到异步操作的执行顺序。

七、Error Stack 的局限性：并非万能

虽然 Error Stack 是一个非常有用的调试工具，但它并非万能的。在某些情况下，Error Stack 可能无法提供足够的信息来帮助我们定位错误。

例如，当错误发生在第三方库中时，Error Stack 可能只会显示第三方库的代码，而无法显示我们自己的代码。这时，我们需要借助其他的调试工具来定位错误。

此外，Error Stack 只能显示函数调用链的信息，而无法显示变量的值。如果错误是由变量的值引起的，那么我们需要借助其他的调试工具来查看变量的值。

八、Error Stack 与 Source Maps：强强联合

Source Maps 是一种将压缩后的代码映射回原始代码的技术。通过 Source Maps，我们可以将 Error Stack 中的压缩后的代码位置转换成原始代码位置，从而更方便地定位错误。

例如，假设我们有一个压缩后的 JavaScript 文件 app.min.js，该文件对应的 Source Map 文件为 app.min.js.map。当 app.min.js 中的代码发生错误时，Error Stack 中会显示压缩后的代码位置，例如：

at foo (app.min.js:1:100)

通过 Source Maps，我们可以将 app.min.js:1:100 转换成原始代码位置，例如：

at foo (app.js:10:5)

这样，我们就可以更方便地找到错误发生的位置。

九、Error Stack 的未来：持续发展

“Error Stacks”提案已经标准化了 Error Stack 的格式，但这并不意味着 Error Stack 的发展已经停止。未来，Error Stack 可能会朝着以下几个方向发展：

更丰富的信息： Error Stack 可能会包含更多的信息，例如变量的值、函数的参数等。
更强大的功能： Error Stack 可能会提供更强大的功能，例如自动定位错误、自动修复错误等。
更好的集成： Error Stack 可能会与更多的调试工具集成，例如 IDE、浏览器调试器等。

十、总结：掌握 Error Stack，提升开发效率

Error Stack 是一个非常有用的调试工具，它可以帮助我们快速定位错误，分析性能问题，调试异步代码。掌握 Error Stack 的使用方法，可以大大提升我们的开发效率。

虽然 Error Stack 并非万能的，但在大多数情况下，它都可以帮助我们解决问题。因此，我们应该重视 Error Stack 的学习和使用，将其作为我们开发工具箱中的一个重要工具。

附：常见浏览器 Error Stack 格式对比

为了更直观地了解不同浏览器 Error Stack 的格式差异，我整理了一个表格，供大家参考：

浏览器	Error Stack 格式
Chrome	`Error: <message>n at <functionName> (<fileName>:<lineNumber>:<columnNumber>)n at <functionName> (<fileName>:<lineNumber>:<columnNumber>)n ...`
Firefox	`<functionName>@<fileName>:<lineNumber>:<columnNumber>n<functionName>@<fileName>:<lineNumber>:<columnNumber>n...`
Safari	`<functionName>@<fileName>:<lineNumber>:<columnNumber>n<functionName>@<fileName>:<lineNumber>:<columnNumber>n...` (与 Firefox 类似)
Edge	与 Chrome 类似，基于 Chromium 内核
Node.js	`Error: <message>n at <functionName> (<fileName>:<lineNumber>:<columnNumber>)n at <functionName> (<fileName>:<lineNumber>:<columnNumber>)n ...` (与 Chrome 类似，但可能包含 Node.js 模块路径)

希望通过今天的讲解，大家对 Error Stack 有了更深入的了解。记住，遇到错误不要慌，看看 Error Stack，也许答案就在其中！感谢大家的收看！

发表回复 取消回复

发表回复取消回复