React-apollo: apollo-link-error can allow me to see errors, but can't prevent exceptions in react-apollo

[elmarsto]

Intended outcome:

I expected to be able to catch errors using apollo-link-error and show them to my users in a nice aesthetic dialog. I was expecting to use apollo-link-error to prevent uncaught exceptions from being thrown, to improve UX.

Actual outcome:

While my error link does indeed get to see the errors moments before an exception is thrown, the exception is still thrown and still halts JS execution, meaning that my users never see the dialog.

Here is my apollo config:

// adapted from https://www.apollographql.com/docs/react/features/error-handling.html
const erroneous = ({ response, graphQLErrors, networkError }) => {
  const errs = []
  if (graphQLErrors) {
    errs.push(...graphQLErrors.map(({ message, locations, path }) =>
      `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`))
  }
  if (networkError) {
    errs.push(`[Network error]: ${networkError}`)
  } else {
    response.errors = null
  }
  console.log('hi I definitely got called')
  setErr(errs.join('\n'))
}

const mklink = (token: string, uri: string) => {
  const httpLink = createHttpLink({ uri })
  const errLink = onError(erroneous)
  const authLink = setContext(() => ({
    headers: {
      authorization: getAuth(token),
    },
  }))
  return from([errLink, authLink, httpLink])
}

export const mkclient = (link: Object) => (
  new ApolloClient({
    connectToDevTools: DEV_MODE, // true
    cache: mkcache(fragmentTypes),
    link, //  linker(), jwt, endpoint) live ? mklink(jwt, endpoint) : mockLink,
  })
)

Here's what I see in Chrome devtools when I induce a network failure by kicking over the server:

How to reproduce the issue:

Set up apollo links as above and make any query with react-apollo

Version

• [email protected]
• [email protected]

[coyolero]

There is this comment with a bunch of possible solutions...

Maybe one of those could work for you, I still looking for the one fits my needs.

[viggyfresh]

@liz-mars - https://github.com/apollographql/apollo-link/issues/297#issuecomment-350488527

^you'll need to construct your own link, but the above solves the issue

[hwillson]

https://github.com/apollographql/react-apollo/issues/1548#issuecomment-366342619 should help with this. Closing - thanks!

[gentleShark]

If you're using onError to try to catch mutation errors, it seems there is bug with that. Details and workaround here: https://github.com/apollographql/apollo-client/issues/5708