From c1ef28e2f6f1a83292e663d160545c24c1b85172 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 5 Nov 2025 15:08:52 +0000
Subject: [PATCH] Fix: Cronitor RUM history patching error

---
 src/App.tsx | 54 ++++++++++++++++++++++++++---------------------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8d7e817d..c18a80c4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -131,6 +131,17 @@ function NavigationTracker() {
 }
 
 function AppContent(): React.JSX.Element {
+  // Initialize Cronitor RUM inside BrowserRouter (where history is available)
+  useEffect(() => {
+    Cronitor.load("0b5d17d3f7625ce8766c2c4c85c1895d", {
+      debug: import.meta.env.DEV, // Enable debug logs in development only
+      trackMode: 'history', // Automatically track page views with React Router
+    });
+    
+    // Log successful initialization
+    console.log('[Cronitor] RUM initialized');
+  }, []);
+
   return (
     <TooltipProvider>
       <NavigationTracker />
@@ -388,33 +399,20 @@ function AppContent(): React.JSX.Element {
   );
 }
 
-const App = (): React.JSX.Element => {
-  // Initialize Cronitor RUM on app mount
-  useEffect(() => {
-    Cronitor.load("0b5d17d3f7625ce8766c2c4c85c1895d", {
-      debug: import.meta.env.DEV, // Enable debug logs in development only
-      trackMode: 'history', // Automatically track page views with React Router
-    });
-    
-    // Log successful initialization
-    console.log('[Cronitor] RUM initialized');
-  }, []);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <AuthModalProvider>
-          <MFAStepUpProvider>
-            <BrowserRouter>
-              <AppContent />
-            </BrowserRouter>
-          </MFAStepUpProvider>
-        </AuthModalProvider>
-      </AuthProvider>
-      {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} position="bottom" />}
-      <AnalyticsWrapper />
-    </QueryClientProvider>
-  );
-};
+const App = (): React.JSX.Element => (
+  <QueryClientProvider client={queryClient}>
+    <AuthProvider>
+      <AuthModalProvider>
+        <MFAStepUpProvider>
+          <BrowserRouter>
+            <AppContent />
+          </BrowserRouter>
+        </MFAStepUpProvider>
+      </AuthModalProvider>
+    </AuthProvider>
+    {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} position="bottom" />}
+    <AnalyticsWrapper />
+  </QueryClientProvider>
+);
 
 export default App;