feat: Implement comprehensive error logging

src/components/auth/AuthModal.tsx

@@ -8,7 +8,7 @@ import { Separator } from '@/components/ui/separator';
 import { Zap, Mail, Lock, User, Eye, EyeOff } from 'lucide-react';
 import { supabase } from '@/lib/supabaseClient';
 import { useToast } from '@/hooks/use-toast';
-import { handleError } from '@/lib/errorHandler';
+import { handleError, handleNonCriticalError } from '@/lib/errorHandler';
 import { TurnstileCaptcha } from './TurnstileCaptcha';
 import { notificationService } from '@/lib/notificationService';
 import { useCaptchaBypass } from '@/hooks/useCaptchaBypass';
@@ -16,8 +16,6 @@ import { MFAChallenge } from './MFAChallenge';
 import { verifyMfaUpgrade } from '@/lib/authService';
 import { setAuthMethod } from '@/lib/sessionFlags';
 import { validateEmailNotDisposable } from '@/lib/emailValidation';
-import { getErrorMessage } from '@/lib/errorHandler';
-import { logger } from '@/lib/logger';
 import type { SignInOptions } from '@/types/supabase-auth';
 
 interface AuthModalProps {
@@ -276,15 +274,23 @@ export function AuthModal({ open, onOpenChange, defaultTab = 'signin' }: AuthMod
       if (error) throw error;
 
       if (data.user) {
+        const userId = data.user.id;
         notificationService.createSubscriber({
-          subscriberId: data.user.id,
+          subscriberId: userId,
           email: formData.email,
           firstName: formData.username,
           data: {
             username: formData.username,
           }
         }).catch(err => {
-          logger.error('Failed to register Novu subscriber', { error: getErrorMessage(err) });
+          handleNonCriticalError(err, {
+            action: 'Register Novu subscriber',
+            userId,
+            metadata: { 
+              email: formData.email,
+              context: 'post_signup'
+            }
+          });
         });
       }
       

src/components/error/AdminErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, ArrowLeft, RefreshCw, Shield } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface AdminErrorBoundaryProps {
   children: ReactNode;
@@ -50,16 +50,14 @@ export class AdminErrorBoundary extends Component<AdminErrorBoundaryProps, Admin
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: `Admin panel error in ${this.props.section || 'unknown section'}`,
-    logger.error('Admin panel error caught by boundary', {
+      metadata: {
-      section: this.props.section || 'unknown',
+        section: this.props.section,
-      error: error.message,
+        componentStack: errorInfo.componentStack,
-      stack: error.stack,
+        severity: 'high',
-      componentStack: errorInfo.componentStack,
+      },
-      severity: 'high', // Admin errors are high priority
-      errorId,
     });
 
     this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });

src/components/error/EntityErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, ArrowLeft, Home, RefreshCw } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface EntityErrorBoundaryProps {
   children: ReactNode;
@@ -38,16 +38,14 @@ export class EntityErrorBoundary extends Component<EntityErrorBoundaryProps, Ent
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: `${this.props.entityType} page error`,
-    logger.error('Entity page error caught by boundary', {
+      metadata: {
-      entityType: this.props.entityType,
+        entityType: this.props.entityType,
-      entitySlug: this.props.entitySlug,
+        entitySlug: this.props.entitySlug,
-      error: error.message,
+        componentStack: errorInfo.componentStack,
-      stack: error.stack,
+      },
-      componentStack: errorInfo.componentStack,
-      errorId,
     });
 
     this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });

src/components/error/ErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, Home, RefreshCw } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -38,16 +38,13 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: `Component error in ${this.props.context || 'unknown context'}`,
-    // Log error with context
+      metadata: {
-    logger.error('Component error caught by boundary', {
+        context: this.props.context,
-      context: this.props.context || 'unknown',
+        componentStack: errorInfo.componentStack,
-      error: error.message,
+      },
-      stack: error.stack,
-      componentStack: errorInfo.componentStack,
-      errorId,
     });
 
     this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });

src/components/error/ModerationErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface ModerationErrorBoundaryProps {
   children: ReactNode;
@@ -18,6 +18,8 @@ interface ModerationErrorBoundaryState {
   errorInfo: ErrorInfo | null;
 }
 
+type ErrorWithId = Error & { errorId: string };
+
 /**
  * Error Boundary for Moderation Queue Components
  * 
@@ -52,17 +54,18 @@ export class ModerationErrorBoundary extends Component<
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log error to monitoring system
+    // Log to database and get error ID for user reference
-    logger.error('Moderation component error caught by boundary', {
+    const errorId = handleError(error, {
-      action: 'error_boundary_catch',
+      action: 'Moderation queue item render error',
-      submissionId: this.props.submissionId,
+      metadata: {
-      error: error.message,
+        submissionId: this.props.submissionId,
-      stack: error.stack,
+        componentStack: errorInfo.componentStack,
-      componentStack: errorInfo.componentStack,
+      },
     });
 
     // Update state with error info
     this.setState({
+      error: { ...error, errorId } as ErrorWithId,
       errorInfo,
     });
 
@@ -103,6 +106,11 @@ export class ModerationErrorBoundary extends Component<
                   <p className="text-sm">
                     {this.state.error?.message || 'An unexpected error occurred'}
                   </p>
+                  {(this.state.error as ErrorWithId)?.errorId && (
+                    <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                      Reference ID: {(this.state.error as ErrorWithId).errorId.slice(0, 8)}
+                    </p>
+                  )}
                   {this.props.submissionId && (
                     <p className="text-xs text-muted-foreground font-mono">
                       Submission ID: {this.props.submissionId}

src/components/error/RouteErrorBoundary.tsx

@@ -2,7 +2,7 @@ import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertTriangle, Home, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface RouteErrorBoundaryProps {
   children: ReactNode;
@@ -32,17 +32,14 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: 'Route-level component crash',
-    // Critical: Route-level error - highest priority logging
+      metadata: {
-    logger.error('Route-level error caught by boundary', {
+        componentStack: errorInfo.componentStack,
-      error: error.message,
+        url: window.location.href,
-      stack: error.stack,
+        severity: 'critical',
-      componentStack: errorInfo.componentStack,
+      },
-      url: window.location.href,
-      severity: 'critical',
-      errorId,
     });
 
     this.setState({ error: { ...error, errorId } as ErrorWithId });

src/components/layout/AdminHeader.tsx

@@ -1,5 +1,6 @@
-import { Shield, ArrowLeft, Settings, RefreshCw, Menu } from 'lucide-react';
+import { Shield, ArrowLeft, Settings, Menu } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { Link, useLocation } from 'react-router-dom';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { AuthButtons } from '@/components/auth/AuthButtons';
@@ -15,7 +16,7 @@ import {
   SheetTrigger,
 } from '@/components/ui/sheet';
 
-export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
+export function AdminHeader({ onRefresh, isRefreshing }: { onRefresh?: () => void; isRefreshing?: boolean }) {
   const { permissions } = useUserRole();
   const { user } = useAuth();
   const location = useLocation();
@@ -68,14 +69,12 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
                   <span className="text-sm font-medium">Theme</span>
                   <ThemeToggle />
                 </div>
-                <Button 
+                <RefreshButton
+                  onRefresh={onRefresh!}
+                  isLoading={isRefreshing}
                   variant="ghost"
-                  onClick={onRefresh}
+                  className="justify-start w-full"
-                  className="justify-start"
+                />
-                >
-                  <RefreshCw className="w-4 h-4 mr-2" />
-                  Refresh
-                </Button>
                 {permissions?.role_level === 'superuser' && !isSettingsPage && (
                   <Button variant="ghost" asChild className="justify-start">
                     <Link to="/admin/settings">
@@ -89,16 +88,15 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
           </Sheet>
 
           {/* Desktop Actions */}
-          <Button 
+          {onRefresh && (
-            variant="ghost" 
+            <RefreshButton
-            size="sm" 
+              onRefresh={onRefresh}
-            onClick={onRefresh}
+              isLoading={isRefreshing}
-            title="Refresh admin data"
+              variant="ghost"
-            className="hidden md:flex"
+              size="sm"
-          >
+              className="hidden md:flex"
-            <RefreshCw className="w-4 h-4" />
+            />
-            <span className="hidden sm:ml-2 sm:inline">Refresh</span>
+          )}
-          </Button>
           {permissions?.role_level === 'superuser' && !isSettingsPage && (
             <Button variant="ghost" size="sm" asChild className="hidden md:flex">
               <Link to="/admin/settings">

src/components/layout/AdminTopBar.tsx

@@ -1,5 +1,5 @@
 import { RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { AuthButtons } from '@/components/auth/AuthButtons';
 import { NotificationCenter } from '@/components/notifications/NotificationCenter';
@@ -50,16 +50,12 @@ export function AdminTopBar({
         {/* Right Section */}
         <div className="flex items-center gap-2">
           {onRefresh && (
-            <Button
+            <RefreshButton
+              onRefresh={onRefresh}
+              isLoading={isRefreshing}
               variant="ghost"
               size="sm"
-              onClick={onRefresh}
+            />
-              disabled={isRefreshing}
-              title="Refresh data"
-            >
-              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
-              <span className="hidden sm:ml-2 sm:inline">Refresh</span>
-            </Button>
           )}
           <ThemeToggle />
           {user && <NotificationCenter />}

src/components/settings/EmailChangeDialog.tsx

@@ -20,8 +20,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { handleError, handleSuccess, AppError, getErrorMessage } from '@/lib/errorHandler';
+import { handleError, handleSuccess, handleNonCriticalError, AppError, getErrorMessage } from '@/lib/errorHandler';
-import { logger } from '@/lib/logger';
 import { supabase } from '@/lib/supabaseClient';
 import { Loader2, Mail, CheckCircle2, AlertCircle } from 'lucide-react';
 import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
@@ -179,10 +178,14 @@ export function EmailChangeDialog({ open, onOpenChange, currentEmail, userId }:
         }
       }).then(({ error }) => {
         if (error) {
-          logger.error('Failed to log email change', {
+          handleNonCriticalError(error, {
+            action: 'Log email change audit',
             userId,
-            action: 'email_change_audit_log',
+            metadata: { 
-            error: error.message
+              oldEmail: currentEmail,
+              newEmail: data.newEmail,
+              auditType: 'email_change_initiated'
+            }
           });
         }
       });
@@ -199,10 +202,13 @@ export function EmailChangeDialog({ open, onOpenChange, currentEmail, userId }:
             timestamp: new Date().toISOString(),
           }
         }).catch(error => {
-          logger.error('Failed to send security notification', {
+          handleNonCriticalError(error, {
+            action: 'Send email change notification',
             userId,
-            action: 'email_change_notification',
+            metadata: { 
-            error: error instanceof Error ? error.message : String(error)
+              notificationType: 'security-alert',
+              alertType: 'email_change_initiated'
+            }
           });
         });
       }
@@ -215,11 +221,6 @@ export function EmailChangeDialog({ open, onOpenChange, currentEmail, userId }:
       setStep('success');
     } catch (error: unknown) {
       const errorMsg = getErrorMessage(error);
-      logger.error('Email change failed', {
-        userId,
-        action: 'email_change',
-        error: errorMsg,
-      });
 
       const hasMessage = error instanceof Error || (typeof error === 'object' && error !== null && 'message' in error);
       const hasStatus = typeof error === 'object' && error !== null && 'status' in error;

src/hooks/useEntityVersions.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { supabase } from '@/lib/supabaseClient';
 import { toast } from 'sonner';
-import { getErrorMessage } from '@/lib/errorHandler';
+import { getErrorMessage, handleNonCriticalError } from '@/lib/errorHandler';
 import type { EntityType, EntityVersion } from '@/types/versioning';
 import { logger } from '@/lib/logger';
 
@@ -211,7 +211,14 @@ export function useEntityVersions(entityType: EntityType, entityId: string) {
       try {
         supabase.removeChannel(channelRef.current);
       } catch (error: unknown) {
-        logger.error('Failed to cleanup realtime subscription', { entityType, entityId, error: getErrorMessage(error) });
+        handleNonCriticalError(error, {
+          action: 'Cleanup realtime subscription',
+          metadata: { 
+            entityType,
+            entityId,
+            context: 'unmount_cleanup'
+          }
+        });
       } finally {
         channelRef.current = null;
       }
@@ -243,7 +250,14 @@ export function useEntityVersions(entityType: EntityType, entityId: string) {
     return () => {
       if (channelRef.current) {
         supabase.removeChannel(channelRef.current).catch((error) => {
-          logger.error('Failed to cleanup realtime subscription', { entityType, entityId, error: getErrorMessage(error) });
+          handleNonCriticalError(error, {
+            action: 'Cleanup realtime subscription',
+            metadata: { 
+              entityType,
+              entityId,
+              context: 'unmount_cleanup'
+            }
+          });
         });
         channelRef.current = null;
       }

src/hooks/useLocationAutoDetect.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useAuth } from '@/hooks/useAuth';
 import { useUnitPreferences } from '@/hooks/useUnitPreferences';
+import { handleNonCriticalError } from '@/lib/errorHandler';
 import { logger } from '@/lib/logger';
 import * as storage from '@/lib/localStorage';
 
@@ -26,7 +27,14 @@ export function useLocationAutoDetect() {
       autoDetectPreferences().then(() => {
         storage.setItem('location_detection_attempted', 'true');
       }).catch((error) => {
-        logger.error('Failed to auto-detect location', { error });
+        handleNonCriticalError(error, {
+          action: 'Auto-detect user location',
+          userId: user?.id,
+          metadata: { 
+            autoDetectEnabled: preferences.auto_detect,
+            context: 'initial_load'
+          }
+        });
         storage.setItem('location_detection_attempted', 'true');
       });
     }

src/hooks/useModerationQueue.ts

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { supabase } from '@/lib/supabaseClient';
 import { useAuth } from './useAuth';
 import { useToast } from './use-toast';
-import { getErrorMessage } from '@/lib/errorHandler';
+import { getErrorMessage, handleNonCriticalError } from '@/lib/errorHandler';
 import { getSubmissionTypeLabel } from '@/lib/moderation/entities';
 import { logger } from '@/lib/logger';
 
@@ -358,9 +358,14 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
 
       if (!response.ok) {
         const errorData = await response.json().catch((parseError) => {
-          logger.warn('Failed to parse claim error response', { 
+          handleNonCriticalError(parseError, {
-            error: getErrorMessage(parseError),
+            action: 'Parse claim error response',
-            status: response.status
+            userId: user.id,
+            metadata: { 
+              submissionId,
+              httpStatus: response.status,
+              context: 'claim_submission_error_parsing'
+            }
           });
           return { message: 'Failed to claim submission' };
         });

src/lib/errorHandler.ts

@@ -100,6 +100,64 @@ export const handleInfo = (
   });
 };
 
+/**
+ * Handle non-critical errors (background failures) that should be logged
+ * to the database WITHOUT showing user toasts
+ * Use this for fire-and-forget operations where user shouldn't be interrupted
+ */
+export const handleNonCriticalError = (
+  error: unknown,
+  context: ErrorContext
+): string => {
+  const errorId = crypto.randomUUID();
+  const shortErrorId = errorId.slice(0, 8);
+  
+  const errorMessage = error instanceof AppError 
+    ? error.userMessage || error.message
+    : error instanceof Error 
+    ? error.message 
+    : 'An unexpected error occurred';
+
+  // Log to console/monitoring (same as handleError)
+  logger.error('Non-critical error occurred', {
+    ...context,
+    error: error instanceof Error ? error.message : String(error),
+    stack: error instanceof Error ? error.stack : undefined,
+    errorId,
+    severity: 'low',
+  });
+
+  // Log to database with breadcrumbs (non-blocking, fire-and-forget)
+  try {
+    const envContext = captureEnvironmentContext();
+    const breadcrumbs = breadcrumbManager.getAll();
+    
+    supabase.rpc('log_request_metadata', {
+      p_request_id: errorId,
+      p_user_id: context.userId || undefined,
+      p_endpoint: context.action,
+      p_method: 'NON_CRITICAL_ERROR',
+      p_status_code: 500,
+      p_error_type: error instanceof Error ? error.name : 'UnknownError',
+      p_error_message: errorMessage,
+      p_error_stack: error instanceof Error ? error.stack : undefined,
+      p_user_agent: navigator.userAgent,
+      p_breadcrumbs: JSON.stringify(breadcrumbs),
+      p_timezone: envContext.timezone,
+      p_referrer: document.referrer || undefined,
+    }).then(({ error: dbError }) => {
+      if (dbError) {
+        logger.error('Failed to log non-critical error to database', { dbError });
+      }
+    });
+  } catch (logError) {
+    logger.error('Failed to capture non-critical error context', { logError });
+  }
+
+  // NO TOAST - This is the key difference from handleError()
+  return errorId;
+};
+
 /**
  * Type-safe error message extraction utility
  * Use this instead of `error: any` in catch blocks

src/lib/requestTracking.ts

@@ -7,6 +7,7 @@ import { supabase } from '@/integrations/supabase/client';
 import { requestContext, type RequestContext } from './requestContext';
 import { breadcrumbManager } from './errorBreadcrumbs';
 import { captureEnvironmentContext } from './environmentContext';
+import { handleNonCriticalError } from './errorHandler';
 import { logger } from './logger';
 
 export interface RequestTrackingOptions {
@@ -55,7 +56,16 @@ export async function trackRequest<T>(
       parentRequestId: options.parentRequestId,
       traceId: context.traceId,
     }).catch(err => {
-      logger.error('Failed to log request metadata', { error: err, context: 'RequestTracking' });
+      handleNonCriticalError(err, {
+        action: 'Log request metadata (success)',
+        userId: options.userId,
+        metadata: { 
+          endpoint: options.endpoint,
+          method: options.method,
+          statusCode: 200,
+          requestId: context.requestId
+        }
+      });
     });
     
     // Cleanup context
@@ -96,7 +106,17 @@ export async function trackRequest<T>(
       timezone: envContext.timezone,
       referrer: typeof document !== 'undefined' ? document.referrer : undefined,
     }).catch(err => {
-      logger.error('Failed to log error metadata', { error: err, context: 'RequestTracking' });
+      handleNonCriticalError(err, {
+        action: 'Log request metadata (error)',
+        userId: options.userId,
+        metadata: { 
+          endpoint: options.endpoint,
+          method: options.method,
+          statusCode: 500,
+          requestId: context.requestId,
+          errorType: errorInfo.type
+        }
+      });
     });
     
     // Cleanup context

src/pages/AdminSettings.tsx

@@ -166,8 +166,15 @@ export default function AdminSettings() {
         setLocalValue(updated);
       };
 
-      const saveBanDurations = () => {
+      const [savingBanDurations, setSavingBanDurations] = useState(false);
-        updateSetting(setting.setting_key, banDurations);
+      
+      const saveBanDurations = async () => {
+        setSavingBanDurations(true);
+        try {
+          await updateSetting(setting.setting_key, banDurations);
+        } finally {
+          setSavingBanDurations(false);
+        }
       };
 
       return (
@@ -239,7 +246,13 @@ export default function AdminSettings() {
               </div>
             </div>
 
-            <Button onClick={saveBanDurations} disabled={isUpdating} className="w-full">
+            <Button 
+              onClick={saveBanDurations} 
+              loading={savingBanDurations}
+              loadingText="Saving..."
+              className="w-full"
+              trackingLabel="save-ban-duration-settings"
+            >
               <Save className="w-4 h-4 mr-2" />
               Save Ban Duration Settings
             </Button>
@@ -431,7 +444,13 @@ export default function AdminSettings() {
                   className="w-24"
                   min="0"
                 />
-                <Button onClick={handleSubmit} disabled={isUpdating} size="sm">
+                <Button 
+                  onClick={handleSubmit} 
+                  loading={isUpdating}
+                  loadingText=""
+                  size="sm"
+                  trackingLabel="save-threshold-setting"
+                >
                   <Save className="w-4 h-4" />
                 </Button>
               </div>
@@ -458,7 +477,13 @@ export default function AdminSettings() {
               }}
               className="flex-1"
             />
-            <Button onClick={handleSubmit} disabled={isUpdating} size="sm">
+            <Button 
+              onClick={handleSubmit} 
+              loading={isUpdating}
+              loadingText=""
+              size="sm"
+              trackingLabel="save-setting"
+            >
               <Save className="w-4 h-4" />
             </Button>
           </div>

src/pages/Auth.tsx

@@ -12,8 +12,7 @@ import { Separator } from '@/components/ui/separator';
 import { Zap, Mail, Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react';
 import { supabase } from '@/lib/supabaseClient';
 import { useToast } from '@/hooks/use-toast';
-import { getErrorMessage } from '@/lib/errorHandler';
+import { getErrorMessage, handleNonCriticalError } from '@/lib/errorHandler';
-import { logger } from '@/lib/logger';
 import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
 import { notificationService } from '@/lib/notificationService';
 import { StorageWarning } from '@/components/auth/StorageWarning';
@@ -181,8 +180,6 @@ export default function Auth() {
       // Reset CAPTCHA widget to force fresh token generation
       setSignInCaptchaKey(prev => prev + 1);
       
-      logger.error('[Auth] Sign in error', { error });
-      
       // Enhanced error messages
       const errorMsg = getErrorMessage(error);
       let errorMessage = errorMsg;
@@ -294,16 +291,23 @@ export default function Auth() {
 
       // Register user with Novu (non-blocking)
       if (data.user) {
+        const userId = data.user.id;
         notificationService.createSubscriber({
-          subscriberId: data.user.id,
+          subscriberId: userId,
           email: formData.email,
           firstName: formData.username, // Send username as firstName to Novu
           data: {
             username: formData.username,
           }
         }).catch(err => {
-          logger.error('Failed to register Novu subscriber', { error: err });
+          handleNonCriticalError(err, {
-          // Don't block signup if Novu registration fails
+            action: 'Register Novu subscriber',
+            userId,
+            metadata: { 
+              email: formData.email,
+              context: 'post_signup'
+            }
+          });
         });
       }
       

src/pages/AuthCallback.tsx

@@ -275,15 +275,14 @@ export default function AuthCallback() {
                       required
                     />
                   </div>
-                  <Button type="submit" className="w-full" disabled={settingPassword}>
+                  <Button 
-                    {settingPassword ? (
+                    type="submit" 
-                      <>
+                    className="w-full"
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    loading={settingPassword}
-                        Setting Password...
+                    loadingText="Setting Password..."
-                      </>
+                    trackingLabel="set-password-recovery"
-                    ) : (
+                  >
-                      'Set Password'
+                    Set Password
-                    )}
                   </Button>
                 </form>
               </CardContent>

src/pages/Profile.tsx

@@ -525,6 +525,8 @@ export default function Profile() {
     setFormErrors({});
     return true;
   };
+  const [isSaving, setIsSaving] = useState(false);
+  
   const handleSaveProfile = async () => {
     if (!profile || !currentUser) return;
     if (!validateForm()) return;
@@ -533,6 +535,8 @@ export default function Profile() {
       setShowUsernameDialog(true);
       return;
     }
+    
+    setIsSaving(true);
     try {
       const updateData: any = {
         display_name: editForm.display_name,
@@ -572,6 +576,8 @@ export default function Profile() {
         title: "Error updating profile",
         description: getErrorMessage(error)
       });
+    } finally {
+      setIsSaving(false);
     }
   };
   const confirmUsernameChange = () => {
@@ -730,7 +736,14 @@ export default function Profile() {
                       </div>
 
                       <div className="flex gap-2">
-                        <Button onClick={handleSaveProfile} size="sm" disabled={usernameValidation.isChecking || editForm.username !== profile?.username && !usernameValidation.isValid}>
+                        <Button 
+                          onClick={handleSaveProfile} 
+                          size="sm" 
+                          loading={isSaving}
+                          loadingText="Saving..."
+                          disabled={usernameValidation.isChecking || editForm.username !== profile?.username && !usernameValidation.isValid}
+                          trackingLabel="save-profile-changes"
+                        >
                           <Save className="w-4 h-4 mr-2" />
                           Save Changes
                         </Button>

src/pages/admin/ErrorLookup.tsx

@@ -83,7 +83,12 @@ export default function ErrorLookup() {
                 onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                 className="font-mono"
               />
-              <Button onClick={handleSearch} disabled={loading}>
+              <Button 
+                onClick={handleSearch} 
+                loading={loading}
+                loadingText="Searching..."
+                trackingLabel="error-lookup-search"
+              >
                 <Search className="w-4 h-4 mr-2" />
                 Search
               </Button>

src/pages/admin/ErrorMonitoring.tsx

@@ -5,9 +5,9 @@ import { AdminLayout } from '@/components/layout/AdminLayout';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { AlertCircle, RefreshCw } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { ErrorDetailsModal } from '@/components/admin/ErrorDetailsModal';
 import { ErrorAnalytics } from '@/components/admin/ErrorAnalytics';
 import { format } from 'date-fns';
@@ -33,7 +33,7 @@ export default function ErrorMonitoring() {
   const [dateRange, setDateRange] = useState<'1h' | '24h' | '7d' | '30d'>('24h');
 
   // Fetch recent errors
-  const { data: errors, isLoading, refetch } = useQuery({
+  const { data: errors, isLoading, refetch, isFetching } = useQuery({
     queryKey: ['admin-errors', dateRange, errorTypeFilter, searchTerm],
     queryFn: async () => {
       let query = supabase
@@ -88,10 +88,12 @@ export default function ErrorMonitoring() {
             <h1 className="text-3xl font-bold tracking-tight">Error Monitoring</h1>
             <p className="text-muted-foreground">Track and analyze application errors</p>
           </div>
-          <Button onClick={() => refetch()} variant="outline" size="sm">
+          <RefreshButton
-            <RefreshCw className="w-4 h-4 mr-2" />
+            onRefresh={async () => { await refetch(); }}
-            Refresh
+            isLoading={isFetching}
-          </Button>
+            variant="outline"
+            size="sm"
+          />
         </div>
 
         {/* Analytics Section */}