feat(logging): add comprehensive client-side logging (Phase 5)
Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { useState, ReactNode } from 'react';
|
||||
import { Toaster } from 'sonner';
|
||||
import { ThemeProvider } from './ThemeProvider';
|
||||
import { clientLogger } from '@/lib/utils/client-logger';
|
||||
|
||||
export function Providers({ children }: { children: ReactNode }) {
|
||||
const [queryClient] = useState(
|
||||
@@ -15,6 +16,14 @@ export function Providers({ children }: { children: ReactNode }) {
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 2,
|
||||
},
|
||||
mutations: {
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
logger: {
|
||||
log: (message) => clientLogger.debug(message),
|
||||
warn: (message) => clientLogger.warn(message),
|
||||
error: (error) => clientLogger.error('React Query error', error),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user