niko/claude-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: Critical performance & stability fixes

Browse Source 
Frontend:
- Lazy load SyntaxHighlighter via React.lazy() - saves ~500KB from initial bundle
- Add LazyCodeBlock wrapper with Suspense fallback
- Main bundle now 448KB instead of 1.1MB

Backend:
- Implement WebSocket message queue with backpressure handling
- Add heartbeat timeout check (60s) to detect zombie connections
- Add process startup timeout (30s) and max lifetime (24h)
- Fix restart race condition with timeout fallback
- Replace sessions Map with LRU Map (max 100 sessions)
- Add periodic cleanup for idle sessions (4h)
- Track session activity timestamps

These changes address critical issues identified in performance analysis:
- No more unbounded memory growth from sessions
- No more stuck isRestarting state
- No more message drops during heavy Claude output
- No more zombie WebSocket connections
- Faster initial page load

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Support
2025-12-20 15:41:17 +01:00
parent 580273bed0
commit fbc8103034
2 changed files with 282 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
backend/server.js
View File

@@ -117,8 +117,73 @@ function loadConfig() {
}
loadConfig();
// Store active Claude sessions
const sessions = new Map();
// LRU Map with size limit for sessions
class LRUMap extends Map {
constructor(maxSize = 100) {
super();
this.maxSize = maxSize;
}
set(key, value) {
// If key exists, delete it first to update its position
if (this.has(key)) {
this.delete(key);
}
// If at capacity, delete oldest entry
if (this.size >= this.maxSize) {
const oldestKey = this.keys().next().value;
const oldestSession = this.get(oldestKey);
console.log(`[LRU] Evicting oldest session: ${oldestKey}`);
// Kill the process if it exists
if (oldestSession?.process) {
try {
oldestSession.process.kill();
} catch (e) {
// Ignore kill errors
}
}
this.delete(oldestKey);
}
super.set(key, value);
return this;
}
// Touch a key to mark it as recently used
touch(key) {
if (this.has(key)) {
const value = this.get(key);
this.delete(key);
super.set(key, value);
}
}
}
// Store active Claude sessions with LRU eviction (max 100 sessions)
const sessions = new LRUMap(100);
// Process lifetime limits
const PROCESS_STARTUP_TIMEOUT = 30000; // 30s to start
const PROCESS_MAX_LIFETIME = 24 * 60 * 60 * 1000; // 24h max session
// Periodic cleanup of idle sessions (every hour)
const SESSION_MAX_IDLE = 4 * 60 * 60 * 1000; // 4 hours idle = cleanup
setInterval(() => {
const now = Date.now();
for (const [id, session] of sessions.entries()) {
const idle = now - (session.lastActivity || session.createdAt || now);
if (idle > SESSION_MAX_IDLE) {
console.log(`[Cleanup] Removing idle session: ${id} (idle: ${Math.round(idle/1000/60)}min)`);
if (session.process) {
try {
session.process.kill();
} catch (e) {
// Ignore
}
}
sessions.delete(id);
}
}
}, 60 * 60 * 1000); // Check hourly
// Control request counter for unique IDs
let controlRequestCounter = 0;
@@ -566,11 +631,20 @@ wss.on('connection', async (ws, req) => {
const sessionId = uuidv4();
console.log(`[${sessionId}] New WebSocket connection`);
// Track connection health
// Track connection health with timestamp
ws.isAlive = true;
ws.lastPong = Date.now();
// Heartbeat to keep connection alive through proxies
// Heartbeat to keep connection alive through proxies + zombie detection
const HEARTBEAT_TIMEOUT = 60000; // 60s without pong = dead
const heartbeatInterval = setInterval(() => {
// Check for zombie connections
if (Date.now() - ws.lastPong > HEARTBEAT_TIMEOUT) {
console.log(`[${sessionId}] Heartbeat timeout - terminating zombie connection`);
ws.terminate();
return;
}
if (ws.readyState === ws.OPEN) {
ws.ping();
}
@@ -578,6 +652,7 @@ wss.on('connection', async (ws, req) => {
ws.on('pong', () => {
ws.isAlive = true;
ws.lastPong = Date.now();
});
// Authenticate WebSocket connection
@@ -639,14 +714,61 @@ wss.on('connection', async (ws, req) => {
pendingControlRequests.set(modeRequestId, { type: 'set_permission_mode', mode, createdAt: Date.now() });
};
// Message queue with backpressure handling
const messageQueue = [];
const MAX_QUEUE_SIZE = 500;
let isFlushing = false;
const flushMessageQueue = () => {
if (isFlushing || messageQueue.length === 0) return;
if (ws.readyState !== ws.OPEN) {
messageQueue.length = 0; // Clear queue if connection closed
return;
}
isFlushing = true;
const msg = messageQueue.shift();
try {
ws.send(JSON.stringify(msg), (err) => {
isFlushing = false;
if (err) {
console.error(`[${sessionId}] WebSocket send failed:`, err.message);
// Don't re-queue on error - message is lost but prevents infinite loops
}
// Continue flushing if more messages
if (messageQueue.length > 0) {
setImmediate(flushMessageQueue);
}
});
} catch (err) {
isFlushing = false;
console.error(`[${sessionId}] WebSocket send exception:`, err.message);
}
};
const sendToClient = (type, data) => {
if (ws.readyState === ws.OPEN) {
try {
ws.send(JSON.stringify({ type, ...data, timestamp: Date.now() }));
} catch (err) {
console.error(`[${sessionId}] WebSocket send failed:`, err.message);
if (ws.readyState !== ws.OPEN) return;
const message = { type, ...data, timestamp: Date.now() };
// Backpressure: if queue is full, drop oldest non-critical messages
if (messageQueue.length >= MAX_QUEUE_SIZE) {
// Find oldest non-critical message to drop (keep errors, session_ended, etc)
const criticalTypes = ['error', 'session_ended', 'auth_error', 'permission_request'];
const dropIndex = messageQueue.findIndex(m => !criticalTypes.includes(m.type));
if (dropIndex !== -1) {
messageQueue.splice(dropIndex, 1);
console.warn(`[${sessionId}] Queue full - dropped oldest non-critical message`);
} else {
// All critical, drop oldest anyway
messageQueue.shift();
console.warn(`[${sessionId}] Queue full - dropped oldest message`);
}
}
messageQueue.push(message);
flushMessageQueue();
};
const startClaudeSession = (projectPath, resume = true, hostId = null, silent = false) => {
@@ -711,7 +833,48 @@ wss.on('connection', async (ws, req) => {
});
}
sessions.set(sessionId, { process: claudeProcess, project: projectPath, host: host, hostId: hostId, user: wsUser });
const sessionData = {
process: claudeProcess,
project: projectPath,
host: host,
hostId: hostId,
user: wsUser,
createdAt: Date.now(),
lastActivity: Date.now()
};
sessions.set(sessionId, sessionData);
// Process startup timeout - kill if not responsive within 30s
const startupTimeout = setTimeout(() => {
if (!isInitialized && claudeProcess) {
console.error(`[${sessionId}] Process startup timeout - killing`);
sendToClient('error', { message: 'Claude startup timeout - please try again' });
try {
claudeProcess.kill('SIGKILL');
} catch (e) {
// Ignore
}
}
}, PROCESS_STARTUP_TIMEOUT);
// Process max lifetime - kill after 24h to prevent runaway sessions
const maxLifetimeTimeout = setTimeout(() => {
console.log(`[${sessionId}] Max lifetime reached (24h) - terminating session`);
sendToClient('session_ended', { reason: 'max_lifetime', message: 'Session expired after 24 hours' });
if (claudeProcess) {
try {
claudeProcess.kill('SIGTERM');
} catch (e) {
// Ignore
}
}
}, PROCESS_MAX_LIFETIME);
// Clear timeouts on process exit
claudeProcess.once('exit', () => {
clearTimeout(startupTimeout);
clearTimeout(maxLifetimeTimeout);
});
// Only send session_started if not a silent restart (e.g., after interrupt)
if (!silent) {
@@ -963,6 +1126,13 @@ wss.on('connection', async (ws, req) => {
const data = JSON.parse(message.toString());
if (DEBUG) console.log(`[${sessionId}] Received:`, data.type);
// Update session activity timestamp
const session = sessions.get(sessionId);
if (session) {
session.lastActivity = Date.now();
sessions.touch(sessionId); // Move to end of LRU
}
switch (data.type) {
case 'start_session':
startClaudeSession(data.project || '/projects', data.resume !== false, data.host || null);
@@ -997,42 +1167,65 @@ wss.on('connection', async (ws, req) => {
// Interrupt Claude and restart with --continue
// In JSON mode, SIGINT causes Claude to exit (unlike TUI mode where it just stops output)
// So we need to restart the session automatically
if (claudeProcess) {
console.log(`[${sessionId}] Stop generation: sending SIGINT and will restart`);
// Set flag to prevent session_ended from being sent
isRestarting = true;
// Save current state for restart
const restartProject = currentProject;
const restartHost = currentHostId;
const restartPermissionMode = currentPermissionMode;
// Notify frontend (no message - silent interrupt)
sendToClient('generation_stopped', {
timestamp: Date.now()
});
// Listen for exit and restart
claudeProcess.once('exit', (code) => {
console.log(`[${sessionId}] Claude exited with code ${code}, restarting with --continue`);
isInitialized = false;
// Restart with --continue to resume conversation (silent = no session_started message)
setTimeout(() => {
startClaudeSession(restartProject, true, restartHost, true); // silent=true
savedPermissionMode = restartPermissionMode;
isRestarting = false; // Clear flag after restart
}, 200);
});
// Send SIGINT (graceful interrupt)
claudeProcess.kill('SIGINT');
} else {
if (!claudeProcess) {
sendToClient('generation_stopped', {
message: 'No active process',
timestamp: Date.now()
});
break;
}
// Prevent multiple simultaneous restart attempts
if (isRestarting) {
sendToClient('error', { message: 'Already restarting, please wait' });
break;
}
console.log(`[${sessionId}] Stop generation: sending SIGINT and will restart`);
// Set flag to prevent session_ended from being sent
isRestarting = true;
// Save current state for restart
const restartProject = currentProject;
const restartHost = currentHostId;
const restartPermissionMode = currentPermissionMode;
// Notify frontend (no message - silent interrupt)
sendToClient('generation_stopped', {
timestamp: Date.now()
});
// Timeout to prevent stuck isRestarting state
const restartTimeout = setTimeout(() => {
console.error(`[${sessionId}] Restart timeout - forcing new session`);
isRestarting = false;
isInitialized = false;
startClaudeSession(restartProject, true, restartHost, true);
savedPermissionMode = restartPermissionMode;
}, 10000); // 10s timeout
// Listen for exit and restart
claudeProcess.once('exit', (code) => {
clearTimeout(restartTimeout);
console.log(`[${sessionId}] Claude exited with code ${code}, restarting with --continue`);
isInitialized = false;
// Restart with --continue to resume conversation (silent = no session_started message)
setTimeout(() => {
startClaudeSession(restartProject, true, restartHost, true); // silent=true
savedPermissionMode = restartPermissionMode;
isRestarting = false; // Clear flag after restart
}, 200);
});
// Send SIGINT (graceful interrupt)
try {
claudeProcess.kill('SIGINT');
} catch (killErr) {
console.error(`[${sessionId}] Kill failed:`, killErr.message);
clearTimeout(restartTimeout);
isRestarting = false;
}
break;