在前端开发中，错误处理是一项非常重要的任务。而正确的错误处理，能够在项目开发中减少各种疑难杂症。本文介绍了一款名为 "correct-error-handler" 的 npm 包，通过使用它，你可以实现更加标准的错误处理。
什么是正确的错误处理？
正确的错误处理在前端开发中不仅是指错误信息要准确具体，而且还要让用户感觉到友好，避免对用户造成过度的干扰。在某些情况下错误处理可能还需要与后端进行沟通，因此在处理错误时还需要把错误信息传递给后端去处理。这些都是正确的错误处理的标准内容。
correct-error-handler 的使用
下面以 webpack 为例，介绍了如何使用 correct-error-handler。
安装
npm install correct-error-handler --save-dev
配置
const CorrectErrorPlugin = require('correct-error-handler');
module.exports = {
plugins: [
new CorrectErrorPlugin(),
],
}使用
export default function App() {
throw new Error('error from App component');
}如果你在 App 组件中抛出了一个错误，你将会看到一个标准的错误页面，如下：
这就是 correct-error-handler 的效果。同时，这个错误还会被发送给后端进行处理，方便我们快速定位问题。
高级配置
有时候我们需要对错误页面进行定制化操作，例如修改错误页面的样式，增加一些额外的错误信息等等。针对这些需求，correct-error-handler 提供了一些高级配置，满足你的特定需求。
-- -------------------- ---- -------
--- --------------------
------ --- ---------- ----- ------
------------ ----- -- - ---------- ----- ------
------------ ----------------------- ------------------------
---------------- -- -- -
----- --- - ------------------------------
------------- - ----- -- -- ----- -------------
------ ----
--
-------- -- ----- -- -- -
------ ----- -- --- ----- -------- ------------------
--
---遗留问题
使用 correct-error-handler 时，由于其内部实现了错误监听，可能会和部分错误监控系统冲突，例如 sentry。这个问题也有解决方法：可以使用 sentry 提供的 ignoreErrors 接口忽略掉被 correct-error-handler 处理的错误，避免重复上报。
结论
正确的错误处理在项目开发中非常重要。合理的错误提示可以缩短我们定位问题的时间，为项目开发节省大量的时间和资源。正确使用 npm 包 "correct-error-handler" 可以帮助我们实现更加标准化的错误处理，从而减少项目中出现的各种错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa981e8991b448d8308