如何解决如何处理在 Nuxt 中导致页面渲染崩溃的阿波罗客户端错误?
我目前正在维护一个生产 Nuxt.js Vue 应用程序,该应用程序集成了 GraphQL Apollo 客户端,该应用程序遇到页面渲染错误。为了增加我得到响应的机会,我构建了一个简单的代码示例,只展示了我们遇到的问题。谢谢大家。
源代码
- 客户,https://github.com/sgarcia-dev/error-apollo-client-nuxt
- 服务器,https://github.com/sgarcia-dev/error-apollo-server
问题
问题在于,我们所依赖的 GraphQL 服务器(我们无法控制它)时不时出现故障并返回一个 HTML 错误页面,由于它尝试解析 GraphQL 规范 JSON,Apollo Client 崩溃回复。这会产生臭名昭著的 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 的源代码
- 设置了
ignore
和all
的阿波罗客户端 errorPolicy,但错误仍然存在并导致页面渲染崩溃 - 添加单个查询
error()
处理程序而不依赖于全局处理程序。他们停止传播到全局页面,但并没有阻止页面呈现错误的发生。 - 通过将
apollo-link-error
属性添加到我们的 nuxt apollo 配置并执行这些步骤,使用link
的 ignoring errors 方法。链接配置运行,并且确实记录了错误。但是该示例中的response
评估为 undefined,阻止我们执行response.error
。我假设它是 SSR 和所有的 Nuxt 兼容性问题,并且这可能是为 React 应用程序设计的。
总结
即使是使用 nuxt/apollo 模块的简单页面也会在无效的 GraphQL 响应上呈现崩溃页面,除了迁移我们的应用程序使用 nuxt/apollo 而不是直接使用 apollo 客户端之外,我们不知道如何阻止它发生相当昂贵......有什么想法吗?
解决方法
难道不能通过计算属性(显示在模板中)运行您的 apollo 查询。这样,您可以在计算属性中检查 JSON 错误并在那里捕获它们,然后再将它们提供给模板渲染过程。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。