Async-Fluss-Verfolger

Das Problem

Asynchroner Code wird in einer Reihenfolge ausgefuehrt, die der zeilenweisen Lesung widerspricht. Eine Funktion gibt zurueck, bevor ihre Arbeit erledigt ist, ein Callback feuert, nachdem sich der umgebende Scope geaendert hat, ein Promise wird aufgeloest, aber niemand faengt seinen Fehler. Das mentale Modell fuer asynchrone Ausfuehrung unterscheidet sich grundlegend von synchronem Code, und die meisten Debugging-Tools wurden fuer sequentielle Ausfuehrung konzipiert.

Der Prompt

Du bist ein Analyst fuer asynchrone Ausfuehrung. Verfolge die Ausfuehrungsreihenfolge und finde den Fehler in diesem asynchronen Code:

CODE:
[asynchronen Code einfuegen — Promises, Callbacks, Async/Await, Event-Listener]

RUNTIME: [Node.js Event Loop / Browser Main Thread / Web Worker / Python asyncio]
FEHLERSYMPTOM: [z.B. "Callback feuert mit veralteten Daten", "unbehandeltes Promise Rejection", "Operationen in falscher Reihenfolge"]

Fuehre eine Async-Fluss-Analyse durch:
1. **Ausfuehrungsreihenfolge**: Nummeriere jede Operation in der TATSAECHLICHEN Reihenfolge (nicht Code-Reihenfolge). Fuer jeden Schritt notieren, ob er im aktuellen Tick, der Microtask-Queue, der Macrotask-Queue oder einem separaten Thread laeuft.
2. **Promise-Ketten-Graph**: Die Promise-Abhaengigkeitsstruktur visualisieren — welche Promises haengen von welchen ab? Wo bricht die Kette?
3. **Closure-Snapshot**: Fuer jeden Callback/jede Closure auflisten, welche Variablen eingefangen werden und deren Werte ZUM ZEITPUNKT DER AUSFUEHRUNG.
4. **Fehlerausbreitungspfad**: Verfolgen, wohin Fehler gehen — gefangen, verschluckt oder ins Leere gefallen?
5. **Der Timing-Fehler**: Den exakten Moment zeigen, an dem die tatsaechliche Reihenfolge von der beabsichtigten abweicht.
6. **Fix mit Garantie**: Korrigierten Code liefern, der die beabsichtigte Reihenfolge garantiert.

Beispiel-Ausgabe

Ausfuehrungsreihenfolge: 1. forEach startet → 2. fetch() feuert (Macrotask eingereiht) → 3. forEach beendet → 4. setState([]) → 5. Erster fetch loest auf → 6. setState mit Daten ueberschreibt leeres Array
Fehler: Array.forEach mit async Callbacks — forEach wartet nicht. Alle Fetches feuern gleichzeitig.
Closure-Problem: `results`-Array wird geteilt und von allen Callbacks gleichzeitig mutiert
Fix: Promise.all(items.map(async (item) => fetch(item.url))) verwenden, um alle parallelen Operationen korrekt abzuwarten

Wann verwenden

Diesen Skill einsetzen bei unerwarteter Ausfuehrungsreihenfolge in asynchronem Code, veralteten Daten in Callbacks, still scheiternden Promises, oder wenn await nicht zu warten scheint. Kritisch fuer Node.js-Middleware-Ketten und React-useEffect-Cleanup-Races.

Profi-Tipps

• async forEach tut nicht, was man denkt — array.forEach(async fn) feuert alle Callbacks gleichzeitig und wartet auf keinen. for...of mit await fuer sequentielle oder Promise.all(array.map(fn)) fuer parallele Ausfuehrung verwenden.
• Microtasks vor Macrotasks — Promise.then() (Microtask) laeuft immer vor setTimeout(fn, 0) (Macrotask).
• Promise.allSettled statt Promise.all — all lehnt beim ersten Fehler ab und verschluckt andere Ergebnisse. allSettled wartet auf alles.
• Die async-IIFE-Falle — eine async-Funktion ohne await aufrufen gibt ein Promise zurueck, das niemand behandelt. Bei Rejection verschwindet der Fehler still.