Performance: Excessive load times in UI #338

New issue

Closed

opened 2026-03-02 13:01:22 +00:00 by jack · 0 comments

jack commented

2026-03-02 13:01:22 +00:00

Owner

Problem

UI hat seit Neuestem sehr lange Ladezeiten.

Betroffene Views:

Task Queue?
Sessions?
Observations?
Dashboard?

Mögliche Ursachen

1. Wachsende Datenbank

Symptom: Viele Tasks/Sessions → langsame Queries

-- Ohne Index auf status
SELECT * FROM tasks WHERE status = 'pending'; -- Langsam bei 10k+ Tasks

Lösung: Indizes hinzufügen

CREATE INDEX idx_tasks_status ON tasks(status);
CREATE INDEX idx_tasks_created_at ON tasks(created_at);
CREATE INDEX idx_sessions_project ON sessions(project_path);

2. Fehlende Pagination

Symptom: UI lädt alle Tasks auf einmal (278 Pending!)

// Aktuell: Alle laden
const tasks = await taskRepo.findAll(); // → 2500+ Tasks!

// Besser: Paginated
const tasks = await taskRepo.find({ 
  limit: 100, 
  offset: page * 100 
});

3. N+1 Query-Problem

Symptom: Für jeden Task ein separater Query

// N+1 Problem
for (const task of tasks) {
  const session = await sessionRepo.findOne({ id: task.sessionId });
}

// Lösung: Eager Loading
const tasks = await taskRepo.find({ 
  populate: ['session'] 
});

4. Worker-Overload

Symptom: 278 Pending-Tasks → Worker kommen nicht hinterher

Prüfen:

Wie viele Worker laufen?
Sind Worker blockiert/crashed?
Task-Processing-Rate?

# Worker-Status
curl http://localhost:37777/api/workers

# Task-Queue-Stats
curl http://localhost:37777/api/tasks/stats

5. Fehlende Response-Caching

Symptom: Jeder Request lädt alles neu

// Backend: Cache für häufige Queries
import { Cache } from 'cache-manager';

const stats = await cache.wrap('task-stats', async () => {
  return await taskRepo.getStats();
}, { ttl: 10 }); // 10s Cache

6. SSE/WebSocket-Overhead

Symptom: Zu viele Live-Updates

// Throttle Updates
const debouncedUpdate = debounce(() => {
  fetchTasks();
}, 1000); // Max 1x/Sekunde

Debugging

Performance-Profiling

# Backend-Logs mit Timing
LOG_LEVEL=debug pnpm dev

# SQL-Query-Logging
DATABASE_LOGGING=true pnpm dev

# Chrome DevTools
# Network Tab → Check Response Times
# Performance Tab → Flame Graph

Metriken sammeln

// Backend: Request-Timing
app.use((req, res, next) => {
  const start = Date.now();
  res.on('finish', () => {
    console.log(`${req.path}: ${Date.now() - start}ms`);
  });
  next();
});

Quick-Wins

Sofort umsetzbar:

Indizes auf tasks(status), tasks(created_at)
Limit auf Task-Queries (max 100 per View)
Eager-Loading für Relations
Response-Caching (10s TTL)

Acceptance Criteria

Ladezeiten <500ms (UI)
Queries <100ms (Backend)
DB-Indizes vorhanden
Pagination implementiert
Performance-Metrics geloggt

Priority

High - Benutzerfreundlichkeit stark beeinträchtigt.

Siehe #336 (Task-Queue zeigt nur 100 von 278)

## Problem **UI hat seit Neuestem sehr lange Ladezeiten.** **Betroffene Views:** - Task Queue? - Sessions? - Observations? - Dashboard? ## Mögliche Ursachen ### 1. Wachsende Datenbank **Symptom:** Viele Tasks/Sessions → langsame Queries ```sql -- Ohne Index auf status SELECT * FROM tasks WHERE status = 'pending'; -- Langsam bei 10k+ Tasks ``` **Lösung:** Indizes hinzufügen ```sql CREATE INDEX idx_tasks_status ON tasks(status); CREATE INDEX idx_tasks_created_at ON tasks(created_at); CREATE INDEX idx_sessions_project ON sessions(project_path); ``` ### 2. Fehlende Pagination **Symptom:** UI lädt alle Tasks auf einmal (278 Pending!) ```typescript // Aktuell: Alle laden const tasks = await taskRepo.findAll(); // → 2500+ Tasks! // Besser: Paginated const tasks = await taskRepo.find({ limit: 100, offset: page * 100 }); ``` ### 3. N+1 Query-Problem **Symptom:** Für jeden Task ein separater Query ```typescript // N+1 Problem for (const task of tasks) { const session = await sessionRepo.findOne({ id: task.sessionId }); } // Lösung: Eager Loading const tasks = await taskRepo.find({ populate: ['session'] }); ``` ### 4. Worker-Overload **Symptom:** 278 Pending-Tasks → Worker kommen nicht hinterher **Prüfen:** - Wie viele Worker laufen? - Sind Worker blockiert/crashed? - Task-Processing-Rate? ```bash # Worker-Status curl http://localhost:37777/api/workers # Task-Queue-Stats curl http://localhost:37777/api/tasks/stats ``` ### 5. Fehlende Response-Caching **Symptom:** Jeder Request lädt alles neu ```typescript // Backend: Cache für häufige Queries import { Cache } from 'cache-manager'; const stats = await cache.wrap('task-stats', async () => { return await taskRepo.getStats(); }, { ttl: 10 }); // 10s Cache ``` ### 6. SSE/WebSocket-Overhead **Symptom:** Zu viele Live-Updates ```typescript // Throttle Updates const debouncedUpdate = debounce(() => { fetchTasks(); }, 1000); // Max 1x/Sekunde ``` ## Debugging ### Performance-Profiling ```bash # Backend-Logs mit Timing LOG_LEVEL=debug pnpm dev # SQL-Query-Logging DATABASE_LOGGING=true pnpm dev # Chrome DevTools # Network Tab → Check Response Times # Performance Tab → Flame Graph ``` ### Metriken sammeln ```typescript // Backend: Request-Timing app.use((req, res, next) => { const start = Date.now(); res.on('finish', () => { console.log(`${req.path}: ${Date.now() - start}ms`); }); next(); }); ``` ## Quick-Wins **Sofort umsetzbar:** 1. **Indizes** auf `tasks(status)`, `tasks(created_at)` 2. **Limit** auf Task-Queries (max 100 per View) 3. **Eager-Loading** für Relations 4. **Response-Caching** (10s TTL) ## Acceptance Criteria - [x] Ladezeiten <500ms (UI) - [x] Queries <100ms (Backend) - [x] DB-Indizes vorhanden - [x] Pagination implementiert - [x] Performance-Metrics geloggt ## Priority **High** - Benutzerfreundlichkeit stark beeinträchtigt. ## Related - Siehe #336 (Task-Queue zeigt nur 100 von 278)