React window unload event doesn't fire

Question

I need to use navigator.sendBeacon() on window unload in order to let my server know the client has closed his window. I have searched everywhere and it just doesn't work for me.

For reference, the solution in this post didn't work either.

I have an App component that wraps my entire project. I am trying to set the unload event on it's componentDidMount() lifecycle method, and it just won't fire.

componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
}

componentWillUnmount() {
  window.addEventListener("beforeunload", this.unload);
}

unload(e) {
  e.preventDefault();
  e.returnValue = 'test';
  navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
  return 'test';
}

I expect the server to get the AJAX call, and the window to prompt the user 'test' before the window is closed. What actually happens is the window just closes as usual.

NOTE: the return 'test' & e.returnValue = '' statements are purely for testing. I'm only interested in the AJAX request.

Any help would be much appreciated.

Can you please provide with a codesandbox ? – Jibin Joseph Mar 28 '19 at 17:39 — Jibin Joseph, Mar 28 '19 at 17:39
Try changing `unload(e) {` to `unload = (e) => {` – Gabriele Petrioli Mar 28 '19 at 18:09 — Gabriele Petrioli, Mar 28 '19 at 18:09
Sadly, that didnt work :/ @GabrielePetrioli – Sagi Rika Mar 28 '19 at 18:18 — Sagi Rika, Mar 28 '19 at 18:18

score 5 · Answer 1 · answered Nov 10 '20 at 03:52

5

If you're using a functional component, you can try this:

 useEffect(() => {
    window.addEventListener("beforeunload", handleUnload);
    return () => {
      window.removeEventListener("beforeunload", handleUnload);
    };
  }, []);

  const handleUnload = (e) => {
    const message = "o/";
    (e || window.event).returnValue = message; //Gecko + IE
    return message;
  };

answered Nov 10 '20 at 03:52

Prottay

385
5
9

Hey, I have similar issue currently, do you mind checking it out? https://stackoverflow.com/questions/67498997/beforeunload-event-is-not-fired-on-component-unmount?noredirect=1#comment119306144_67498997 – AdamSulc May 12 '21 at 09:25
This is working for close tab button. But not working on window back action. – Savan S Feb 13 '23 at 07:29

score 3 · Answer 2 · answered Feb 02 '20 at 23:32

You may be able to use navigator.sendBeacon.

const UnloadBeacon = ({
  url,
  payload = () => {},
  children
}) => {
  const eventHandler = () => navigator.sendBeacon(url, payload())

  useEffect(() => {
    window.addEventListener('unload', eventHandler, true)
    return () => {
      window.removeEventListener('unload', eventHandler, true)
    }
  }, [])

  return children
}

full example here: https://gist.github.com/tmarshall/b5433a2c2acd5dbfc592bbc4dd4c519c

score 1 · Accepted Answer · answered Mar 28 '19 at 19:02

You should bind this to the unload method or transform it to arrow function.

Binging way

constructor() {
    super();
    this.state = {
      //stuff
    };
    this.unload.bind(this);
  }

  componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
}

componentWillUnmount() {
  window.removeEventListener("beforeunload", this.unload);
}

unload(e) {
  navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
}

Arrow functions way:

  constructor() {
    super();
    this.state = {
      //stuff
    };
  }

  componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
  }

  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.unload);
  }

  unload = (e) => {
    navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
  }

Remember to remove the eventlistener on componentWillUnmount (you are currently adding it again).

Thanks, used the arrow functions way and it suddenly started working like a charm. — Sagi Rika, Mar 31 '19 at 07:55
what if we have a prompt. like "Changes that you made may not be saved." even the user click on cancel button the "beforeunload" on window function called! — Sachin Kumar, Dec 28 '21 at 14:53

mani9418 · Answer 4 · 2019-03-28T18:41:22.347

0

Have you tried declaring upload function as a fat arrow function? Also declare it before componentDidMount. (for better readability) before passing it as a reference.

Also have you tried attaching listener in contructor ? And make surw to bind your function in constructor. For reference

Also destroy the listener at componentWillUnmount, instead of adding it. (useless) use reference to listener, to destroy. Which you will create in constructor.

Best of luck

edited Mar 28 '19 at 18:41

answered Mar 28 '19 at 18:06

mani9418

141
1
1
9

Im not sure how do you mean i should declare it in the constructor. Could you please show me an example of some sort? – Sagi Rika Mar 28 '19 at 18:19
Constructor (){ this.unload = this.unload.bind(this) And declare unload with arrow function – mani9418 Mar 28 '19 at 18:39
Also add event listeners are not recommend in react but for now you can go by the above approach to get things right (y) – mani9418 Mar 28 '19 at 18:40

score -1 · Answer 5 · answered Mar 28 '19 at 17:40

I am unsure why beforeunload is not working, but as a workaround, you may consider using the hashchange event.

componentDidMount() {
    window.addEventListener("hashchange", this.doSomething, false);
}

componentWillUnmount() {
    window.removeEventListener("hashchange", this.doSomething, false);
}

React window unload event doesn't fire

5 Answers5