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;

61
frontend/src/components/MessageList.jsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef, useState, useMemo, memo, useCallback } from 'react';
import { useEffect, useRef, useState, useMemo, memo, useCallback, lazy, Suspense } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import {
User, Bot, Terminal, CheckCircle, AlertCircle, Info,
@@ -10,9 +10,42 @@ import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useAuth } from '../contexts/AuthContext';
import { useHosts } from '../contexts/HostContext';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// Lazy load SyntaxHighlighter - saves ~500KB from initial bundle
const SyntaxHighlighter = lazy(() =>
import('react-syntax-highlighter').then(mod => ({
default: mod.Prism
}))
);
// Import style separately (small JSON, OK to load eagerly for consistency)
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
// Fallback component for code blocks while SyntaxHighlighter loads
const CodeFallback = memo(function CodeFallback({ children }) {
return (
<pre className="bg-dark-900 rounded-lg p-3 text-xs text-dark-300 font-mono overflow-x-auto animate-pulse">
<code>{children}</code>
</pre>
);
});
// Wrapper for lazy-loaded SyntaxHighlighter with Suspense
const LazyCodeBlock = memo(function LazyCodeBlock({ language, style, customStyle, children, ...props }) {
return (
<Suspense fallback={<CodeFallback>{children}</CodeFallback>}>
<SyntaxHighlighter
language={language}
style={style}
customStyle={customStyle}
{...props}
>
{children}
</SyntaxHighlighter>
</Suspense>
);
});
// Helper to extract and filter system-reminder tags
function parseSystemReminders(text) {
if (!text || typeof text !== 'string') return { content: text || '', reminders: [] };
@@ -415,7 +448,7 @@ const Message = memo(function Message({ message, onSendMessage, hostConfig }) {
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
<LazyCodeBlock
style={oneDark}
language={match[1]}
PreTag="div"
@@ -428,7 +461,7 @@ const Message = memo(function Message({ message, onSendMessage, hostConfig }) {
{...props}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
</LazyCodeBlock>
) : (
<code className={className} {...props}>
{children}
@@ -854,13 +887,13 @@ const ToolUseCard = memo(function ToolUseCard({ tool, input, result, onSendMessa
if (tool === 'Bash' && input.command) {
return (
<div className="space-y-2">
<SyntaxHighlighter
<LazyCodeBlock
language="bash"
style={oneDark}
customStyle={{ margin: 0, padding: '8px', fontSize: '11px', borderRadius: '4px' }}
>
{input.command}
</SyntaxHighlighter>
</LazyCodeBlock>
{input.description && (
<div className="text-xs text-dark-500">Description: {input.description}</div>
)}
@@ -1055,7 +1088,7 @@ const ToolUseCard = memo(function ToolUseCard({ tool, input, result, onSendMessa
<span className="text-dark-500">{lines} lines</span>
</div>
{input.content && (
<SyntaxHighlighter
<LazyCodeBlock
language={language}
style={oneDark}
customStyle={{ margin: 0, padding: '8px', fontSize: '11px', borderRadius: '4px', maxHeight: '200px' }}
@@ -1063,7 +1096,7 @@ const ToolUseCard = memo(function ToolUseCard({ tool, input, result, onSendMessa
wrapLongLines={true}
>
{input.content}
</SyntaxHighlighter>
</LazyCodeBlock>
)}
</div>
);
@@ -1221,13 +1254,13 @@ const ToolUseCard = memo(function ToolUseCard({ tool, input, result, onSendMessa
// Default JSON view
return (
<SyntaxHighlighter
<LazyCodeBlock
language="json"
style={oneDark}
customStyle={{ margin: 0, padding: '8px', fontSize: '11px', borderRadius: '4px' }}
>
{formatInput()}
</SyntaxHighlighter>
</LazyCodeBlock>
);
};
@@ -1323,14 +1356,14 @@ const ToolUseCard = memo(function ToolUseCard({ tool, input, result, onSendMessa
{/* Result Content */}
<div className="max-h-48 overflow-y-auto">
{resultLooksLikeCode ? (
<SyntaxHighlighter
<LazyCodeBlock
language="javascript"
style={oneDark}
customStyle={{ margin: 0, padding: '8px', fontSize: '11px', background: 'transparent' }}
wrapLongLines={true}
>
{resultData.contentStr}
</SyntaxHighlighter>
</LazyCodeBlock>
) : (
<pre className="text-xs text-dark-400 whitespace-pre-wrap font-mono">{resultData.contentStr}</pre>
)}
@@ -1433,14 +1466,14 @@ const ToolResultCard = memo(function ToolResultCard({ content, isSuccess = true
{contentStr && (
<div className="border-t border-dark-700/50 bg-dark-900/50 max-h-48 overflow-y-auto">
{looksLikeCode ? (
<SyntaxHighlighter
<LazyCodeBlock
language="javascript"
style={oneDark}
customStyle={{ margin: 0, padding: '12px', fontSize: '11px', background: 'transparent' }}
wrapLongLines={true}
>
{contentStr}
</SyntaxHighlighter>
</LazyCodeBlock>
) : (
<pre className="text-xs text-dark-400 whitespace-pre-wrap p-3 font-mono">{contentStr}</pre>
)}