Uncaught error when network connection is disrupted.

[jdgreenberger]

trafficstars

Intended outcome:

I'd like to be able to catch errors when a network connection is disrupted.

Actual outcome:

Errors generated when a network connection is disrupted result in an uncaught error: Uncaught (in promise) Error: undefined

How to reproduce the issue:

On a basic working example of an apollo app, disable the network connection in the browser or turn wifi off.

Versions

  System:
    OS: macOS 11.4
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.2
    Safari: 14.1.1
  npmPackages:
    @apollo/client: ^3.6.4 => 3.6.4 

[jpvajda]

@jdgreenberger Thanks for reporting this, are you considering this a bug of Apollo Client? I'm curious why you can't just write some error handling code to handle the case when the network is not available in your application code, vs the client actually handle that case. I'm not saying we shouldn't consider this case, but I'm curious if you can implement something within the application code to handle it for you. Happy to hear your thoughts to understand further.

[jdgreenberger]

Hi @jpvajda: I should have posted a more thorough stacktrace, this is an error bubbling up from ApolloClient. I could catch all unhandled errors and look for the specific message: "undefined" but this would presumably capture other unrelated, uncaught errors. I would prefer to know specifically if the error is the result of a network connection issue.

index.ts:58 Uncaught (in promise) Error: undefined
    at new ApolloError (index.ts:58:1)
    at Object.error (QueryManager.ts:316:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at Object.error (asyncMap.ts:48:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at iteration.ts:13:1
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.ts:13:1)
    at Object.error (Concast.ts:185:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at createHttpLink.ts:206:1

[jpvajda]

@jdgreenberger Thank you for the additional details! So if we better articulate the error message relating to network disconnection interruption, that be your preference? Something like

Uncaught (in promise) Error: network failure

[jdgreenberger]

That would work! Another option would be to catch the error within Apollo so it can be handled in the middleware like a Graphql error.

[androane]

Having the same problem, would be nice to have a solution for this!

[jdgreenberger]

@jpvajda any update on this?

[jpvajda]

@jdgreenberger no updates as of yet. Our team is working on some higher priority things at the moment. Though we accept PRs so if you want to make an attempt to improve the error message here, we'd be happy to review the PR. Just let us know!

[pei-wang]

I encountered this issue too. I mocked a 500 error response for my API call.

I am wondering what's the appropriate approach for handling this. it does not causes any issue on my functionality, just the error on ReactRefreshWebpackPlugin overlay is annoying me. I can catch the error where I invoke the query, but it makes me replicate the catch to everywhere I use query/mutation.

Was trying to create a custom link to prevent the error pass back since I already handled it on Error link. but it doesn't work, since the Apollo client expects the result(error) back.

index.js:29 Uncaught (in promise) Error: Response not successful: Received status code 500
    at new ApolloError (index.js:29:1)
    at Object.error (QueryManager.js:141:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at Object.error (asyncMap.js:32:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at iteration.js:4:1
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.js:4:1)
    at Object.error (Concast.js:37:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    ```

[jdgreenberger]

@jpvajda our team is consistently getting network errors without any way of debugging. This should be a relatively small change for the library to make, is there any way to prioritize it for the next release?

[bignimbus]

Hi folks 👋🏻 thanks for your patience. Have you tried using an Error Link for this? Apologies if you already tried and this is still an issue. Here's the relevant portion of the documentation: https://www.apollographql.com/docs/react/api/link/apollo-link-error/

[github-actions[bot]]

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.