在前端开发中，调试是不可避免的一环。在调试过程中，错误信息是我们得到问题根源的关键。然而，浏览器提供的错误信息往往不是特别详细，有时候甚至是一些难以理解的报错信息。为了更好地解决这个问题，我们可以使用 npm 包 @knit/nice-errors。
什么是 @knit/nice-errors
@knit/nice-errors 是一个能够美化显示错误信息的工具库。它不仅仅能够将错误信息中的错误发生的位置、数据格式、请求方式等信息展示出来，同时还会采用卡片形式的样式来让错误信息更加的清晰易懂。
安装 @knit/nice-errors
要开始使用 @knit/nice-errors，首先需要在项目中安装它。使用以下命令安装：
npm install @knit/nice-errors
使用 @knit/nice-errors
使用 @knit/nice-errors 非常简单、直接，我们只需要在项目的入口文件中加入如下代码：
import '@knit/nice-errors';
此时，当我们在浏览器中出现错误时，就可以看到 @knit/nice-errors 自动拦截了错误，并将错误信息以卡片形式展示出来：
如上图所示，使用 @knit/nice-errors 后，浏览器中的错误信息看起来更加详细，清除，这样就可以帮助我们快速地定位错误，提高开发效率。
高级用法
除了使用默认的错误卡片外，@knit/nice-errors 也提供了一些高级用法：
定制错误卡片的样式
默认的错误卡片样式可能不太适合你的项目，那我们可以自定义错误卡片的样式。@knit/nice-errors 允许我们通过传入配置参数来自定义错误卡片样式，如下所示：
-- -------------------- ---- -------
------ --------------------
-------------------------
----- -
------ ------
----------- ----
------- --- ----- ------
--
------ -
------ ------
--
----- -
------ ------
--
------ -
------ -------
----------- --- ----- ------
----------- ----
------------ ----
--
------ -
------ -----
----------- ----
--
---上面的代码片段定义了一个新的错误卡片样式，其中包括了卡片、标题、正文、调用栈和追溯信息五个元素。卡片的背景色为红色，标题和正文的字体是白色，调用栈的看起来更加赏心悦目。
定制错误卡片的显示方式
有时候，我们可能并不希望在所有错误发生时都弹出错误卡片。那么我们可以通过调整配置参数，来决定仅在某些特定的错误发生时才弹出错误卡片：
import '@knit/nice-errors';
window.niceErrors.filter = (err) => {
return err.message.indexOf('MySpecialError') !== -1;
};上述代码模块重写了错误卡片的 filter 方法，仅当捕捉到错误信息里含有 MySpecialError 字段时才弹出错误卡片。
结语
通过本文，我们更加详细深入地了解了 @knit/nice-errors 的使用。在日常的前端开发工作中，我们可以采用 @knit/nice-errors 强大的功能加速我们对错误的排导工作，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/90057