Use history listen instead of monkeypatch

Author: jboolean

frontend/src/datadog.ts

@@ -4,6 +4,41 @@
 
 import { datadogRum } from '@datadog/browser-rum';
 
+// --- Datadog RUM + React Router v5 wiring (no monkeypatching) ---
+import type { Location } from 'history';
+
+function pathFromLocation(
+  loc: Location | { pathname: string; search?: string; hash?: string }
+): string {
+  const search = loc.search ?? '';
+  const hash = loc.hash ?? '';
+  return `${loc.pathname}${search}${hash}`;
+}
+
+/**
+ * Call this once, right after you create your app's history and before rendering the <Router>.
+ * Example:
+ *   // history.ts
+ *   export const history = createBrowserHistory();
+ *
+ *   // index.tsx
+ *   import { history } from './history';
+ *   import { attachRumToHistory } from './datadog';
+ *   attachRumToHistory(history);
+ */
+export function attachRumToHistory(history: {
+  location: Location;
+  listen: (cb: (loc: Location) => void) => void;
+}): void {
+  // Start initial view
+  datadogRum.startView({ name: pathFromLocation(history.location) });
+  // Track subsequent route changes
+  history.listen((location) => {
+    datadogRum.startView({ name: pathFromLocation(location) });
+  });
+}
+// --- End Datadog RUM + React Router v5 wiring ---
+
 datadogRum.init({
   applicationId: 'dfabd184-b8ed-47db-90bc-2a4c26828b72',
   clientToken: 'pub2b91b53e324deaa20ce2c3738fc4f9aa',
@@ -15,38 +50,3 @@ datadogRum.init({
   defaultPrivacyLevel: 'mask-user-input',
   // plugins: [reactPlugin({ router: false })], // Keep disabled until upgrading React Router due to deps conflict
 });
-
-// --- Datadog RUM manual SPA view tracking for React Router v5 ---
-function currentPath(): string {
-  return (
-    window.location.pathname + window.location.search + window.location.hash
-  );
-}
-
-// Start the initial view
-datadogRum.startView({ name: currentPath() });
-
-// Patch pushState and replaceState to detect programmatic navigations
-(function patchHistoryForRum() {
-  const originalPushState = history.pushState;
-  const originalReplaceState = history.replaceState;
-
-  history.pushState = function (...args) {
-    const ret = originalPushState.apply(this, args as any);
-    // Defer to allow location to update
-    queueMicrotask(() => datadogRum.startView({ name: currentPath() }));
-    return ret;
-  } as typeof history.pushState;
-
-  history.replaceState = function (...args) {
-    const ret = originalReplaceState.apply(this, args as any);
-    queueMicrotask(() => datadogRum.startView({ name: currentPath() }));
-    return ret;
-  } as typeof history.replaceState;
-
-  // Back/forward buttons
-  window.addEventListener('popstate', () => {
-    datadogRum.startView({ name: currentPath() });
-  });
-})();
-// --- End Datadog RUM manual SPA view tracking ---

frontend/src/shared/utils/history.ts

@@ -1,5 +1,8 @@
 import { createBrowserHistory } from 'history';
+import { attachRumToHistory } from '../../datadog';
 
 const history = createBrowserHistory();
 
+attachRumToHistory(history);
+
 export default history;