在前端开发中，经常会出现错误和异常情况，为了更好地追溯错误，我们需要清晰的错误堆栈信息。但是，当错误信息过长时，对于开发者的阅读和理解带来很大的困难。这时，我们可以使用 npm 包 chained-error，它可以帮助我们在错误信息中添加更多的上下文和异常信息，使得错误信息更加清晰明了。
chained-error 是什么？
chained-error 是一个装饰器函数，它可以向错误对象中添加上下文、异常信息以及堆栈信息。我们可以在代码中使用它，当出现异常时，它将生成一个新的错误对象，并添加上下文和异常信息到堆栈中。
如何使用？
使用 chained-error 非常简单，只需要按照以下步骤即可：
步骤 1：安装
首先，在项目中引入 chained-error。可以使用 npm 包管理器来安装它。
npm install chained-error --save
步骤 2：使用
在使用 chained-error 时，我们需要将它作为装饰器函数插入到需要添加堆栈信息的函数中。例如：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- -------- ------ - ----- --- ---------------- ---- ----------- - -------- ----- - ------- - -------- ----- - ------ - -------- ----- - ------ - --- - ------ - ----- ------- - --------------------- -展开代码
在上面的示例代码中，我们使用 ChainedError 创建了一个新的错误对象，并向其中添加了一条错误信息。然后，我们将 ChainedError 插入到栈帧的底部，从而生成一个新的错误对象，并将其添加到错误堆栈信息中。
当我们运行上面的代码时，将会得到类似以下的错误信息：
ChainedError: 调用 boom 函数时发生错误！ at boom (index.js:4:9) at baz (index.js:8:3) at bar (index.js:12:3) at foo (index.js:16:3) at Object.<anonymous> (index.js:20:3)
从上面的错误信息可以看出，一个新的错误对象已经被创建并添加到了错误堆栈中。不仅如此，我们还可以将错误对象和其他任何异常信息一起存储，以便更好地追溯错误。
如何优化？
尽管使用 chained-error 可以增强堆栈信息，但是过度地添加堆栈信息可能会导致信息过多，造成开发者的阅读困难。为了避免这种情况的发生，我们可以使用以下优化技巧：
优化 1：添加上下文信息
我们可以通过添加上下文信息来提供更多的错误信息，例如函数名、文件名等，而不是仅仅添加异常信息。
-- -------------------- ---- ------- ------ ------------ ---- ---------------- -------- ------ - ----- --- ---------------- ---- ---------- - --------- ------- ----- ---------- --- - --- - ------- - ----- ------- - --------------------- -展开代码
从上面的代码中可以看出，我们向 ChainedError 的第二个参数中添加了函数名和文件名作为上下文信息。当运行代码时，错误信息将被按照以下格式进行输出：
ChainedError: 调用 boom 函数时发生错误！ at boom (index.js:4:9) [Context] function: `boom` file: `index.js`
优化 2：定制堆栈信息
虽然默认情况下，chained-error 会生成堆栈信息，但是我们可以使用 printStack 参数来关闭堆栈信息的输出。
-- -------------------- ---- ------- ------ ------------ ---- ---------------- -------- ------ - ----- --- ---------------- ---- ---------- - --------- ------- ----- ----------- ----------- ----- --- - --- - ------- - ----- ------- - --------------------- -展开代码
从上面的代码中可以看出，我们通过向 ChainedError 的第二个参数中添加 printStack: false，从而关闭了堆栈信息的输出。当运行代码时，错误信息将会按照以下格式进行输出：
ChainedError: 调用 boom 函数时发生错误！ [Context] function: `boom` file: `index.js`
总结
使用 chained-error 可以为我们追踪错误提供更多的上下文信息和异常信息，使得我们更加容易地理解其中的问题。相信通过本篇文章的介绍，你已经学会了如何在你的项目中使用 chained-error，以及如何进行优化。如果你正在遭受错误信息的困扰，那就赶快尝试一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196730
