- Fix import of generateRequestId in events/route.ts (import from logger instead of api-logger)
- Remove deprecated logger config from QueryClient (no longer supported in latest React Query)
These changes resolve TypeScript compilation errors and allow the build to succeed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented complete client-side error handling and reporting system:
Error Boundary Component (components/providers/ErrorBoundary.tsx):
- React Error Boundary to catch component errors
- Automatic error logging to client logger
- Error reporting to server endpoint
- User-friendly fallback UI with error details (dev mode)
- Reset and reload functionality
- Custom fallback support via props
Global Error Handler (lib/utils/global-error-handler.ts):
- Window error event listener for uncaught errors
- Unhandled promise rejection handler
- Automatic error reporting to server
- Comprehensive error metadata collection:
- Error message and stack trace
- URL, user agent, timestamp
- Filename, line number, column number (for window errors)
Client Error Reporting Endpoint (app/api/client-error/route.ts):
- Server-side endpoint to receive client errors
- Integrated with withLogging() for automatic server logging
- Accepts error reports from both ErrorBoundary and global handlers
- Returns acknowledgement to client
Error Boundary Integration (components/providers/Providers.tsx):
- Wrapped entire app in ErrorBoundary
- Initialized global error handlers on mount
- Catches React errors, window errors, and unhandled rejections
Error Reporting Features:
- Duplicate error tracking prevention
- Async error reporting (non-blocking)
- Graceful degradation (fails silently if reporting fails)
- Development vs production error display
- Structured error metadata for debugging
All errors now:
- Log to browser console via client logger
- Report to server for centralized logging
- Display user-friendly error UI
- Include full context for debugging
- Work across React, window, and promise contexts
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
The app was crashing with "useTheme must be used within ThemeProvider"
error during server-side rendering.
Changes:
- Created AppLayout client component to wrap Navbar
- Modified useTheme hook to return default values during SSR
instead of throwing an error
- Updated Navbar to safely handle theme context
- Moved Navbar rendering into client-side only AppLayout
This fixes the SSR hydration mismatch and allows the app
to render correctly on both server and client.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Modern web interface for Supervisor process management
- Built with Next.js 16 (App Router) and Tailwind CSS 4
- Full XML-RPC client implementation for Supervisor API
- Real-time process monitoring with auto-refresh
- Process control: start, stop, restart operations
- Modern dashboard with system status and statistics
- Dark/light theme with OKLCH color system
- Docker multi-stage build with runtime env var configuration
- Gitea CI/CD workflow for automated builds
- Comprehensive documentation (README, IMPLEMENTATION, DEPLOYMENT)
Features:
- Backend proxy pattern for secure API communication
- React Query for state management and caching
- TypeScript strict mode with Zod validation
- Responsive design with mobile support
- Health check endpoint for monitoring
- Non-root user security in Docker
Environment Variables:
- SUPERVISOR_HOST, SUPERVISOR_PORT
- SUPERVISOR_USERNAME, SUPERVISOR_PASSWORD (optional)
- Configurable at build-time and runtime
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
