Approve database migration

src/App.tsx

@@ -1,11 +1,10 @@
-import * as React from "react";
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect, useRef } from "react";
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { AuthProvider } from "@/hooks/useAuth";
 import { AuthModalProvider } from "@/contexts/AuthModalContext";
 import { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider";
@@ -15,6 +14,8 @@ import { PageLoader } from "@/components/loading/PageSkeletons";
 import { RouteErrorBoundary } from "@/components/error/RouteErrorBoundary";
 import { AdminErrorBoundary } from "@/components/error/AdminErrorBoundary";
 import { EntityErrorBoundary } from "@/components/error/EntityErrorBoundary";
+import { breadcrumb } from "@/lib/errorBreadcrumbs";
+import { handleError } from "@/lib/errorHandler";
 
 // Core routes (eager-loaded for best UX)
 import Index from "./pages/Index";
@@ -59,6 +60,8 @@ const AdminBlog = lazy(() => import("./pages/AdminBlog"));
 const AdminSettings = lazy(() => import("./pages/AdminSettings"));
 const AdminContact = lazy(() => import("./pages/admin/AdminContact"));
 const AdminEmailSettings = lazy(() => import("./pages/admin/AdminEmailSettings"));
+const ErrorMonitoring = lazy(() => import("./pages/admin/ErrorMonitoring"));
+const ErrorLookup = lazy(() => import("./pages/admin/ErrorLookup"));
 
 // User routes (lazy-loaded)
 const Profile = lazy(() => import("./pages/Profile"));
@@ -79,10 +82,38 @@ const queryClient = new QueryClient({
       staleTime: 30000, // 30 seconds - queries stay fresh for 30s
       gcTime: 5 * 60 * 1000, // 5 minutes - keep in cache for 5 mins
     },
+    mutations: {
+      onError: (error: any, variables: any, context: any) => {
+        // Track mutation errors with breadcrumbs
+        breadcrumb.apiCall(
+          context?.endpoint || 'mutation',
+          'MUTATION',
+          error?.status || 500
+        );
+        
+        // Handle error with tracking
+        handleError(error, {
+          action: 'Mutation failed',
+          metadata: {
+            variables,
+            context,
+          },
+        });
+      },
+    },
   },
 });
 
 function AppContent(): React.JSX.Element {
+  const location = useLocation();
+  const prevLocation = useRef<string>('');
+
+  useEffect(() => {
+    const from = prevLocation.current || undefined;
+    breadcrumb.navigation(location.pathname, from);
+    prevLocation.current = location.pathname;
+  }, [location.pathname]);
+
   return (
     <TooltipProvider>
       <BrowserRouter>
@@ -304,6 +335,22 @@ function AppContent(): React.JSX.Element {
                       </AdminErrorBoundary>
                     } 
                   />
+                  <Route 
+                    path="/admin/error-monitoring" 
+                    element={
+                      <AdminErrorBoundary section="Error Monitoring">
+                        <ErrorMonitoring />
+                      </AdminErrorBoundary>
+                    } 
+                  />
+                  <Route 
+                    path="/admin/error-lookup" 
+                    element={
+                      <AdminErrorBoundary section="Error Lookup">
+                        <ErrorLookup />
+                      </AdminErrorBoundary>
+                    } 
+                  />
                   
                   {/* Utility routes - lazy loaded */}
                   <Route path="/force-logout" element={<ForceLogout />} />