Stucked in "Paused" mode after getting into Offline state

[wilq32-hub]

Describe the bug

Bug is bit weird:

We do use TanStack in React in most recent version in our application and it works fine, but today I have second bug request from user saying no fetch/XHR request being made at all. I did longer session with him to realise that all normal queries instead of normal state are immediately end up in "Paused" state. As this user is currently in Ukraine i did some assumption that it might be related to Offline case and power shortages which leads me to this page:

https://stackoverflow.com/questions/73444102/react-query-cancel-abort-mutation-if-paused-offline

Which is not exactly what I look for but found out that setting

networkMode: 'always',

does fix the problem for the user.

My assumption is that the "Offline" state is somewhat stored by TanStack and not being reset i.e. next time a page reloads properly (sic). I asked him to manually disconnect from internet and connect to it again when having our web page opened and it helped for his case. This would lead me to think that this "Offline" state is somewhat preserved between next usages of page and does not reset properly. I will try to look at the TanStack code where exactly this problem is, but I think for now it would be great that whenever user reload page - there should be at least check if Offline was set before and disable that state.

Your minimal, reproducible example

Unfortunately no reproduction, check description

Steps to reproduce

I could not reproduce this issue on my machine, and I had to debug it trough Slack share screen. But I do assume that it might happen when user lose connection (gets into offline case) and then tab/browser is closed (or computer crashes?).

Expected behavior

As an user I expect to have request correctly working in Online mode. When this bug shows up, until browser emit connectionStatusChange it will not send any requests.

How often does this bug happen?

Sometimes

Screenshots or Videos

No response

Platform

Platform independent
react.18.2

TanStack Query version

4.20.9, react-query,

TypeScript version

No response

Additional context

No response

[wilq32-hub]

One additional note - weird thing is that affects different environments. So if this happened to get broken on Production domain, it also stopped working for Staging environment and on my local machine environment (which at least helped me to diagnose the problem), but leads me to thinking that there is kind of mechanism to share TanQuery state between tabs/pages? (Like ServiceWorker?) If that's the case then state might get stuck somewhere inside there.

[wilq32-hub]

Checking the onlineManager.ts file I feel it's bit weird structured, yet first thing to improve I would say is that events offline and online does not have any boolean value:
https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event
https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event

so the part of the code:
window.addEventListener('online', listener, false);
window.addEventListener('offline', listener, false);

that end's up calling:

this.cleanup = setup((online?: boolean) => {
if (typeof online === 'boolean') {
this.setOnline(online)
} else {
this.onOnline()
}
})

will always call this.onOnline() ( ??? ) which I guess is not expected. Still I have no idea why it breaks in my case...

[wilq32-hub]

Additionally only first line (setOnline) method will in fact set this.online value. So if that value is somewhat preserved, then it will never be set back to true (?)

[TkDodo]

but I think for now it would be great that whenever user reload page - there should be at least check if Offline was set before and disable that state.

there is nothing that persists that state between page reloads. We merely look at navigator.onLine:

query/packages/query-core/src/onlineManager.ts

Lines 80 to 87 in b82f05e

	if (
	typeof navigator === 'undefined' ||
	typeof navigator.onLine === 'undefined'
	) {
	return true
	}
	return navigator.onLine

but leads me to thinking that there is kind of mechanism to share TanQuery state between tabs/pages? (Like ServiceWorker?)

nope, there's nothing like that.

yet first thing to improve I would say is that events offline and online does not have any boolean value

It does not, but we allow users to have their custom "online-checker", in which case they have to pass a boolean value to it. If the onOnline event is called without parameter (coming from the window.addEventListener), we keep our internal state to undefined and just keep checking navigator.onLine.

One way to set a custom event listener is described in the docs, for react-native:

import NetInfo from '@react-native-community/netinfo'
import { onlineManager } from '@tanstack/react-query'

onlineManager.setEventListener(setOnline => {
  return NetInfo.addEventListener(state => {
    setOnline(!!state.isConnected)
  })
})

[wilq32-hub]

In fact I don't use anything from onlineManager and I use only really basic stuff like useQuery only.

There might be case where navigator.onLine gets bugged somehow, that would somewhat explain why the "paused" state gets propagated across different tabs/environments. I did check the code you did describe and have same conclusion as you said, though that maybe there is something else outside of that code thou :( If there is nothing that persists state then the next suspicious code would go for navigator.onLine hmm

[wilq32-hub]

It might be somewhat closer to this, as this happened both for Chrome and Opera (Chromium based browser):
https://bugs.chromium.org/p/chromium/issues/detail?id=678075

[TkDodo]

The only other solution I'm aware of to check if you are really online / offline is to make a fetch request and catch the network error. We can't do that internally, but you can in user-land and use onlineManager.setEventListener like shown above with the "real" value.

I don't think there is anything we can do here.

[wilq32-hub]

One more note, both of those instances came out on Mac machines so the blink issue does look like it's related. Feel free to close the issue then as it seems not library related.

[wilq32-hub]

Just one note - I think It will be happening to Mac users of this Library from time to time until Blink can identify problem/fix it, so It might be worth to mention it somewhere.

[stetttho]

I just faced the same issue with MacBook and Brave browser (Safari was working). Disconnect und reconnect to wifi - and then it works again…

[wilq32-hub]

Yeah, keep in mind that it will affect your users as well if they are on Mac and using TanStack library in defaults (if you don't set networkMode to 'always' or override the navigator.onLine check with some custom one)

[kkhorshu]

I just faced the same issue on macOs in Chrome
https://stackoverflow.com/questions/75538301/reactquery-queryfn-passed-to-usequery-is-never-run-happens-only-on-chrome

[nlarusstone]

I'm seeing this even on Firefox, so I don't know if that chromium bug linked there is the root cause. I am running on a Mac as well (12.6.7). You can see that these queries are paused even though the navigator.onLine is true:

I've even set the networkMode to avoid this, but that doesn't seem to fix it either:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: "always",
    },
  },
});

Package versions:

@tanstack/query-core@4.24.6
@tanstack/react-query@4.24.6

[TkDodo]

@nlarusstone please show a codesandbox reproduction with that behaviour. Queries in networkMode: 'always' can never be in paused state ...