How to handle apollo client errors crashing page render in Nuxt?

问题

I'm currently maintaining a production Nuxt.js Vue app that integrates GraphQL Apollo Client that's running into page render errors. For the sake of boosting my chances of getting a response, I built a bare-bones code example that showcases only the problem we are running into. Thanks everybody.

Source Code

Client, https://github.com/sgarcia-dev/error-apollo-client-nuxt
Server, https://github.com/sgarcia-dev/error-apollo-server

The Problem

The problem, is that every now and then, the GraphQL server we rely on (we have no control over it) goes down and returns a HTML error page, which crashes Apollo Client due to its attempt to parse the GraphQL spec JSON response. This yields the infamous Unexpected token < in JSON at position 0 error that's been reported over and over again.

The thing is, because we are using the @nuxt/apollo Nuxt module that integrates Apollo into the render pipeline, this makes Nuxt's page render crash. Giving us a generic server render error page that looks like this;

 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)

How to reproduce the error

Clone the repositories from above, and start both of them following the readme.md commands. (for the server error, make sure to run npm run start-express since that's the one that crashes the client).

You'll notice the pages/index.js throws a server error page since the server returns an invalid HTML response.

What we tried

We tried following every error handling spec in the Vue Apollo and Nuxt apollo docs, but nothing seems to work. We tried:

Adding the Nuxt "@apollo/nuxt" module supported error handler syntax. It gets logged correctly, but the error doesn't stop propagating and crashes the page render. Even if we return false at the end. Which we thought that would, since that's what the source code for vue-apollo seems to do
Setting an apollo client errorPolicy of ignore and all, but the error still got through and crashed the page render
Adding individual query error() handlers and not relying on the global one. They stopped propagation to the global page, but it didn't stop the page render error from happening.
Using apollo-link-error's approach to ignoring errors by adding a link property to our nuxt apollo config and following those steps. The link configuration ran, and errors were indeed logged. But response in that example evaluates to undefined, stopping us from being able to do response.error. I assume its a Nuxt compatibility issue thing being SSR and all, and that this might be designed for React applications.

Summary

Even simple pages using nuxt/apollo module crash page render on an invalid GraphQL response, and we have no idea how to stop it from happening other than migrating our app from using nuxt/apollo and instead using apollo client directly which will be quite expensive.... any ideas?

来源：https://stackoverflow.com/questions/66029623/how-to-handle-apollo-client-errors-crashing-page-render-in-nuxt

标签

Vue.js

error-handling

graphql

nuxt.js

apollo