react-router
react-router copied to clipboard
Page crashing on fetcher request cancelling (navigation/page reload cancel)
What's the issue ?
When the user cancel a fetcher request there is chance the website crashes. The user can cancel a fetcher request when he navigates, reload the page...
Reproduction
I made a stackblitz to reproduce the issue: https://stackblitz.com/edit/github-58exc72b?file=app%2Froutes%2Fhome.tsx
Basically, I added a useEffect that trigger a fetcher.load every 100ms, if you try to cancel the reload of the page you will see that the page crashes.
1/ Go to https://stackblitz.com/edit/github-58exc72b?file=app%2Froutes%2Fhome.tsx 2/ Open the preview in a new tab (to test it in Chrome for example):
3/ Then you will have to try to cancel the page reload, like this:
https://github.com/user-attachments/assets/1fcdb7cc-f584-4aa6-baf3-8cafe936fa36
Observations
I noticed that using the native fetch instead of useFetcher resolve the issue
System Info
React router ^7.8.1
Expected Behavior
The page shouldn't crash if the user cancel the page reload.
Actual Behavior
When the user cancel the page reload then it crashes and fallback to the ErrorBoundary component:
It seems like the issue only happens with useFetcher and not with fetch, which makes me think it might be related to Strict Mode’s double execution. I’d recommend checking if the issue still reproduces outside of Strict Mode.
Could you explain a bit more about your use case here? This seems a bit contrived so I don't think it's something that's going to be very high priority to dig into since it feels a bit like a rabbit hole into browser fetch behaviors.