2

I'm trying to handle errors with Apollo in react gracefully. So the idea is whenever the user encounters an error of some sort (500 or anything else). I want to just show a message like 'something went wrong, please try again later'.

Upon the first render of the component this works fine (the error is present in data.error) but when I leave the route and the component is unmounted, it throws.

At the moment I cannot prevent it from throwing an error. I've tried pretty much everything in this thread: https://github.com/apollographql/react-apollo/issues/604#issuecomment-355648596

  • link-error: Logs the errors, but doesn't prevent it from throwing
  • hoc: Logs the errors, but doesn't prevent it from throwing
  • componentDidCatch: Doesn't do anything
  • errorPolicy: Prevents errors, but it means I also can't handle them anymore.

I always get the following stack: Unhandled error Network error: Response not successful: Received status code 500 Error: Network error: Response not successful: Received status code 500 at new ApolloError (webpack-internal:///./node_modules/apollo-client/errors/ApolloError.js:36:28) at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:287:41) at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:668:17) at Array.forEach (<anonymous>) at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:667:18) at Map.forEach (<anonymous>) at QueryManager.broadcastQueries (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:662:22) at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:236:31) at <anonymous>

For reference: - apollo-client: 2.2.5 - react-apollo: 2.0.4

Thom Hos
  • 33
  • 1
  • 5

1 Answers1

0

As described here:

I believe the way to "handle" the error when using the graphql HOC is to simply check data.errors inside the component. There's a check inside apollo-client that throws if data.errors isn't accessed.

The whole issue on GitHub where this comment was made has a very interesting discussion about the how's and why's. Most of the proposed solutions didn't work for me, especially the componentDidCatch, which, IMHO, was the cleanest alternative.

I could get over it touching the this.props.data.error, but I'm definitely not happy with it.

Edit

I've just noticed that you mentioned that the errors where happening when the component was unmounting... and well, it seems to be fixed on 2.1.0-beta.3. :-)

Diego Couto
  • 585
  • 1
  • 5
  • 16