Merge pull request #46 from cloudflare/issue-44-test-requests-do-not-stop-when-tab-is-not-visible

Fix Issue 44 - Pause tests when the page is not visible to stop leaking timers

Author: yomnaebrahim

src/engines/BandwidthEngine/BandwidthEngine.js

@@ -63,6 +63,8 @@ class BandwidthMeasurementEngine {
     this.#uploadApi = uploadApiUrl;
     this.#throttleMs = throttleMs;
     this.#estimatedServerTime = Math.max(0, estimatedServerTime);
+
+    document.addEventListener('visibilitychange', this.#handleVisibilityChange);
   }
 
   // Public attributes
@@ -87,6 +89,14 @@ class BandwidthMeasurementEngine {
     this.#fetchOptions = v;
   }
 
+  #handleVisibilityChange = () => {
+    if (document.visibilityState === 'hidden') {
+      this.pause();
+    } else if (document.visibilityState === 'visible') {
+      this.play();
+    }
+  };
+
   finishRequestDuration = 1000; // download/upload duration (ms) to reach for stopping further measurements
   getServerTime = cfGetServerTime; // method to extract server time from response
 
@@ -371,6 +381,13 @@ class BandwidthMeasurementEngine {
     const curPromise = this.#currentFetchPromise;
     curPromise && (curPromise._cancel = true);
   }
+
+  deleteEventListener() {
+    document.removeEventListener(
+      'visibilitychange',
+      this.#handleVisibilityChange
+    );
+  }
 }
 
 export default BandwidthMeasurementEngine;

src/index.js

@@ -330,6 +330,7 @@ class MeasurementEngine {
           msmResults.finished = true;
           this.onResultsChange({ type });
           this.#running && this.#next();
+          engine.deleteEventListener();
         };
 
         engine.onConnectionError = e => {
@@ -443,6 +444,7 @@ class MeasurementEngine {
             }
 
             this.#running && this.#next();
+            engine.deleteEventListener();
           };
 
           engine.onConnectionError = e => {