时间戳

首页 > 解决方案 > 如何处理在 Nuxt 中崩溃页面渲染的 apollo 客户端错误？

vue.js - 如何处理在 Nuxt 中崩溃页面渲染的 apollo 客户端错误？

问题描述

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

源代码

问题

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

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

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 模块的简单页面崩溃页面也会在无效的 GraphQL 响应上呈现，我们不知道如何阻止它发生，除了将我们的应用程序从使用 nuxt/apollo 迁移到直接使用 apollo 客户端，这将非常昂贵。 ... 有任何想法吗？

标签： vue.jserror-handlinggraphqlnuxt.jsapollo

解决方案

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

推荐阅读