JavaScript Memory-Leak-Debugging in der Praxis: Eine vollständige Pipeline von Chrome DevTools bis zur automatisierten Erkennung

Memory Leaks: Der lautlose Killer von Frontend-Apps

Memory Leaks führen nicht sofort zum Absturz — sie wirken wie ein langsames Gift und lassen Seiten schrittweise langsamer werden, bis sie schließlich weiß werden (White-Screen). Dies ist in SPAs besonders gravierend, da Seiten dort nie neu geladen werden.

Schweregrad des Leaks	Symptome	Zeitskala
Leicht	Leichtes Ruckeln nach längerer Nutzung	Mehrere Stunden
Mittel	Spürbare Verlangsamung nach Routenwechsel	30–60 Minuten
Schwer	White-Screen/Absturz nach Interaktion	Einige Minuten

Sechs klassische Leak-Muster

1. Nicht aufgeräumte Timer

// Leak: timer keeps running after component unmounts
function PollingComponent() {
  useEffect(() => {
    const timer = setInterval(fetchData, 5000);
    // Forgot to return cleanup
  }, []);
}

// Fix
function PollingComponent() {
  useEffect(() => {
    const timer = setInterval(fetchData, 5000);
    return () => clearInterval(timer);
  }, []);
}

2. Nicht entfernte Event-Listener

// Leak: global event listener holds component reference
function ScrollComponent() {
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    // Forgot to remove
  }, []);
}

// Fix
function ScrollComponent() {
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
}

3. Versehentliche Closure-Referenzen

// Leak: closure holds reference to entire largeData
function processChunk(largeData) {
  const result = largeData.items[0].value;
  // Even though only result is used, closure still holds largeData
  return function getResult() {
    return result;
  };
}

// Fix: only capture the needed value
function processChunk(largeData) {
  const result = largeData.items[0].value;
  const captured = result; // primitive type, no reference
  return function getResult() {
    return captured;
  };
}

4. Abgekoppelte (Detached) DOM-Knoten

// Leak: DOM removed but JS still references it
const element = document.getElementById('card');
element.remove();
// element variable still holds reference, DOM node cannot be garbage collected

// Fix: null out the reference after removal
element.remove();
element = null;

5. Zombie-Referenzen in Map/Set

// Leak: Map holds references to destroyed components
const componentCache = new Map();

function register(id, component) {
  componentCache.set(id, component);
}

// Component destroyed but not removed from Map
// Fix: clean up on destroy
function unregister(id) {
  componentCache.delete(id);
}

6. Map statt WeakMap verwenden

// When keys are objects and auto-collection is desired, use WeakMap
const metadata = new WeakMap();

function attachMeta(obj, meta) {
  metadata.set(obj, meta); // when obj is GC'd, entry auto-disappears
}

// Using Map, the entry persists even after obj is GC'd

Chrome DevTools Memory-Panel in der Praxis

Schritt 1: Baseline erstellen

DevTools öffnen → Memory-Panel
Auf Take heap snapshot klicken
Mit "Baseline" beschriften

Schritt 2: Operieren und vergleichen

Möglicherweise leak-verursachende Operationen ausführen (z. B. 10-mal Routen wechseln)
Auf Take heap snapshot klicken
Mit "After operation" beschriften
Ansicht "Comparison" wählen, mit Baseline vergleichen

Schritt 3: Wachsende Objekte analysieren

Spalte	Bedeutung
Added	Neu erstellte Objekte
Deleted	Gelöschte Objekte
Delta	Netto-Änderung der Objektanzahl
Allocated Size	Neu zugewiesener Speicher
Freed Size	Freigegebener Speicher
Size Delta	Netto-Speicheränderung

Fokus auf: Objekte mit Delta > 0 und großem Size Delta.

Schritt 4: Retainer untersuchen

Auf ein geleaktes Objekt klicken → Retainers-Panel ansehen → Referenzkette nachverfolgen:

Detached HTMLDivElement
  ↳ retained by Object (componentCache)
    ↳ retained by Map @12345
      ↳ retained by Window (global)

Diese Kette zeigt: Ein abgekoppeltes DOM-Element wird von der componentCache-Map gehalten, die eine globale Variable ist.

Allocation-Zeitleiste für Echtzeit-Tracking

Allocation instrumentation on timeline wählen
Aufzeichnung starten
Operationen ausführen
Aufzeichnung stoppen
Blaue Balken = noch lebende Allokationen, graue Balken = bereits eingesammelte

DevTools-Signaturen häufiger Leak-Szenarien

Leak-Typ	Heap-Snapshot-Signatur	Schlüsselwörter
Event-Listener	EventListener-Anzahl wächst weiter	`eventListeners`
Timer	Timer-Objekte nehmen nicht ab	`timer`
Detached DOM	`Detached HTML*Element`	`Detached`
Closure-Referenzen	`closure` hält große Objekte	`context`
Map/Set	Map-Größe wächst weiter	`Map` / `Set`

Automatisierte Memory-Leak-Erkennung

Puppeteer + DevTools Protocol

const puppeteer = require('puppeteer');

async function detectMemoryLeak(url, action, iterations = 10) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);

  const results = [];

  for (let i = 0; i < iterations; i++) {
    // Perform operation
    await action(page);

    // Force GC
    await page.evaluate(() => {
      if (window.gc) window.gc();
    });

    // Get memory metrics
    const metrics = await page.metrics();
    results.push({
      iteration: i + 1,
      jsHeapUsedSize: metrics.JSHeapUsedSize,
    });
  }

  await browser.close();

  // Analyze trend: if heap keeps growing, there may be a leak
  const first = results[0].jsHeapUsedSize;
  const last = results[results.length - 1].jsHeapUsedSize;
  const growth = (last - first) / first;

  return {
    leaked: growth > 0.1, // >10% growth considered a leak
    growthRate: `${(growth * 100).toFixed(1)}%`,
    details: results,
  };
}

// Usage
const result = await detectMemoryLeak(
  'http://localhost:3000',
  async (page) => {
    await page.click('#navigate-btn');
    await page.waitForSelector('#content');
    await page.click('#back-btn');
  },
  20
);

console.log(result);

CI-Integration

# .github/workflows/memory-check.yml
name: Memory Leak Check
on: [push]
jobs:
  memory-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build
      - run: node scripts/memory-leak-test.js

React-spezifisch: useEffect-Aufräum-Checkliste

function DataComponent({ id }) {
  useEffect(() => {
    const controller = new AbortController();
    const timer = setInterval(() => {}, 5000);
    const handler = () => {};
    window.addEventListener('resize', handler);
    const subscription = eventBus.subscribe('event', handler);

    return () => {
      controller.abort();        // Cancel request
      clearInterval(timer);      // Clear timer
      window.removeEventListener('resize', handler); // Remove listener
      subscription.unsubscribe(); // Unsubscribe
    };
  }, [id]);
}

Die Hilfe des React-18-Strict-Mode

Im React-18-Strict-Mode werden Komponenten doppelt gemountet und dann unmounted. Ist die useEffect-Aufräumung unvollständig, legt die Konsole das Problem sofort offen.

Best Practices

Jedes useEffect auf eine Aufräumfunktion prüfen
Globale Event-Listener zentral verwalten, beim Unmount gebündelt entfernen
Vermeiden, große Objekte in Closures zu erfassen, nur benötigte Werte übernehmen
WeakMap/WeakSet statt Map/Set für Objekt-Metadaten verwenden
Referenzen auf abgekoppelte DOM-Knoten auf null setzen
Memory-Leak-Erkennung in CI integrieren, um Regressionen zu verhindern
Heap-Snapshots regelmäßig vergleichen, besonders bei Routenwechsel-Szenarien
React-18-Strict-Mode für Double-Mount-Erkennung in der Entwicklung verwenden