Rastreador de Flujo Async

El Problema

El codigo asincrono se ejecuta en un orden que desafia la lectura linea por linea. Una funcion retorna antes de que su trabajo este hecho, un callback se dispara despues de que el scope circundante cambio, un promise se resuelve pero nadie atrapa su error. El modelo mental requerido para rastrear ejecucion asincrona es fundamentalmente diferente al codigo sincrono, y la mayoria de herramientas de depuracion fueron disenadas para ejecucion secuencial.

El Prompt

Eres un analista de ejecucion asincrona. Rastrea el orden de ejecucion y encuentra el bug en este codigo async:

CODIGO:
[pega tu codigo asincrono — promises, callbacks, async/await, event listeners]

RUNTIME: [Node.js event loop / browser main thread / Web Worker / Python asyncio]
SINTOMA DEL BUG: [ej. "callback dispara con datos obsoletos", "promise rejection no manejada", "operaciones en orden incorrecto"]

Realiza analisis de flujo asincrono:
1. **Trace de Orden de Ejecucion**: Numera cada operacion en el orden REAL de ejecucion (no el orden en codigo). Para cada paso, nota si corre en el tick actual, microtask queue, macrotask queue o hilo separado.
2. **Grafo de Cadena de Promises**: Visualiza el arbol de dependencias — que promises dependen de cuales? Donde se rompe la cadena?
3. **Snapshot de Closures**: Para cada callback/closure, captura que variables cierra y sus valores AL MOMENTO QUE EL CALLBACK SE EJECUTA.
4. **Ruta de Propagacion de Errores**: Rastrea a donde van los errores — son atrapados, tragados, o caen al vacio?
5. **El Bug de Timing**: Muestra el momento exacto donde el orden real diverge del orden que el desarrollador pretendia.
6. **Fix con Garantia**: Proporciona el codigo corregido que garantiza el orden de ejecucion deseado.

Ejemplo de Salida

Orden de ejecucion: 1. forEach inicia → 2. fetch() dispara (macrotask encolado) → 3. forEach completa → 4. setState([]) se ejecuta → 5. Primer fetch resuelve → 6. setState con datos sobreescribe array vacio
Bug: Array.forEach con callbacks async — forEach no espera. Todos los fetches disparan simultaneamente.
Problema de closure: El array `results` es compartido y mutado por todos los callbacks concurrentemente
Fix: Usar Promise.all(items.map(async (item) => fetch(item.url))) para esperar correctamente todas las operaciones paralelas

Cuando Usar

Usa este skill cuando el codigo async produce un orden de ejecucion inesperado, cuando los datos parecen obsoletos en callbacks, cuando promises fallan silenciosamente, o cuando await no parece esperar. Critico para depurar cadenas de middleware en Node.js y races de cleanup en useEffect de React.

Tips Pro

• async forEach no hace lo que piensas — array.forEach(async fn) dispara todos los callbacks simultaneamente y no espera ninguno. Usa for...of con await para secuencial, o Promise.all(array.map(fn)) para paralelo.
• Microtasks se ejecutan antes que macrotasks — Promise.then() siempre corre antes que setTimeout(fn, 0).
• Usa Promise.allSettled en vez de Promise.all — all rechaza al primer fallo y se traga los demas resultados. allSettled espera todo y reporta todos los resultados.
• La trampa del async IIFE — llamar una funcion async sin await retorna un promise que nadie maneja. Si rechaza, el error desaparece silenciosamente.