feat: Integrate Cronitor RUM

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vite_react_shadcn_ts",
       "version": "0.0.0",
       "dependencies": {
+        "@cronitorio/cronitor-rum": "^0.4.1",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
@@ -654,6 +655,15 @@
         "solid-js": "^1.8"
       }
     },
+    "node_modules/@cronitorio/cronitor-rum": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@cronitorio/cronitor-rum/-/cronitor-rum-0.4.1.tgz",
+      "integrity": "sha512-myOOC8Cvv+881hasEV/fsnUswKXMVKfHtioZIy5SCcRPvH2jCV7T/DyZLXjm97FaeWIfTlu4s5P0dKW1zi7T3A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "web-vitals": "^3.3.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -12819,6 +12829,12 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
+    "node_modules/web-vitals": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",
+      "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@cronitorio/cronitor-rum": "^0.4.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

src/App.tsx

@@ -5,6 +5,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import * as Cronitor from '@cronitorio/cronitor-rum';
 import { AuthProvider } from "@/hooks/useAuth";
 import { AuthModalProvider } from "@/contexts/AuthModalContext";
 import { MFAStepUpProvider } from "@/contexts/MFAStepUpContext";
@@ -387,20 +388,33 @@ function AppContent(): React.JSX.Element {
   );
 }
 
-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>
-);
+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>
+  );
+};
 
 export default App;

src/lib/errorBreadcrumbs.ts

@@ -58,15 +58,42 @@ export const breadcrumb = {
       level: 'info',
       data,
     });
+    
+    // Track critical user actions in Cronitor
+    const criticalActions = ['submit', 'delete', 'update', 'create', 'login', 'logout'];
+    const isCritical = criticalActions.some(ca => action.toLowerCase().includes(ca));
+    
+    if (isCritical && typeof window !== 'undefined' && window.cronitor) {
+      window.cronitor.track('critical_user_action', {
+        action,
+        component,
+        timestamp: new Date().toISOString(),
+      });
+    }
   },
 
   apiCall: (endpoint: string, method: string, status?: number) => {
+    const isError = status && status >= 400;
+    
     breadcrumbManager.add({
       category: 'api_call',
       message: `API ${method} ${endpoint}`,
-      level: status && status >= 400 ? 'error' : 'info',
+      level: isError ? 'error' : 'info',
       data: { endpoint, method, status },
     });
+    
+    // Track significant API calls in Cronitor
+    if (typeof window !== 'undefined' && window.cronitor) {
+      // Only track errors and slow requests
+      if (isError || (status && status >= 500)) {
+        window.cronitor.track('api_error', {
+          endpoint,
+          method,
+          status,
+          severity: status >= 500 ? 'high' : 'medium',
+        });
+      }
+    }
   },
 
   stateChange: (description: string, data?: Record<string, any>) => {

src/lib/errorHandler.ts

@@ -4,6 +4,16 @@ import { supabase } from '@/integrations/supabase/client';
 import { breadcrumbManager } from './errorBreadcrumbs';
 import { captureEnvironmentContext } from './environmentContext';
 
+// Cronitor RUM integration
+declare global {
+  interface Window {
+    cronitor?: {
+      track: (eventName: string, data?: Record<string, any>) => void;
+      error: (error: Error | string, metadata?: Record<string, any>) => void;
+    };
+  }
+}
+
 export type ErrorContext = {
   action: string;
   userId?: string;
@@ -123,6 +133,25 @@ export const handleError = (
     });
   }
 
+  // Track error in Cronitor RUM
+  if (typeof window !== 'undefined' && window.cronitor) {
+    try {
+      window.cronitor.error(
+        error instanceof Error ? error : new Error(errorMessage),
+        {
+          errorId,
+          errorName,
+          action: context.action,
+          userId: context.userId,
+          supabaseError: supabaseErrorDetails,
+          breadcrumbCount: breadcrumbManager.getAll().length,
+        }
+      );
+    } catch (cronitorError) {
+      logger.error('Failed to track error in Cronitor', { cronitorError });
+    }
+  }
+
   // Log to database with breadcrumbs (non-blocking)
   try {
     const envContext = captureEnvironmentContext();
@@ -218,6 +247,21 @@ export const handleNonCriticalError = (
     severity: 'low',
   });
 
+  // Track non-critical error in Cronitor (lower severity)
+  if (typeof window !== 'undefined' && window.cronitor) {
+    try {
+      window.cronitor.track('non_critical_error', {
+        errorId,
+        errorMessage,
+        action: context.action,
+        userId: context.userId,
+        severity: 'low',
+      });
+    } catch (cronitorError) {
+      logger.error('Failed to track non-critical error in Cronitor', { cronitorError });
+    }
+  }
+
   // Log to database with breadcrumbs (non-blocking, fire-and-forget)
   try {
     const envContext = captureEnvironmentContext();

src/lib/retryHelpers.ts

@@ -243,9 +243,28 @@ export async function withRetry<T>(
           error: error instanceof Error ? error.message : String(error)
         });
         
+        // Track exhausted retries in Cronitor
+        if (typeof window !== 'undefined' && window.cronitor) {
+          window.cronitor.track('retries_exhausted', {
+            totalAttempts: config.maxAttempts,
+            error: error instanceof Error ? error.name : 'UnknownError',
+            severity: 'high',
+          });
+        }
+        
         throw error;
       }
       
+      // Track retry attempts in Cronitor
+      if (attempt > 0 && typeof window !== 'undefined' && window.cronitor) {
+        window.cronitor.track('retry_attempt', {
+          attempt: attempt + 1,
+          maxAttempts: config.maxAttempts,
+          error: error instanceof Error ? error.name : 'UnknownError',
+          willRetry: attempt < config.maxAttempts - 1,
+        });
+      }
+      
       // Calculate delay for next attempt
       const delay = calculateBackoffDelay(attempt, config);
       

src/types/cronitor.d.ts

@@ -0,0 +1,23 @@
+declare module '@cronitorio/cronitor-rum' {
+  export interface CronitorConfig {
+    debug?: boolean;
+    trackMode?: 'history' | 'off';
+  }
+
+  export function load(apiKey: string, config?: CronitorConfig): void;
+  
+  export function track(eventName: string, data?: Record<string, any>): void;
+  
+  export function error(error: Error | string, metadata?: Record<string, any>): void;
+}
+
+declare global {
+  interface Window {
+    cronitor?: {
+      track: (eventName: string, data?: Record<string, any>) => void;
+      error: (error: Error | string, metadata?: Record<string, any>) => void;
+    };
+  }
+}
+
+export {};