apollo-client: Global error handling

Hi, In my application, as is quite common, I handle errors coming back from the server in the same global way, throughout the app. Right now, every time I make a mutation to the server, I need to include error handling code every time, which is just boilerplate overhead. In my specific case, I use react with redux, and dispatch an action on error to display a snackbar. So, every mutation has this same added code:

mutate(...).catch(err => {
        const error = err.graphQLErrors[0].message
        props.showUserFeedback(error)
      })

where I need to connect the component to redux just for that action, and so forth.

I propose some kind of global error handling in the apollo client settings, maybe with a different way to handle each kind of error, and that could be overridden.

Thanks!

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 26 (4 by maintainers)

Most upvoted comments

I did something along these lines:

const networkInterface = createNetworkInterface({uri})

const handleErrors = ({ response }, next) => {
  // clone response so we can turn it into json independently
  const res = response.clone()
  // if it's not user error, we skip this afterware (for example a 401)
  if (!res.ok) {
    // handle network errors based on res.status here, for example:
    if (res.status === 500) {
      showUserFeedback('internal server error')
    }
    return next()
  }

  // handle apollo errors
  res.json().then(json => {
    each(json.data, data => {
      if (data && data.errors && data.errors.length) {
        showUserFeedback(data.errors[0])
      }
    })
    next()
  })
}

networkInterface.useAfter([{
  applyAfterware: handleErrors,
}])

const client = new ApolloClient({
  networkInterface,
})

Obviously showUserFeedback is implemented somewhere… Hope this helps!

+27

alondahari on Aug 24, 2017

@jazzdragon you’re not the only one to have missed that. The documentation could really use a “global error handling” section or something; currently the only way a user can find out how to handle errors globally in Apollo is to:

Read all of the documentation front-to-back until the find the “secret” feature in the network interface
Find this ticket
Be a dev 😉

Far more likely they’ll discover the local error handling and think that’s all Apollo offers, because that’s all that’s highlighted in the documentation.

+15

machineghost on Jul 23, 2017

I just released a library that solves this problem for Apollo 2: react-apollo-network-status

Maybe this is helpful to you 🙂

amannn on Jan 12, 2018

@jazzdragon can you please share the whole implementation? I don’t understand what you mean with “showUserFeedback is implemented somewhere”

lobosan on Aug 29, 2017

I agree with @machineghost. Even some example code would help.

colinramsay on Aug 21, 2017

you can create a custom network interface to handle this: http://dev.apollodata.com/core/network.html#custom-network-interface

you can wrap the what apollo client network interface you are using then add in your error handling in there.

fc on May 10, 2017