Lectura de logs para diagnosticar errores en aplicaciones web

Diagnostica y corrige errores con confianza leyendo logs de principio a fin. Aquí verás cómo aislar un fallo real en una edge function de Supabase que devolvía código 500, interpretar “Missing required environment variables”, y usar Lovable para añadir logging y cerrar el ciclo con un redeploy efectivo.

¿Cómo leer logs en Chrome y Supabase para aislar la causa?

Antes de pedir cambios, valida señales objetivas. La ruta más corta combina consola del navegador y panel de Supabase.

¿Qué hacer en la consola de Chrome para ver solo errores?

• Abre Inspect y entra a la consola.
• Filtra por errores con el menú desplegable de nivel de log.
• Copia el error exacto y compártelo con Lovable para dar contexto.

¿Qué revela un 500 en una edge function específica?

• Un 500 indica un fallo servidor en la ruta llamada.
• Si el error menciona la edge function “AI photo rename”, ve directo a esa función en Supabase.
• Revisa los logs de la función para el mensaje raíz.

¿Por qué “Missing required environment variables” apunta a secrets?

• Suele significar que una variable sensible no se está leyendo.
• Verifica el vault de secretos en Supabase y confirma que esté definido.
• Si está definido pero falla la carga, sospecha de despliegue desactualizado o caché.

¿Cómo usar Lovable para añadir logging y resolver fallos?

Aprovecha Lovable para instrumentar y acelerar el diagnóstico sin adivinar.

¿Qué pedir a Lovable para mejorar el diagnóstico?

• Solicita “añade más logs para identificar qué variable no se carga”.
• Ejecuta en modo edición directa y reproduce el error.
• Revisa nuevamente los logs de la edge function para ver la clave concreta que falla.

¿Cómo confirmar el origen cuando falla una AI API key?

• Si los logs muestran que no se carga la AI API key, revisa que el secreto exista.
• Si el secreto está en el vault, informa a Lovable: “existe, pero no se lee”.
• Pide verificar lectura de envs en el código y estado del despliegue.

¿Cuándo revisar caché o hacer redeploy de la edge function?

• Si Lovable detecta posible caché o función no subida, aplica su plan de redeploy.
• Actualiza la clave si es necesario y vuelve a desplegar.
• Valida funcionalidad: al renombrar una foto por IA, el nombre debe reflejar el contenido.

¿Qué habilidades y conceptos fortaleces para tu flujo de debugging?

Construye un método repetible para no quedarte atascado.

• Lectura de logs en cliente: consola de Chrome y filtro de errores.
• Aislamiento de fallos 500: identifica la edge function exacta afectada.
• Uso de logs de Supabase: inspección directa en la sección de edge functions.
• Manejo de variables de entorno: interpretación de “Missing required environment variables”.
• Gestión de secretos: verificación en el vault y coherencia con el código.
• Instrumentación con logging: pedir a Lovable que añada debug logs para ver el flujo real.
• Estrategias de despliegue: detectar caché y ejecutar redeploy cuando corresponda.
• Contextualización efectiva: compartir con Lovable el error literal para propuestas precisas.
• Operaciones prácticas: lectura de logs y, cuando aplique, impersonación de usuarios para reproducir casos.

¿Tienes una situación similar o un mensaje de error que no cede? Cuéntalo en los comentarios y trabajamos el diagnóstico paso a paso.