Debugging con OpenCode: Cómo Encontrar y Solucionar Bugs Eficientemente
El debugging consume una parte significativa del tiempo de desarrollo. OpenCode puede acelerar este proceso dramáticamente al analizar el contexto completo del proyecto, identificar patrones de error y proponer soluciones basadas en el código existente.
Este tutorial asume que ya dominas el flujo Plan/Build y la configuración avanzada. Aquí nos enfocamos exclusivamente en debugging.
Debugging de Stack Traces
Análisis rápido de errores
Cuando encuentres un error, pega el stack trace completo en OpenCode:
Este error aparece al hacer login:
Error: Cannot read properties of undefined (reading 'id') at UserService.findById (src/services/UserService.ts:45:23) at AuthController.login (src/controllers/AuthController.ts:32:15) at POST /api/auth/login (src/routes/auth.ts:18:10)
Analiza @src/services/UserService.ts línea 45 y propón una solución.
OpenCode leerá el archivo, identificará la causa raíz y propondrá un fix:
typescript// Antes (línea 45) return user.id; // Después (propuesto por OpenCode) if (!user) { throw new NotFoundError('User not found'); } return user.id;
Errores asincrónicos
Los errores en código async son más difíciles de rastrear. OpenCode puede identificar patrones:
Tengo un race condition en @src/services/PaymentService.ts.
A veces la transacción se duplica. Busca patrones de async/await
que puedan causar esto.
OpenCode detectará problemas como:
- Falta de
awaiten promesas - Race conditions en operaciones concurrentes
- Manejo incorrecto de errores en
try/catch
Estrategia Sistemática de Debugging
Paso 1: Reproducción controlada
Antes de pedir ayuda a OpenCode, reproduce el error sistemáticamente:
[Plan Mode]
Contexto: El error ocurre cuando:
- El usuario tiene más de 100 transacciones
- Se filtra por fecha en el último mes
- Se exporta a CSV
Objetivo: Crear un test que reproduzca este error consistentemente.
OpenCode generará un test reproducible:
typescriptdescribe('TransactionExport', () => { it('should handle large datasets without error', async () => { // Given: 150 transacciones en el último mes const transactions = generateTransactions(150, 'last-month'); // When: Exportamos a CSV const result = await exportToCSV(transactions); // Then: No debería lanzar error expect(result).toBeDefined(); }); });
Paso 2: Aislamiento del problema
Usa OpenCode para aislar dónde ocurre el problema:
Añade logs de debug en @src/services/TransactionService.ts
en los puntos clave:
- Entrada al método exportToCSV
- Después de filtrar por fecha
- Antes de generar CSV
- Después de escribir archivo
Usa console.time() para medir rendimiento.
Paso 3: Identificación de root cause
Con los datos de los logs, pide a OpenCode que analice:
Basado en estos logs:
exportToCSV: start - 150 transactions filterByDate: after - 148 transactions generateCSV: start generateCSV: end - 2000ms writeFile: start Error: EMFILE: too many open files
¿Cuál es la root cause y cómo solucionarlo?
OpenCode identificará el problema (file descriptors no cerrados) y propondrá la solución.
Patrones Comunes de Bugs
1. Null/Undefined Access
typescript// Error común const user = users.find(u => u.id === id); console.log(user.name); // Crash si user es undefined
Pide a OpenCode:
Busca todos los accesos a propiedades en @src/services/ que
no verifiquen null/undefined antes. Usa type guards.
2. Type Mismatches
typescript// Error silencioso const amount: string = req.body.amount; const total = amount * 1.21; // NaN si amount no es número
Encuentra todas las asignaciones de tipos que puedan causar
coerción de tipos inesperada en @src/controllers/.
3. Memory Leaks
Analiza @src/components/DataTable.tsx por memory leaks:
- Event listeners no removidos
- Intervals no limpiados
- Closures retienen referencias grandes
Debugging de Build Errors
Errores de TypeScript
Este error de TypeScript no tiene sentido:
Type 'string' is not assignable to type 'number'.
El código está en @src/types/Transaction.ts línea 23.
Explica por qué TypeScript se queja y cómo arreglarlo.
Errores de Bundling
El build falla con:
Module not found: Can't resolve '@/components/Button'
Revisa el path alias en tsconfig.json y explica qué falta.
Debugging de Tests
Tests que fallan intermitentemente
Este test falla 1 de cada 10 veces:
@tests/integration/payment-flow.test.ts:45
Encuentra qué puede causar no-determinismo:
- Timing issues
- Dependencia de orden de ejecución
- Estado compartido entre tests
Mocks incorrectos
El test @tests/unit/UserService.test.ts no está testeando
la lógica real porque el mock está mal configurado.
Revisa el mock y corrígelo.
Debugging de Performance
Identificación de cuellos de botella
Analiza @src/lib/data-processor.ts por problemas de rendimiento:
- Operaciones O(n²) innecesarias
- Bucles anidados que pueden optimizarse
- Creación de objetos en loops
OpenCode propondrá optimizaciones como:
typescript// Antes: O(n²) for (const item of items) { for (const other of items) { if (item.id === other.parentId) { item.children = item.children || []; item.children.push(other); } } } // Después: O(n) con Map const map = new Map(items.map(i => [i.id, i])); for (const item of items) { if (map.has(item.parentId)) { const parent = map.get(item.parentId); parent.children = parent.children || []; parent.children.push(item); } }
Debugging de Estado Reactivo
Bugs en React
Este componente @src/components/UserForm.tsx no actualiza
el estado cuando el usuario escribe rápido. Busca:
- Falta de dependencias en useEffect
- Stale closures
- Actualización de estado basada en estado anterior
Bugs en State Management
El store de Zustand en @src/store/useStore.ts no refleja
los cambios correctamente. Busca:
- Mutación directa del estado
- Selector functions no memoizadas
- Acciones asíncronas sin manejo de loading
Debugging Remoto
Errores en producción
Cuando solo tienes logs de producción:
Este error ocurre en producción pero no local:
Error: Connection timeout at Database.connect (src/lib/db.ts:15:10)
Configuración local:
- DATABASE_URL: postgresql://localhost:5432/dev
- NODE_ENV: development
Configuración producción:
- DATABASE_URL: postgresql://prod-db.example.com:5432/prod
- NODE_ENV: production
¿Qué puede causar el timeout solo en producción?
OpenCode sugerirá:
- Configuración de timeout de conexión
- Problemas de red/firewall
- Diferencias en pool size
- SSL requirements
Workflows de Debugging Eficientes
Workflow 1: Error → Fix → Test
1. Pega el error en OpenCode
2. Pide que analice y proponga fix
3. [Plan Mode] Revisa el fix propuesto
4. [Build Mode] Aplica el fix
5. Pide que genere un test que prevenga regresión
Workflow 2: Log → Analyze → Optimize
1. Añade logs con ayuda de OpenCode
2. Reproduce el error
3. Pega los logs en OpenCode
4. Pide análisis de root cause
5. Implementa la solución propuesta
Workflow 3: Test → Debug → Refactor
1. Escribe un test que reproduzca el error
2. Ejecuta el test hasta que falle consistentemente
3. Pide a OpenCode que debuggee el test
4. Aplica el fix
5. Refactoriza para prevenir el problema
Errores Comunes al Debuggear con OpenCode
| Error | Causa | Solución |
|---|---|---|
| OpenCode no encuentra el error | Contexto insuficiente | Incluye stack trace completo y archivos relevantes con @ |
| Solución propuesta no funciona | Error mal descrito | Reproduce el error sistemáticamente antes de pedir ayuda |
| Fix introduce nuevos bugs | Cambio demasiado amplio | Usa Plan Mode para revisar antes de Build |
| Análisis genérico | Falta de logs específicos | Añade logs de debug antes de consultar |
Debugging Proactivo: Prevenir Bugs
Análisis estático con OpenCode
Revisa @src/ buscando patrones propensos a errores:
- == en lugar de ===
- var en lugar de const/let
- any types
- console.log en producción
Code review asistido
Antes de mergear:
Revisa este PR buscando bugs potenciales:
- Race conditions
- Memory leaks
- Type safety issues
- Edge cases no manejados
Archivos: @src/services/PaymentService.ts @src/api/payments.ts
Conclusión
El debugging efectivo con OpenCode requiere:
- Contexto claro: stack traces, logs, archivos específicos
- Reproducción sistemática: tests que fallen consistentemente
- Plan antes de Build: revisar soluciones antes de aplicar
- Tests de regresión: prevenir que el bug vuelva
En Binary Core, redujimos el tiempo de debugging en un 60% después de adoptar OpenCode sistemáticamente. La clave no es solo usar la herramienta, sino usarla con disciplina: reproducir, aislar, analizar, fixear, testear.
¿Listo para el siguiente nivel? Aprende a usar OpenCode para refactors seguros de código legacy.
Serie completa:
- Instalación y primeros pasos
- Flujo de trabajo Plan/Build
- Configuración avanzada
- Debugging (este artículo)
Binary Core
Equipo Binary Core