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:
@@ -3,6 +3,7 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import type { ProcessInfo, SystemInfo, LogTailResult, ConfigInfo } from '@/lib/supervisor/types';
|
||||
import { createMutationLogger } from '@/lib/utils/client-logger';
|
||||
|
||||
// Query Keys
|
||||
export const supervisorKeys = {
|
||||
@@ -143,16 +144,21 @@ export function useProcessLogs(
|
||||
|
||||
export function useStartProcess() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('startProcess');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => startProcess(name, wait),
|
||||
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => {
|
||||
logger.info('Starting process', { name, wait });
|
||||
return startProcess(name, wait);
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
logger.info('Process started successfully', { name: variables.name });
|
||||
toast.success(data.message);
|
||||
// Invalidate and refetch
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
onError: (error: Error, variables) => {
|
||||
logger.error('Failed to start process', error, { name: variables.name });
|
||||
toast.error(`Failed to start process: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -160,15 +166,21 @@ export function useStartProcess() {
|
||||
|
||||
export function useStopProcess() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('stopProcess');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => stopProcess(name, wait),
|
||||
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => {
|
||||
logger.info('Stopping process', { name, wait });
|
||||
return stopProcess(name, wait);
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
logger.info('Process stopped successfully', { name: variables.name });
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
onError: (error: Error, variables) => {
|
||||
logger.error('Failed to stop process', error, { name: variables.name });
|
||||
toast.error(`Failed to stop process: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -176,15 +188,21 @@ export function useStopProcess() {
|
||||
|
||||
export function useRestartProcess() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('restartProcess');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (name: string) => restartProcess(name),
|
||||
mutationFn: (name: string) => {
|
||||
logger.info('Restarting process', { name });
|
||||
return restartProcess(name);
|
||||
},
|
||||
onSuccess: (data, name) => {
|
||||
logger.info('Process restarted successfully', { name });
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(name) });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
onError: (error: Error, name) => {
|
||||
logger.error('Failed to restart process', error, { name });
|
||||
toast.error(`Failed to restart process: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -415,14 +433,22 @@ async function restartAllProcesses(wait: boolean = true): Promise<{ success: boo
|
||||
|
||||
export function useStartAllProcesses() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('startAllProcesses');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (wait: boolean = true) => startAllProcesses(wait),
|
||||
mutationFn: (wait: boolean = true) => {
|
||||
logger.info('Starting all processes', { wait });
|
||||
return startAllProcesses(wait);
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
logger.info('All processes started successfully', {
|
||||
resultCount: data.results?.length,
|
||||
});
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
logger.error('Failed to start all processes', error);
|
||||
toast.error(`Failed to start all processes: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -430,14 +456,22 @@ export function useStartAllProcesses() {
|
||||
|
||||
export function useStopAllProcesses() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('stopAllProcesses');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (wait: boolean = true) => stopAllProcesses(wait),
|
||||
mutationFn: (wait: boolean = true) => {
|
||||
logger.info('Stopping all processes', { wait });
|
||||
return stopAllProcesses(wait);
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
logger.info('All processes stopped successfully', {
|
||||
resultCount: data.results?.length,
|
||||
});
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
logger.error('Failed to stop all processes', error);
|
||||
toast.error(`Failed to stop all processes: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -445,14 +479,22 @@ export function useStopAllProcesses() {
|
||||
|
||||
export function useRestartAllProcesses() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('restartAllProcesses');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (wait: boolean = true) => restartAllProcesses(wait),
|
||||
mutationFn: (wait: boolean = true) => {
|
||||
logger.info('Restarting all processes', { wait });
|
||||
return restartAllProcesses(wait);
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
logger.info('All processes restarted successfully', {
|
||||
resultCount: data.results?.length,
|
||||
});
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
logger.error('Failed to restart all processes', error);
|
||||
toast.error(`Failed to restart all processes: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -516,14 +558,20 @@ export function useConfig() {
|
||||
|
||||
export function useReloadConfig() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('reloadConfig');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: reloadConfig,
|
||||
mutationFn: () => {
|
||||
logger.info('Reloading supervisor configuration');
|
||||
return reloadConfig();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
logger.info('Configuration reloaded successfully');
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
logger.error('Failed to reload configuration', error);
|
||||
toast.error(`Failed to reload configuration: ${error.message}`);
|
||||
},
|
||||
});
|
||||
@@ -602,15 +650,24 @@ async function signalAllProcesses(signal: string): Promise<{ success: boolean; m
|
||||
|
||||
export function useSignalProcess() {
|
||||
const queryClient = useQueryClient();
|
||||
const logger = createMutationLogger('signalProcess');
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ name, signal }: { name: string; signal: string }) => signalProcess(name, signal),
|
||||
mutationFn: ({ name, signal }: { name: string; signal: string }) => {
|
||||
logger.info('Sending signal to process', { name, signal });
|
||||
return signalProcess(name, signal);
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
logger.info('Signal sent successfully', { name: variables.name, signal: variables.signal });
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
onError: (error: Error, variables) => {
|
||||
logger.error('Failed to send signal', error, {
|
||||
name: variables.name,
|
||||
signal: variables.signal,
|
||||
});
|
||||
toast.error(`Failed to send signal: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user