ref(browser): Update supportsHistory check & history usage (#14696)

We had some elaborate check in there for `window.history` which is based
on very old (~2016) issues, which should not be an issue anymore in
versions we support today. So we can streamline this quite a bit!

Additionally, I also rewrote code that used `window.onpushstate` to
instead of `window.addEventListener('pushstate')`, plus also added code
to ensure we do not emit history changes multiple times, which may be
possible (?).

Author: mydea

packages/browser-utils/src/instrument/history.ts

@@ -1,5 +1,5 @@
-import { addHandler, fill, maybeInstrument, supportsHistory, triggerHandlers } from '@sentry/core';
 import type { HandlerDataHistory } from '@sentry/core';
+import { addHandler, fill, maybeInstrument, supportsHistory, triggerHandlers } from '@sentry/core';
 import { WINDOW } from '../types';
 
 let lastHref: string | undefined;
@@ -19,29 +19,26 @@ export function addHistoryInstrumentationHandler(handler: (data: HandlerDataHist
 }
 
 function instrumentHistory(): void {
-  if (!supportsHistory()) {
-    return;
-  }
-
-  const oldOnPopState = WINDOW.onpopstate;
-  WINDOW.onpopstate = function (this: WindowEventHandlers, ...args: unknown[]) {
+  // The `popstate` event may also be triggered on `pushState`, but it may not always reliably be emitted by the browser
+  // Which is why we also monkey-patch methods below, in addition to this
+  WINDOW.addEventListener('popstate', () => {
     const to = WINDOW.location.href;
     // keep track of the current URL state, as we always receive only the updated state
     const from = lastHref;
     lastHref = to;
-    const handlerData: HandlerDataHistory = { from, to };
-    triggerHandlers('history', handlerData);
-    if (oldOnPopState) {
-      // Apparently this can throw in Firefox when incorrectly implemented plugin is installed.
-      // https://github.com/getsentry/sentry-javascript/issues/3344
-      // https://github.com/bugsnag/bugsnag-js/issues/469
-      try {
-        return oldOnPopState.apply(this, args);
-      } catch (_oO) {
-        // no-empty
-      }
+
+    if (from === to) {
+      return;
     }
-  };
+
+    const handlerData = { from, to } satisfies HandlerDataHistory;
+    triggerHandlers('history', handlerData);
+  });
+
+  // Just guard against this not being available, in weird environments
+  if (!supportsHistory()) {
+    return;
+  }
 
   function historyReplacementFunction(originalHistoryFunction: () => void): () => void {
     return function (this: History, ...args: unknown[]): void {
@@ -52,7 +49,12 @@ function instrumentHistory(): void {
         const to = String(url);
         // keep track of the current URL state, as we always receive only the updated state
         lastHref = to;
-        const handlerData: HandlerDataHistory = { from, to };
+
+        if (from === to) {
+          return;
+        }
+
+        const handlerData = { from, to } satisfies HandlerDataHistory;
         triggerHandlers('history', handlerData);
       }
       return originalHistoryFunction.apply(this, args);

packages/core/src/utils-hoist/index.ts

@@ -108,6 +108,7 @@ export {
   supportsDOMException,
   supportsErrorEvent,
   supportsFetch,
+  supportsHistory,
   supportsNativeFetch,
   supportsReferrerPolicy,
   supportsReportingObserver,
@@ -178,4 +179,3 @@ export { vercelWaitUntil } from './vercelWaitUntil';
 export { SDK_VERSION } from './version';
 export { getDebugImagesForResources, getFilenameToDebugIdMap } from './debug-ids';
 export { escapeStringForRegex } from './vendor/escapeStringForRegex';
-export { supportsHistory } from './vendor/supportsHistory';

packages/core/src/utils-hoist/supports.ts

@@ -6,8 +6,6 @@ const WINDOW = GLOBAL_OBJ as unknown as Window;
 
 declare const EdgeRuntime: string | undefined;
 
-export { supportsHistory } from './vendor/supportsHistory';
-
 /**
  * Tells whether current environment supports ErrorEvent objects
  * {@link supportsErrorEvent}.
@@ -56,6 +54,16 @@ export function supportsDOMException(): boolean {
   }
 }
 
+/**
+ * Tells whether current environment supports History API
+ * {@link supportsHistory}.
+ *
+ * @returns Answer to the given question.
+ */
+export function supportsHistory(): boolean {
+  return 'history' in WINDOW;
+}
+
 /**
  * Tells whether current environment supports Fetch API
  * {@link supportsFetch}.