Error logging personalizado sin herramientas externas

Implementar un sistema de error logging personalizado en tu aplicación te permite registrar fallos específicos en una tabla propia, ideal para desarrolladores que usan Lovable y quieren ir más allá de las herramientas analíticas estándar. Aquí aprendes a construirlo paso a paso, con tablas, edge functions y un panel de administración para revisar errores en tiempo real.

¿Por qué construir un sistema de error logging personalizado?

Las herramientas analíticas listas para usar cubren lo básico, pero no siempre se adaptan a tu flujo de trabajo. Cuando necesitas ver exactamente por qué un usuario falló al subir una foto o por qué tu aplicación se rompió en cierto punto, una tabla de errores propia te da control total.

En el caso de esta app, el objetivo es claro: si alguien tiene un error mientras sube una foto, ese error debe quedar registrado en una tabla con detalles suficientes para entender qué pasó y a quién le pasó.

¿Qué es el error logging personalizado? Es el proceso de registrar fallos de tu aplicación en una base de datos propia, controlando qué datos guardas y cómo los consultas, en lugar de depender de una herramienta externa.

¿Cómo planificar la estructura de logs antes de codear?

Antes de tocar código, conviene usar el chat mode de Lovable para que arme un plan. Esto evita cambios masivos posteriores y aprovecha que el LLM a veces conoce mejores prácticas de la industria que tú [01:30].

El plan que sugiere Lovable incluye varios elementos clave que vale la pena revisar antes de implementar:

• Crear una tabla error_logs para almacenar la información cuando algo falla.
• Guardar el user_id para saber a quién contactar si es necesario.
• Clasificar errores por tipo: subida de fotos, subida de archivos, renombrado con IA y renombrado manual.
• Registrar el mensaje de error, los detalles y la información del archivo involucrado.
• Crear una utilidad de logging que centralice cómo se envían los errores a la base de datos.
• Añadir el reporte de errores a las edge functions, donde vive la lógica principal.

¿Qué pasa si dejas el logging para el final?

Una lección importante: agregar error logging después de tener la app construida obliga a Lovable a editar muchísimos archivos a la vez [03:50]. Cuanto más grande es el cambio, más probable es que la IA se equivoque.

La recomendación práctica es configurar tu infraestructura de logging desde el inicio del proyecto, junto con la estructura base de la app, no después.

¿Cómo probar que el sistema de logging funciona?

Una vez implementada la tabla y la utilidad, necesitas forzar un error para ver si efectivamente se registra. Lovable puede darte comandos de consola para ejecutar directamente en el navegador.

El proceso para probarlo en el preview link es sencillo:

1. Abre el preview link de tu aplicación, no la versión desplegada en Vercel, para asegurar que estás en la última versión.
2. Haz clic derecho y selecciona Inspect en Chrome.
3. Ve a la pestaña Console dentro de las developer tools.
4. Pega el código que Lovable te entregó y presiona enter.
5. Refresca la tabla de logs y verifica si el error se registró.

¿Qué es la consola del navegador? Es una herramienta dentro de los developer tools de Chrome donde puedes ejecutar código JavaScript que afecta directamente a tu aplicación en tiempo real.

¿Y si el comando de consola no funciona?

A veces el código no logra disparar el error correctamente. La solución no es rendirse: copia el resultado de vuelta al chat de Lovable y deja que itere hasta darte la versión correcta. Si la clase apremia, una alternativa rápida es pedirle a Lovable que agregue un botón de prueba directamente en el panel de administración [08:30].

Un prompt útil para esto es: agrega un botón de prueba a la tabla de error logs en el dashboard de admin que use nuestro sistema de errores actual.

¿Cómo gestionar los errores desde un panel de administración?

El resultado final es una tabla de errores robusta dentro del propio admin panel, con funciones que normalmente solo verías en herramientas externas. Lovable suele añadir:

• Un botón para marcar bugs como resueltos.
• La opción de eliminar errores ya solucionados.
• Filtros por tipo de error (uploads, AI photo renaming, etc.).
• Acceso directo al user_id afectado.

Esto significa que puedes darle acceso de admin a tu equipo y dejar que arreglen los bugs directamente desde los reportes en Lovable, sin necesidad de integrar una herramienta de analytics compleja.

¿Por qué usar edge functions para registrar errores? Porque ahí vive la lógica principal de operaciones como subir y renombrar archivos. Capturar errores en ese punto te da el detalle más cercano a la falla real.

La belleza de Lovable es que puedes construir pequeñas herramientas internas, botones, tablas o cuadros de texto, para resolver necesidades muy específicas de tu workflow. Tu imaginación es el límite. Con el sistema de logging cubierto, el siguiente paso natural es asegurar que tus analytics generales estén listos para escalar, integrando algo como PostHog.

¿Tú prefieres construir tu propio sistema de logging o apoyarte en herramientas externas? Cuéntame en los comentarios.