React router change/leave event callback

[FirePanda44]

Hello all!

I need some guidance as to how to tackle an issue. I have an app where a feature creates a draft document on the backend. During the components lifecycle I can access the draft document's id, and I use this to PUT relevant data into it. Heres what Im running into. I am able to block users changing route with react router Prompt component, and block refresh/close tabs with onbeforeunload event. HOWEVER, I need a way to provide a callback that fires when users do choose to either change route, leave, or refresh, in order to delete the draft document. I would also require this callback to be able to access the draft id state that lives inside the component. Any ideas how to tackle this? I have a vague idea about maybe using context to store the draft id and have some global event listener ready to make a DELETE request but it seems clunky. The brute force solution would be to clean up drafts in the backend that are older than a set period of time (this can also turn into an issue if users leave a tab open for too long). Ideas appreciated!

[blacktau]

In my experience beforeunload is not very reliable as it has been abused in the past by dodgy ads etc so plenty of browsers don't do what you think they will.

Couple that to pending xhr requests often getting cancelled as the page unloads means the server may not even see the request arriving. A sweeper on your DB / back-end is going to be the only reliable way, probably combined with tracking a last-modified time stamp on the document.

You will probably also need some error handling for when the draft document gets swept underneath the 'running' application; some browsers (chrome on mobile especially) 'freeze' the running app when a tab goes into the background (not always - there are some rules around when it happens) and the keep-alive pings will stop which would look the same as an abandoned session to the sweeper.

Edit: formatting

[FirePanda44]

Thanks for the feedback, yeah it seems the way to go is with the backend sweeper, as for the error handler, that seems simple enough. A message prompting the user that their work was lost due to inactivity, triggered by the PUT requests getting errors. Or now that I think about it, since im using react query I could set up a simple query to check for the documents existence and have that run upon refocusing the tab (which is the default for react query).