npm 包 apollo-error-overlay 使用教程

阅读时长 4 分钟读完

近年来,前端框架和库层出不穷,其中 React 组件库和 GraphQL 查询语言在前端技术中的地位越发重要。而在使用这些技术过程中,错误信息的处理显得尤为重要,这边将介绍一款 npm 包,简化前端错误信息的显示和调试过程——apollo-error-overlay

安装

在使用 apollo-error-overlay 之前需要先安装它。

当你的项目已集成了 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

纠错
反馈