fix(replay): Send replay data when page is unloaded

This ties into the changes from here: #6859

Author: mydea

packages/replay/src/replay.ts

@@ -435,6 +435,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     try {
       WINDOW.document.addEventListener('visibilitychange', this._handleVisibilityChange);
       WINDOW.addEventListener('blur', this._handleWindowBlur);
+      WINDOW.addEventListener('beforeunload', this._handleWindowUnload);
       WINDOW.addEventListener('focus', this._handleWindowFocus);
 
       // We need to filter out dropped events captured by `addGlobalEventProcessor(this.handleGlobalEvent)` below
@@ -467,6 +468,7 @@ export class ReplayContainer implements ReplayContainerInterface {
 
       WINDOW.removeEventListener('blur', this._handleWindowBlur);
       WINDOW.removeEventListener('focus', this._handleWindowFocus);
+      WINDOW.removeEventListener('beforeunload', this._handleWindowUnload);
 
       restoreRecordDroppedEvent();
 
@@ -571,6 +573,19 @@ export class ReplayContainer implements ReplayContainerInterface {
     this._doChangeToBackgroundTasks(breadcrumb);
   };
 
+  /**
+   * Handle when page is unloaded (=left).
+   */
+  private _handleWindowUnload: () => void = () => {
+    const breadcrumb = createBreadcrumb({
+      category: 'ui.unload',
+    });
+
+    // Do not count blur as a user action -- it's part of the process of them
+    // leaving the page
+    this._doChangeToBackgroundTasks(breadcrumb);
+  };
+
   /**
    * Handle when page is focused
    */