近年来，前端框架和库层出不穷，其中 React 组件库和 GraphQL 查询语言在前端技术中的地位越发重要。而在使用这些技术过程中，错误信息的处理显得尤为重要，这边将介绍一款 npm 包，简化前端错误信息的显示和调试过程——apollo-error-overlay。
安装
在使用 apollo-error-overlay 之前需要先安装它。
npm install apollo-error-overlay --save-dev
当你的项目已集成了 Apollo GraphQL，使用 apollo-error-overlay 可以在应用程序中更加容易地调试 GraphQL 错误。
使用
在项目中使用 apollo-error-overlay 可以指定一个错误信息处理的配置对象，主要包括：
rootElement:HTMLElement- 项目根元素，通常是document.getElementById('root')graphQLErrors:GraphQLError[]- GraphQL 错误列表networkError:Error- 网络错误onError:(params: ApolloErrorOptions)- 错误回调ui:boolean- 是否显示界面
示例代码：
-- -------------------- ---- -------
------ - ------------ --------------------- - ---- -----------------------
------ - ------------------ - ---- -----------------------
----- ---------------- ----------------------- - -
-- ---------- ----- ----
--
----- --------- - --- ------------- -------------- --------------- ---
----- -------- ------------------ - -
------------ --------------------------------
-------------- ------------------------
------------- -----------------------
--
-- ------------ -
--------------------------------------------------- -- -
-------------------------------
---
-
-- ----------------- -
-------------------------
-通过上述代码，我们可以把项目的错误如 GraphQL 错误和网络错误信息，传递给 apollo-error-overlay 以更好地显示和处理。
生产环境使用
在生产环境中安装和导入 apollo-error-overlay 并不是必须的，因此我们需要使用 webpack 或其他工具，来在打包时排除它。
-- -------------------- ---- ------- --- ------- - --- -- --------------------- --- -------------- - ---------------- ---------------------- - -------------- - - -- ----- ------- ------ -------- --
在示例中，我们使用了判断当前是否处于开发环境的方法，通过 new ErrorOverlayPlugin() 来初始化一个错误叠加层插件，并把它添加到 Webpack 插件列表中。这样在生产环境中，不会加重浏览器的资源负担。
总结
通过使用 apollo-error-overlay，我们可以更方便地调试出现在前端应用程序中的错误。同时，将开发和生产环境区分开来，可以避免在正式环境中出现不必要的错误提示。
希望在接下来开发和调试过程中，apollo-error-overlay 可以帮助同行们减少一定的工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725c81e8991b448e888b