I am trying to send rrweb event on pageleave. There are two options to send the data to server either using sendBeacon or fetch api calls. But sendBeacon doesn't work for more than 5sec on rrweb events and fetch is getting cancelled on pageleave, my current implementation goes like this

var params = new URLSearchParams({
  key : 'data',
  values : JSON.stringify(sessionPayload)
});
navigator.sendBeacon(`${this.apiHost}/session`, params);

How can i solve the problem of sending the data to server effectively.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'hidden') {
    sendRecording(); //sends the recording to server
    sessionRecordingEvents = [] //empties the event array
  } else {
    startRecording(); //starts recording again
  }
});