Axios call in beforeunload function only works when refreshing (ReactJS)

Question

I need to let the server know when the user closes or reloads the page. I'm listening to the "beforeunload" event and when the function is called I'm sending an axios call to the server. It works when refreshing the page but not when closing it and I don't know how to fix it.

Here is my code

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

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

  endSession = (e) => {
    axios
      .post(Globals.backendServer + "/session/end", {
        sessionData: this.state.sessionData,
      })
      .then((res) => {})
      .catch((err) => {
        alert(err);
      });
  };

Andrew Dibble · Accepted Answer · 2020-04-26 10:14:22Z

1

There is no guarantee that asynchronous actions executed in the beforeunload event will complete, and axios uses an asynchronous way of making requests.

You can probably use good old XHR to make a synchronous request. If you go to the section labeled Adapting Sync XHR use cases to the Beacon API, they will go over strategies of keeping requests alive during unload because synchronous XHR is deprecated.

Note that synchronous HTTP requests are generally a bad idea because they will render the page unresponsive while they are completing. I'm not sure what the behavior would be for a synchronous request during unload.

edited Apr 26, 2020 at 10:14

answered Apr 26, 2020 at 10:09

Andrew Dibble

9118 silver badges17 bronze badges

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

Comments

alishi973 · Accepted Answer · 2020-04-26 10:24:31Z

0

Unfortunately unload and beforunload life-cycles is not reliable for Ajax request, I prefer Handle this with token and refresh token from the server-side Even when you detect closed page,how could you define what tab or page closed when user can open multiple tab

answered Apr 26, 2020 at 10:24

alishi973

653 silver badges12 bronze badges

Collectives™ on Stack Overflow

Axios call in beforeunload function only works when refreshing (ReactJS)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related