Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Error Observable cancelled prematurely get's thrown
See original GitHub issueSorry that I cannot provide more info. I may get some time to try and reproduce this in codesandbox in the future, but for now I just wanted to have a linkable bug reference to put into our codebase. For now we have this hackfix in ErrorBoundary component to get around this:
componentDidCatch(error: Error) {
captureException(error)
if (error.message === 'Observable cancelled prematurely') {
console.warn(error) // this is an annoying error getting thrown by apollo client 3.3.x. Some future versions might be okay, but it's the safest to leave this here
// easiest to get this is to use login link on a user profile page and open it in incognito window, There it happens 100% of the times
location.reload() // slightly hacky, but we can't think of a better hotfix ATM
return
}
this.setState({ error })
}
Intended outcome: no error is thrown no matter how we mount/dismount providers. If this indeed happens when a provider is unmounted by react then it should be caught by apollo-client because at that point we really don’t care about these observables and their values at all.
Actual outcome: this error is thrown:
Uncaught Error: Observable cancelled prematurely
| ApolloError | @ | index.js:26
| (anonymous) | @ | QueryManager.js:535
| (anonymous) | @ | asyncMap.js:11
| (anonymous) | @ | asyncMap.js:11
| notifySubscription | @ | Observable.js:140
| flushSubscription | @ | Observable.js:121
| (anonymous) | @ | Observable.js:174
| (anonymous) | @ | Observable.js:73
| Promise.then (async) | |
| onNewData | @ | useBaseQuery.js:18
| error | @ | QueryData.js:240
| notifySubscription | @ | Observable.js:140
| onNotify | @ | Observable.js:179
| error | @ | Observable.js:240
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| error | @ | ObservableQuery.js:26
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| error | @ | Concast.js:35
| notifySubscription | @ | Observable.js:140
| onNotify | @ | Observable.js:179
| error | @ | Observable.js:240
| (anonymous) | @ | asyncMap.js:19
| Promise.then (async) | |
| (anonymous) | @ | asyncMap.js:11
| notifySubscription | @ | Observable.js:140
| flushSubscription | @ | Observable.js:121
| (anonymous) | @ | Observable.js:174
| (anonymous) | @ | Observable.js:73
| Promise.then (async) | |
| enqueue | @ | Observable.js:71
| onNotify | @ | Observable.js:173
| error | @ | Observable.js:240
| ../node_modules/@apollo/client/utilities/observables/Concast.js.Concast.deliverLastMessage | @ | Concast.js:86
| ../node_modules/@apollo/client/utilities/observables/Concast.js.Concast.addObserver | @ | Concast.js:97
| (anonymous) | @ | Concast.js:11
| Subscription | @ | Observable.js:197
| subscribe | @ | Observable.js:279
| (anonymous) | @ | asyncMap.js:37
| Subscription | @ | Observable.js:197
| subscribe | @ | Observable.js:279
| complete | @ | Concast.js:56
| notifySubscription | @ | Observable.js:145
| onNotify | @ | Observable.js:179
| complete | @ | Observable.js:245
| (anonymous) | @ | Observable.js:593
| (anonymous) | @ | Observable.js:73
| Promise.then (async) | |
| enqueue | @ | Observable.js:71
| (anonymous) | @ | Observable.js:585
| Subscription | @ | Observable.js:197
| subscribe | @ | Observable.js:279
| complete | @ | Concast.js:56
| ../node_modules/@apollo/client/utilities/observables/Concast.js.Concast.start | @ | Concast.js:79
| Concast | @ | Concast.js:71
| ../node_modules/@apollo/client/core/QueryManager.js.QueryManager.fetchQueryObservable | @ | QueryManager.js:580
| (anonymous) | @ | ObservableQuery.js:312
| ../node_modules/@apollo/client/core/Reobserver.js.Reobserver.reobserve | @ | Reobserver.js:18
| ../node_modules/@apollo/client/core/ObservableQuery.js.ObservableQuery.reobserve | @ | ObservableQuery.js:317
| ../node_modules/@apollo/client/core/ObservableQuery.js.ObservableQuery.onSubscribe | @ | ObservableQuery.js:294
| (anonymous) | @ | ObservableQuery.js:13
| Subscription | @ | Observable.js:197
| subscribe | @ | Observable.js:279
| ../node_modules/@apollo/client/react/data/QueryData.js.QueryData.startQuerySubscription | @ | QueryData.js:220
| ../node_modules/@apollo/client/react/data/QueryData.js.QueryData.getExecuteResult | @ | QueryData.js:150
| ../node_modules/@apollo/client/react/data/QueryData.js.QueryData.execute | @ | QueryData.js:98
| (anonymous) | @ | useBaseQuery.js:35
| useDeepMemo | @ | useDeepMemo.js:6
| useBaseQuery | @ | useBaseQuery.js:35
| useQuery | @ | useQuery.js:3
| useThrowingQuery | @ | useThrowingQuery.ts:18
| useLoginPageQuery | @ | LoginPage.codegen.tsx:157
| OauthLoginButtons | @ | OauthLoginButtons.tsx:36
| renderWithHooks | @ | react-dom.development.js:14985
| mountIndeterminateComponent | @ | react-dom.development.js:17811
| beginWork | @ | react-dom.development.js:19049
| beginWork$1 | @ | react-dom.development.js:23940
| performUnitOfWork | @ | react-dom.development.js:22776
| workLoopSync | @ | react-dom.development.js:22707
| renderRootSync | @ | react-dom.development.js:22670
| performSyncWorkOnRoot | @ | react-dom.development.js:22293
| (anonymous) | @ | react-dom.development.js:11327
| unstable_runWithPriority | @ | scheduler.development.js:646
| runWithPriority$1 | @ | react-dom.development.js:11276
| flushSyncCallbackQueueImpl | @ | react-dom.development.js:11322
| flushSyncCallbackQueue | @ | react-dom.development.js:11309
| scheduleUpdateOnFiber | @ | react-dom.development.js:21893
| dispatchAction | @ | react-dom.development.js:16139
| Promise.then (async) | |
| onNewData | @ | useBaseQuery.js:18
| next | @ | QueryData.js:230
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| next | @ | ObservableQuery.js:21
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| next | @ | Concast.js:24
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | Observable.js:589
| (anonymous) | @ | Observable.js:73
| Promise.then (async) | |
| enqueue | @ | Observable.js:71
| (anonymous) | @ | Observable.js:585
| Subscription | @ | Observable.js:197
| subscribe | @ | Observable.js:279
| complete | @ | Concast.js:56
| ../node_modules/@apollo/client/utilities/observables/Concast.js.Concast.start | @ | Concast.js:79
| Concast | @ | Concast.js:71
| ../node_modules/@apollo/client/core/QueryManager.js.QueryManager.fetchQueryObservable | @ | QueryManager.js:580
| (anonymous) | @ | ObservableQuery.js:312
| ../node_modules/@apollo/client/core/Reobserver.js.Reobserver.reobserve | @ | Reobserver.js:18
| ../node_modules/@apollo/client/core/ObservableQuery.js.ObservableQuery.reobserve | @ | ObservableQuery.js:317
| listeners.add.oqListener | @ | QueryInfo.js:103
| (anonymous) | @ | QueryInfo.js:115
| ../node_modules/@apollo/client/core/QueryInfo.js.QueryInfo.notify | @ | QueryInfo.js:115
| (anonymous) | @ | QueryManager.js:447
| ../node_modules/@apollo/client/core/QueryManager.js.QueryManager.broadcastQueries | @ | QueryManager.js:447
| ../node_modules/@apollo/client/core/QueryManager.js.QueryManager.stopQuery | @ | QueryManager.js:433
| (anonymous) | @ | QueryManager.js:332
| Promise.finally (async) | |
| ../node_modules/@apollo/client/core/QueryManager.js.QueryManager.query | @ | QueryManager.js:332
| ../node_modules/@apollo/client/core/ApolloClient.js.ApolloClient.query | @ | ApolloClient.js:133
| (anonymous) | @ | loadCustomFonts.ts:113
| (anonymous) | @ | loadCustomFonts.codegen.tsx:64
| __async | @ | loadCustomFonts.codegen.tsx:64
| loadCustomFonts | @ | loadCustomFonts.ts:112
| transitionAppStateToLoggedIn | @ | sessionStore.ts:289
| AuthSuccess | @ | AuthSuccess.tsx:34
| renderWithHooks | @ | react-dom.development.js:14985
| updateFunctionComponent | @ | react-dom.development.js:17356
| beginWork | @ | react-dom.development.js:19063
| beginWork$1 | @ | react-dom.development.js:23940
| performUnitOfWork | @ | react-dom.development.js:22776
| workLoopSync | @ | react-dom.development.js:22707
| renderRootSync | @ | react-dom.development.js:22670
| performSyncWorkOnRoot | @ | react-dom.development.js:22293
| (anonymous) | @ | react-dom.development.js:11327
| unstable_runWithPriority | @ | scheduler.development.js:646
| runWithPriority$1 | @ | react-dom.development.js:11276
| flushSyncCallbackQueueImpl | @ | react-dom.development.js:11322
| flushSyncCallbackQueue | @ | react-dom.development.js:11309
| scheduleUpdateOnFiber | @ | react-dom.development.js:21893
| dispatchAction | @ | react-dom.development.js:16139
| Promise.then (async) | |
| onNewData | @ | useBaseQuery.js:18
| next | @ | QueryData.js:230
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| next | @ | ObservableQuery.js:21
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| next | @ | Concast.js:24
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | asyncMap.js:13
| Promise.then (async) | |
| (anonymous) | @ | asyncMap.js:11
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | iteration.js:4
| iterateObserversSafely | @ | iteration.js:4
| next | @ | Concast.js:24
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| next | @ | bundle.esm.js:29
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | batching.js:84
| (anonymous) | @ | batching.js:84
| next | @ | batching.js:82
| notifySubscription | @ | Observable.js:135
| onNotify | @ | Observable.js:179
| next | @ | Observable.js:235
| (anonymous) | @ | batchHttpLink.js:75
| Promise.then (async) | |
| (anonymous) | @ | batchHttpLink.js:74
| Subscription | @ | Observable.js:197
| subscribe | @ | Observable.js:279
| ../node_modules/@apollo/client/link/batch/batching.js.OperationBatcher.consumeQueue | @ | batching.js:72
| (anonymous) | @ | batching.js:105
How to reproduce the issue: I actually don’t know. This error is thrown on startup of our closed source app, so I cannot share the code. The app actually has 2 graphQL endpoints and we switch between them depending on the route where the user is and I think this error get’s thrown when one apollo provider is unmounted, but I cannot be sure.
Versions
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Binaries:
Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
Browsers:
Chrome: 87.0.4280.141
Firefox: 84.0.2
npmPackages:
@apollo/client: ^3.3.7 => 3.3.7
@apollo/link-batch-http: ^2.0.0-beta.3 => 2.0.0-beta.3
@apollo/link-context: ^2.0.0-beta.3 => 2.0.0-beta.3
@apollo/link-error: ^2.0.0-beta.3 => 2.0.0-beta.3
@apollo/link-schema: ^2.0.0-beta.3 => 2.0.0-beta.3
@apollo/react-components: ^3.1.5 => 3.1.5
@apollo/react-testing: ^3.1.4 => 3.1.4
apollo-client: ^2.6.10 => 2.6.10
apollo-server: ^2.19.2 => 2.19.2
apollo-server-express: ^2.19.2 => 2.19.2
react-apollo-network-status: ^5.0.1 => 5.0.1
Issue Analytics
- State:
- Created 3 years ago
- Reactions:24
- Comments:68 (14 by maintainers)
Top Results From Across the Web
Apollo subscriptions - Nextjs - Error: Observable cancelled ...
... any problem but when I use an implementation of useSubscription I get the following error: "Error: Observable cancelled prematurely at ...
Read more >ObservableQuery - Apollo GraphQL Docs
The single Error object that is passed to onError and useQuery hooks, and is often thrown during manual client.query calls. This will contain...
Read more >Is it safe to ignore indirectly thrown exceptions during task ...
I have two simultaneously running tasks of which one can fail with an exception which will then indirectly triggering the cancellation of the ......
Read more >Observables compared to other techniques
Observables compared to promiseslink · Observables are declarative; computation does not start until subscription. Promises execute immediately on creation.
Read more >Running side effects with reactions
It only responds to changes in observable state, things you have annotated ... To cancel when prematurely, it is possible to call .cancel()...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For us, it happens when you unmount and remount the sasme component really fast.
Experiencing the same thing in an Angular project, when navigating away from a page where a query is happening.