I’m having a page that getting refreshed every few seconds using router refresh
<code> const router = useRouter()
...
useEffect(() => {
interval = setInterval(() => {
router.refresh()
}, SCAN_PAGE_REFRESH_RATE_MIL)
return () => {
clearInterval(interval)
}
}, []);
</code>
<code> const router = useRouter()
...
useEffect(() => {
interval = setInterval(() => {
router.refresh()
}, SCAN_PAGE_REFRESH_RATE_MIL)
return () => {
clearInterval(interval)
}
}, []);
</code>
const router = useRouter()
...
useEffect(() => {
interval = setInterval(() => {
router.refresh()
}, SCAN_PAGE_REFRESH_RATE_MIL)
return () => {
clearInterval(interval)
}
}, []);
The problem is, when the machine is entering to hydration (sleep mode or closing the screen and wait a few minutes) The app crashes with net::ERR_NETWORK_IO_SUSPENDED, causing the whole application to crash.
I’m using Mac Ventura 13 and Chrome Version 127.0.6533.72 (arm64)
I tried few things to solve it:
- Add user idle detection to clear the interval – that doesn’t solve the case when you close the lid (screen) of the machine.
- catch the router refresh using try catch clauses
- read the nextjs docs and the router.refresh (” Refresh the current page. refresh(): void;”) to try to figure out if there is any option/callback I can use to catch it.
- Searched MDN and googled if there is anyway to detect the ERR_NETWORK_IO_SUSPENDED ( and then prevent the router.refresh trigger)
- searched next issues for issues related to ‘router.refresh error handling’ or ERR_NETWORK_IO_SUSPENDED
- looked stackoverflow for related questions. Find this old one
** I want to use the router refresh because of the caching ability and the fact that it preserves the component’s state
Any ideas of how to address this?