add new option to disable 'nextHopProtocol' (set to '') detection which can break replay

some sites use performance events, eg: window.performance.getEntriesByType("navigation")[0].nextHopProtocol
to perform different network requests. This fixes the value to '' instead of changing based on HTTP protocol.
fixes #324

Author: ikreymer

src/recorder.ts

@@ -33,6 +33,12 @@ const IFRAME_INJECT_URL = "__awp_iframe_inject__";
 
 const BEHAVIOR_LOG_FUNC = "__bx_log";
 
+const DISABLE_PERF_NHP = `;
+if (self.PerformanceResourceTiming) {
+  Object.defineProperty(self.PerformanceResourceTiming.prototype, "nextHopProtocol", {value: ""});
+}
+`;
+
 // ===========================================================================
 // @ts-expect-error - TS7006 - Parameter 'time' implicitly has an 'any' type.
 function sleep(time) {
@@ -62,6 +68,7 @@ class Recorder {
   archiveScreenshots = false;
   archivePDF = false;
   disableMSE = false;
+  disablePerf = false;
 
   _fetchQueue: FetchEntry[] = [];
 
@@ -166,6 +173,7 @@ class Recorder {
       (await getLocalOption("archiveScreenshots")) === "1";
     this.archivePDF = (await getLocalOption("archivePDF")) === "1";
     this.disableMSE = (await getLocalOption("disableMSE")) === "1";
+    this.disablePerf = (await getLocalOption("disablePerf")) === "1";
   }
 
   // @ts-expect-error - TS7006 - Parameter 'autorun' implicitly has an 'any' type.
@@ -201,7 +209,8 @@ class Recorder {
 
     window.addEventListener("beforeunload", () => {});\n` +
       (this.archiveFlash ? this.getFlashInjectScript() : "") +
-      (this.disableMSE ? DISABLE_MEDIASOURCE_SCRIPT : "")
+      (this.disableMSE ? DISABLE_MEDIASOURCE_SCRIPT : "") +
+      (this.disablePerf ? DISABLE_PERF_NHP : "")
     );
   }
 

src/ui/app.ts

@@ -62,6 +62,7 @@ class ArchiveWebApp extends ReplayWebApp {
   archiveScreenshots: boolean | null = null;
   archivePDF: boolean | null = null;
   disableMSE: boolean | null = null;
+  disablePerf: boolean | null = null;
 
   showIpfsShareFailed = false;
 
@@ -132,6 +133,8 @@ class ArchiveWebApp extends ReplayWebApp {
 
     this.disableMSE = (await getLocalOption("disableMSE")) === "1";
 
+    this.disablePerf = (await getLocalOption("disablePerf")) === "1";
+
     const archiveScreenshots = await getLocalOption("archiveScreenshots");
 
     // default to true if unset to enable screenshots!
@@ -1101,6 +1104,21 @@ class ArchiveWebApp extends ReplayWebApp {
                     websites, but may result in better video/audio capture.
                   </p>
                 </div>
+                <div class="field is-size-6 mt-4">
+                  <input
+                    name="prefDisablePerf"
+                    id="disablePerf"
+                    class="checkbox"
+                    type="checkbox"
+                    ?checked="${this.disablePerf}"
+                    @change=${this.onUpdatePrefsOption}
+                  /><span class="ml-1">Disable Performance Detection</span>
+                  <p class="is-size-7 mt-1">
+                    If set, will disable performance detection features (such as
+                    current HTTP version), which can fix some replay issues,
+                    result in more accurate replay.
+                  </p>
+                </div>
                 <hr />
                 <div class="is-size-6">Privacy related settings:</div>
                 <div class="field is-size-6 mt-4">