bolt.diy/app/lib/stores/logs.ts

268 lines
7.2 KiB
TypeScript
Raw Normal View History

import { atom, map } from 'nanostores';
import Cookies from 'js-cookie';
import { createScopedLogger } from '~/utils/logger';
const logger = createScopedLogger('LogStore');
export interface LogEntry {
id: string;
timestamp: string;
level: 'info' | 'warning' | 'error' | 'debug';
message: string;
details?: Record<string, any>;
2025-01-20 08:53:15 +00:00
category: 'system' | 'provider' | 'user' | 'error' | 'api' | 'auth' | 'database' | 'network';
subCategory?: string;
duration?: number;
statusCode?: number;
}
const MAX_LOGS = 1000; // Maximum number of logs to keep in memory
class LogStore {
2025-01-21 10:55:26 +00:00
logInfo(message: string, details: { type: string; message: string }) {
return this.addLog(message, 'info', 'system', details);
}
logSuccess(message: string, details: { type: string; message: string }) {
return this.addLog(message, 'info', 'system', { ...details, success: true });
}
private _logs = map<Record<string, LogEntry>>({});
showLogs = atom(true);
2025-01-21 10:55:26 +00:00
private _readLogs = new Set<string>();
constructor() {
// Load saved logs from cookies on initialization
this._loadLogs();
2025-01-21 10:55:26 +00:00
// Only load read logs in browser environment
if (typeof window !== 'undefined') {
this._loadReadLogs();
}
}
V1 : Release of the new Settings Dashboard # 🚀 Release v1.0.0 ## What's Changed 🌟 ### 🎨 UI/UX Improvements - **Dark Mode Support** - Implemented comprehensive dark theme across all components - Enhanced contrast and readability in dark mode - Added smooth theme transitions - Optimized dialog overlays and backdrops ### 🛠️ Settings Panel - **Data Management** - Added chat history export/import functionality - Implemented settings backup and restore - Added secure data deletion with confirmations - Added profile customization options - **Provider Management** - Added comprehensive provider configuration - Implemented URL-configurable providers - Added local model support (Ollama, LMStudio) - Added provider health checks - Added provider status indicators - **Ollama Integration** - Added Ollama Model Manager with real-time updates - Implemented model version tracking - Added bulk update capability - Added progress tracking for model updates - Displays model details (parameter size, quantization) - **GitHub Integration** - Added GitHub connection management - Implemented secure token storage - Added connection state persistence - Real-time connection status updates - Proper error handling and user feedback ### 📊 Event Logging - **System Monitoring** - Added real-time event logging system - Implemented log filtering by type (info, warning, error, debug) - Added log export functionality - Added auto-scroll and search capabilities - Enhanced log visualization with color coding ### 💫 Animations & Interactions - Added smooth page transitions - Implemented loading states with spinners - Added micro-interactions for better feedback - Enhanced button hover and active states - Added motion effects for UI elements ### 🔐 Security Features - Secure token storage - Added confirmation dialogs for destructive actions - Implemented data validation - Added file size and type validation - Secure connection management ### ♿️ Accessibility - Improved keyboard navigation - Enhanced screen reader support - Added ARIA labels and descriptions - Implemented focus management - Added proper dialog accessibility ### 🎯 Developer Experience - Added comprehensive debug information - Implemented system status monitoring - Added version control integration - Enhanced error handling and reporting - Added detailed logging system --- ## 🔧 Technical Details - **Frontend Stack** - React 18 with TypeScript - Framer Motion for animations - TailwindCSS for styling - Radix UI for accessible components - **State Management** - Local storage for persistence - React hooks for state - Custom stores for global state - **API Integration** - GitHub API integration - Ollama API integration - Provider API management - Error boundary implementation ## 📝 Notes - Initial release focusing on core functionality and user experience - Enhanced dark mode support across all components - Improved accessibility and keyboard navigation - Added comprehensive logging and debugging tools - Implemented robust error handling and user feedback
2025-01-17 18:33:20 +00:00
// Expose the logs store for subscription
get logs() {
return this._logs;
}
private _loadLogs() {
const savedLogs = Cookies.get('eventLogs');
if (savedLogs) {
try {
const parsedLogs = JSON.parse(savedLogs);
this._logs.set(parsedLogs);
} catch (error) {
logger.error('Failed to parse logs from cookies:', error);
}
}
}
2025-01-21 10:55:26 +00:00
private _loadReadLogs() {
if (typeof window === 'undefined') {
return;
}
const savedReadLogs = localStorage.getItem('bolt_read_logs');
if (savedReadLogs) {
try {
const parsedReadLogs = JSON.parse(savedReadLogs);
this._readLogs = new Set(parsedReadLogs);
} catch (error) {
logger.error('Failed to parse read logs:', error);
}
}
}
private _saveLogs() {
const currentLogs = this._logs.get();
Cookies.set('eventLogs', JSON.stringify(currentLogs));
}
2025-01-21 10:55:26 +00:00
private _saveReadLogs() {
if (typeof window === 'undefined') {
return;
}
localStorage.setItem('bolt_read_logs', JSON.stringify(Array.from(this._readLogs)));
}
private _generateId(): string {
return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}
private _trimLogs() {
const currentLogs = Object.entries(this._logs.get());
if (currentLogs.length > MAX_LOGS) {
const sortedLogs = currentLogs.sort(
([, a], [, b]) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
);
const newLogs = Object.fromEntries(sortedLogs.slice(0, MAX_LOGS));
this._logs.set(newLogs);
}
}
addLog(
message: string,
level: LogEntry['level'] = 'info',
category: LogEntry['category'] = 'system',
details?: Record<string, any>,
) {
const id = this._generateId();
const entry: LogEntry = {
id,
timestamp: new Date().toISOString(),
level,
message,
details,
category,
};
this._logs.setKey(id, entry);
this._trimLogs();
this._saveLogs();
return id;
}
// System events
logSystem(message: string, details?: Record<string, any>) {
return this.addLog(message, 'info', 'system', details);
}
// Provider events
logProvider(message: string, details?: Record<string, any>) {
return this.addLog(message, 'info', 'provider', details);
}
// User actions
logUserAction(message: string, details?: Record<string, any>) {
return this.addLog(message, 'info', 'user', details);
}
2025-01-20 08:53:15 +00:00
// API Connection Logging
logAPIRequest(endpoint: string, method: string, duration: number, statusCode: number, details?: Record<string, any>) {
const message = `${method} ${endpoint} - ${statusCode} (${duration}ms)`;
const level = statusCode >= 400 ? 'error' : statusCode >= 300 ? 'warning' : 'info';
return this.addLog(message, level, 'api', {
...details,
endpoint,
method,
duration,
statusCode,
timestamp: new Date().toISOString(),
});
}
// Authentication Logging
logAuth(
action: 'login' | 'logout' | 'token_refresh' | 'key_validation',
success: boolean,
details?: Record<string, any>,
) {
const message = `Auth ${action} - ${success ? 'Success' : 'Failed'}`;
const level = success ? 'info' : 'error';
return this.addLog(message, level, 'auth', {
...details,
action,
success,
timestamp: new Date().toISOString(),
});
}
// Network Status Logging
logNetworkStatus(status: 'online' | 'offline' | 'reconnecting' | 'connected', details?: Record<string, any>) {
const message = `Network ${status}`;
const level = status === 'offline' ? 'error' : status === 'reconnecting' ? 'warning' : 'info';
return this.addLog(message, level, 'network', {
...details,
status,
timestamp: new Date().toISOString(),
});
}
// Database Operations Logging
logDatabase(operation: string, success: boolean, duration: number, details?: Record<string, any>) {
const message = `DB ${operation} - ${success ? 'Success' : 'Failed'} (${duration}ms)`;
const level = success ? 'info' : 'error';
return this.addLog(message, level, 'database', {
...details,
operation,
success,
duration,
timestamp: new Date().toISOString(),
});
}
// Error events
logError(message: string, error?: Error | unknown, details?: Record<string, any>) {
2025-01-20 08:53:15 +00:00
const errorDetails =
error instanceof Error
? {
name: error.name,
message: error.message,
stack: error.stack,
...details,
}
: { error, ...details };
return this.addLog(message, 'error', 'error', errorDetails);
}
// Warning events
logWarning(message: string, details?: Record<string, any>) {
return this.addLog(message, 'warning', 'system', details);
}
// Debug events
logDebug(message: string, details?: Record<string, any>) {
return this.addLog(message, 'debug', 'system', details);
}
clearLogs() {
this._logs.set({});
this._saveLogs();
}
getLogs() {
return Object.values(this._logs.get()).sort(
(a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
);
}
getFilteredLogs(level?: LogEntry['level'], category?: LogEntry['category'], searchQuery?: string) {
return this.getLogs().filter((log) => {
const matchesLevel = !level || level === 'debug' || log.level === level;
const matchesCategory = !category || log.category === category;
const matchesSearch =
!searchQuery ||
log.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
JSON.stringify(log.details).toLowerCase().includes(searchQuery.toLowerCase());
return matchesLevel && matchesCategory && matchesSearch;
});
}
2025-01-21 10:55:26 +00:00
markAsRead(logId: string) {
this._readLogs.add(logId);
this._saveReadLogs();
}
isRead(logId: string): boolean {
return this._readLogs.has(logId);
}
clearReadLogs() {
this._readLogs.clear();
this._saveReadLogs();
}
}
export const logStore = new LogStore();