如何处理在 Nuxt 中崩溃页面渲染的 apollo 客户端错误？答案

【问题标题】：How to handle apollo client errors crashing page render in Nuxt?如何处理在 Nuxt 中崩溃页面渲染的 apollo 客户端错误？
【发布时间】：2021-05-07 19:24:45
【问题描述】：

我目前正在维护一个生产 Nuxt.js Vue 应用程序，该应用程序集成了 GraphQL Apollo 客户端，该客户端运行到页面呈现错误中。为了增加获得响应的机会，我构建了一个简单的代码示例，仅展示我们遇到的问题。谢谢大家。

源代码

客户，https://github.com/sgarcia-dev/error-apollo-client-nuxt
服务器，https://github.com/sgarcia-dev/error-apollo-server

问题

问题在于，我们所依赖的 GraphQL 服务器（我们无法控制它）时不时地出现故障并返回一个 HTML 错误页面，这会导致 Apollo 客户端由于尝试解析 GraphQL 规范 JSON 而崩溃回复。这会产生臭名昭著的Unexpected token < in JSON at position 0 错误，再次报告over 和over。

问题是，因为我们使用了@nuxt/apollo Nuxt 模块，将Apollo 集成到渲染管道中，这使得Nuxt 的页面渲染崩溃。给我们一个看起来像这样的通用服务器渲染错误页面；

 ERROR  Network error: Unexpected token < in JSON at position 0                                                            08:11:04

  at new ApolloError (node_modules/apollo-client/bundle.umd.js:92:26)
  at node_modules/apollo-client/bundle.umd.js:1588:34
  at node_modules/apollo-client/bundle.umd.js:2008:15
  at Set.forEach (<anonymous>)
  at node_modules/apollo-client/bundle.umd.js:2006:26
  at Map.forEach (<anonymous>)
  at QueryManager.broadcastQueries (node_modules/apollo-client/bundle.umd.js:2004:20)
  at node_modules/apollo-client/bundle.umd.js:1483:29
  at processTicksAndRejections (node:internal/process/task_queues:94:5)

如何重现错误

从上面克隆存储库，并按照 readme.md 命令启动它们。（对于服务器错误，请确保运行 npm run start-express，因为那会导致客户端崩溃）。

您会注意到 pages/index.js 抛出一个服务器错误页面，因为服务器返回了无效的 HTML 响应。

我们尝试了什么

我们尝试遵循 Vue Apollo 和 Nuxt apollo 文档中的每个错误处理规范，但似乎没有任何效果。我们试过了：

添加 Nuxt“@apollo/nuxt”模块supported error handler syntax。它被正确记录，但错误不会停止传播并使页面渲染崩溃。即使我们return false at the end。我们认为会的，因为这就是vue-apollo seems to do 的源代码
设置了errorPolicy 和ignore 和all 的apollo 客户端，但错误仍然通过并导致页面渲染崩溃
添加单个查询error() 处理程序，而不依赖于全局查询。他们停止了向全局页面的传播，但并没有阻止页面呈现错误的发生。
通过将link 属性添加到我们的nuxt apollo 配置并按照这些步骤来使用apollo-link-error 对ignoring errors 的方法。链接配置运行，并且确实记录了错误。但是该示例中的response 的计算结果为未定义，这使我们无法执行response.error。我认为它的 Nuxt 兼容性问题是 SSR 和所有，并且这可能是为 React 应用程序设计的。

总结

即使是使用 nuxt/apollo 模块的简单页面崩溃页面也会在无效的 GraphQL 响应上呈现，我们不知道如何阻止它发生，除了将我们的应用程序从使用 nuxt/apollo 迁移到直接使用 apollo 客户端，这将是相当昂贵....有什么想法吗？

【问题讨论】：

感谢您提供详细的说明，目前正在为类似情况做计划。请问你最后做了什么？
我们决定放弃 Vue Apollo 智能查询实现，因为我们认为我们浪费了太多时间来尝试从 Nuxt.js 方面修复它以及它糟糕的文档/社区支持。所以我们最终只是在 vue 组件挂钩中使用 Promise 进行了 apollo 查询，但计划在未来远离 Nuxt.js。
感谢您的回复。请问为什么要远离nuxt，走向什么？
你试过github.com/Gomah/nuxt-graphql-request 吗？
不，我想我们没有尝试过那个插件。但是，如果我们听说过它，我们可能不会使用它，因为它不是很受欢迎或不活跃，而且我们在使用低采用率的工具时遇到了足够多的问题，这些工具具有未修复的错误和缺少文档。顺便说一句，我研究了它，使用 asyncData 和 Promise 的实现几乎与我们使用 nuxt Apollo 插件所做的完全一样。哦，我们的路线图是远离 Nuxt，只使用普通的 Vue.js

标签： vue.js error-handling graphql nuxt.js apollo

【解决方案1】：

难道不能通过计算属性（显示在模板中）运行您的 apollo 查询。这样，您可以在计算属性中检查 JSON 错误并在其中捕获它们，然后再将它们提供给模板渲染过程。

【讨论】：

是的，但是如果我们这样做，我认为您最好在 fetch 挂钩下处理它们，让它们在 SSR 模式下运行，同时仍然可以使用 Promise 控制失败状态。