How to call an API on before unload event in react

Question

How to call an API on before unload event in react, I have tried fetch with Keepalive true & sendbecon(doesn't support authorization headers in headers)

Also, I want to show dialog box with custom message on unload. the behavior is in consistent.

  // Handle browser tab close or refresh
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      e.preventDefault();
      e.returnValue = '';
     // unlock user API call
      unlock();
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);

"Also, I want to show dialog box with custom message on unload." - developer.mozilla.org/en-US/docs/Web/API/Window/…: "You should note that modern implementations: [...] Only show a generic browser-specified string in the displayed dialog. This cannot be controlled by the webpage code." — C3roe
– C3roe, Commented Jul 23 at 6:37

blackgreen · Accepted Answer · 2025-07-24 05:27:17Z

1

You can’t use async/await or Promises in beforeunload handlers.

Option 1: Use sendBeacon + server-side token recognition
If possible, send a token or userId as part of the payload (not header), e.g.:

navigator.sendBeacon('/api/unlock', JSON.stringify({ userId, token }));

Option 2: Use fetch with keepalive: true (limited support):

fetch('/api/unlock', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer yourTokenHere'
  },
  body: JSON.stringify({ userId }),
  keepalive: true
});enter image description here

edited Jul 24 at 5:27

blackgreen♦

46.8k29 gold badges171 silver badges162 bronze badges

answered Jul 22 at 16:50

Ruben Duarte

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user9150771 Jul 22 at 16:53

Our current logic is with Keepalive is true, 80% of the time it works, but still not happening all the time. And we can't update the Api payload (not belongs to our team)

Collectives™ on Stack Overflow

How to call an API on before unload event in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related