Files
skywatch/OBSERVABILITY.md
T
nmemmert db85573986 feat: Add real-time notification center with WebSocket integration
- Add in-app notification system with database storage
- Implement bell icon component with unread count badge in dashboard header
- Add full Notifications page tab with pagination and filtering (All/Unread/Read)
- Implement real-time WebSocket push notifications to all connected clients
- Add notification API endpoints: GET, PUT /read, DELETE, POST /clear
- Fix critical bug in notificationService where 'status' variable was undefined
- Add Notifications route to App.js routing
- Enhanced UI with notification popup in header and dedicated full-page view
- Auto-reconnect WebSocket with 5s timeout on disconnect
- Support rich notification content with resource details and timestamps
2026-01-14 14:51:29 -05:00

226 lines
7.2 KiB
Markdown

# Real-Time Updates & Observability Implementation
## 🟢 Completed Features
### 1. **Real-Time WebSocket Push Notifications**
#### Server-Side Enhancements (`server/index.js`):
- **Enhanced Broadcast Functions**: Created 4 specialized broadcast functions
- `broadcastDashboardUpdate()` - Dashboard state changes
- `broadcastAlert()` - Real-time alerts
- `broadcastIncident()` - Incident updates (started/resolved)
- `broadcastMetrics()` - Performance metrics updates
- **Message Types**: Structured WebSocket messages with typed payloads
- `type: 'dashboard'` - Full dashboard refresh
- `type: 'alert'` - Individual alerts
- `type: 'incident'` - Incident lifecycle events
- `type: 'metrics'` - Performance metrics
#### Client-Side Enhancements (`client/src/App.js`):
- **Enhanced WebSocket Handler**: Receives and processes all message types
- **Real-Time Notifications UI**: Fixed toast notifications appear in top-right corner
- Auto-dismiss after 5 seconds
- Color-coded by severity (error/success/info)
- Non-blocking, stacks vertically
- **Automatic Dashboard Refresh**: Refreshes on incident events for real-time data
### 2. **Application Metrics Tracking**
#### New Module: `server/metrics.js`
- **API Request Tracking**:
- Endpoint, method, status code, response time
- Per-endpoint aggregation with min/max/average times
- Success/error counts and status code breakdown
- **Error Tracking**:
- Centralized error logging with stack traces
- Context capture (method, URL, IP address)
- Error count aggregation
- **Metrics API Endpoint**: `GET /api/observability/metrics`
- Server uptime
- API statistics (request counts, success rates, response times)
- Error counts (total and unique)
### 3. **Audit Logging System**
#### New Module: `server/auditLog.js`
- **Audit Event Tracking**:
- `log()` - Generic audit event logging
- `logResourceChange()` - Resource CRUD events
- `logSettingsChange()` - Configuration changes
- `logGroupChange()` - Group management
- `logMaintenanceChange()` - Maintenance window events
- **Event Details Captured**:
- Action (create/update/delete)
- Entity type and ID
- User ID and IP address
- Changes before/after values
- Timestamp
- **Audit Log Query API**: `GET /api/observability/audit-logs`
- Filters: entityType, entityId, userId, action, dateRange
- Summary statistics (events by action type)
- **Audit Summary**: `GET /api/observability/audit-summary`
- 7-day activity breakdown by action
#### Database Integration:
- **Audit Logs Table**: Stores all audit events with indexes
- **Error Logs Table**: Stores application errors with stack traces
### 4. **Error Tracking & Logging**
#### Features:
- **Error Collection**: Automatic error capture in metrics middleware
- **Error Storage**: Database persistence for error analysis
- **Recent Errors API**: `GET /api/observability/errors`
- Returns last 50 errors with context
- Includes stack traces for debugging
### 5. **Observability Dashboard** (`client/src/Observability.js`)
#### Tabs:
1. **API Metrics Tab**:
- Server uptime display
- Total API requests counter
- Error metrics
- Per-endpoint performance table with:
- Total requests
- Success rate %
- Average/min/max response times
- Status code distribution
2. **Errors Tab**:
- Recent errors list
- Error message, context, and timestamp
- Visual error log with syntax highlighting
3. **Audit Logs Tab**:
- 7-day activity summary
- Filterable audit log table
- Filters: Entity Type, Entity ID, User ID, Action
- Change history tracking
#### Navigation:
- Added "Observability" link to main navbar
- Accessible from dashboard navigation
### 6. **Comprehensive Middleware Integration**
#### Request Tracking Middleware:
```javascript
- Intercepts all API requests/responses
- Tracks endpoint, method, status code, duration
- Captures errors automatically
- Non-intrusive integration
```
#### Database Schema Updates (`server/database.js`):
- **audit_logs table**: Action, entity type/ID, user, changes, IP, timestamp
- **error_logs table**: Error message, stack trace, context, occurrence timestamp
- **Indexes**: Optimized queries for audit and error lookups
### 7. **Resource CRUD Audit Logging**
#### Automatic Audit Logs:
- Resource creation: Logs name, URL, type, enabled status
- Resource updates: Logs all changed fields
- Resource deletion: Logs deleted resource details
- Includes user/IP context for all operations
### 8. **New API Endpoints**
#### Authentication Endpoints:
- `GET /api/auth/csrf-token` - Generate CSRF tokens
- `POST /api/auth/refresh-token` - JWT token refresh
- `POST /api/auth/validate-password` - Password strength checking
#### Observability Endpoints:
- `GET /api/observability/metrics` - Performance metrics
- `GET /api/observability/errors` - Error logs (last 50)
- `GET /api/observability/audit-logs` - Searchable audit logs
- `GET /api/observability/audit-summary` - Activity summary
---
## 🎯 Real-Time Update Flow
```
Monitor Check Complete
↓
Incident Created/Resolved
↓
Server broadcasts via WebSocket:
- broadcastDashboardUpdate()
- broadcastIncident(incident)
↓
Client receives message
↓
Show toast notification
↓
Refresh dashboard data
↓
UI updates in real-time
```
---
## 📊 Observability Coverage
### What's Now Tracked:
- ✅ API performance (response times, success rates)
- ✅ Application errors (messages, stacks, context)
- ✅ User actions (resource CRUD, settings changes)
- ✅ System health (uptime, resource counts)
- ✅ Configuration changes (who, what, when)
### Available Dashboards:
1. **API Metrics**: Performance insights and endpoint health
2. **Error Tracking**: Centralized error log with debugging info
3. **Audit Logs**: Complete change history with filters
---
## 💾 Data Retention
- **Error Logs**: Stored indefinitely (consider adding cleanup job)
- **Audit Logs**: Stored indefinitely (consider adding cleanup job)
- **Metrics**: In-memory (resets on server restart)
---
## 🔐 Security Notes
- IP addresses captured for all audit events
- Error logs may contain sensitive data (review periodically)
- Audit logs provide full change history for compliance
- WebSocket messages sent to all connected clients (consider auth)
---
## 🚀 Next Steps
1. **Error Log Cleanup**: Add job to archive old error logs (> 90 days)
2. **Audit Log Retention**: Implement archive for old audit logs
3. **Real-time Metrics Push**: Broadcast metrics via WebSocket to Observability tab
4. **Performance Alerts**: Add threshold-based alerts in metrics
5. **Export Audit Reports**: PDF/CSV export of audit logs
6. **Metrics Dashboard Charts**: Add charts for error rate trends, response time trends
---
## 📝 Files Modified/Created
### New Files:
- `server/metrics.js` - Metrics collection
- `server/auditLog.js` - Audit logging
- `client/src/Observability.js` - Observability dashboard
### Modified Files:
- `server/database.js` - Added audit_logs and error_logs tables
- `server/index.js` - Added metrics middleware, observability endpoints, enhanced WebSocket
- `client/src/App.js` - Added notification UI, enhanced WebSocket handler, Observability route
### No Breaking Changes:
- All existing functionality preserved
- Backward compatible API
- Optional observability features