Solución de registro frontend flexible y extensible

Awesome-logger es una herramienta de logging para frontend con campos estandarizados y arquitectura de plugins, que facilita la recolección, envío y análisis de logs en tiempo real para observabilidad.

3 sept 2025 • 5 min de lectura • Equipo Q2BSTUDIO

Inteligencia-Artificial-

awesome-logger es una herramienta de logging eficiente para frontend que prioriza flexibilidad, extensibilidad y una gran experiencia de desarrollador. Con campos estandarizados incorporados, arquitectura basada en plugins y gestión multidimensional del registro, permite implementar recolección, envío y análisis de logs con rapidez, mejorando la estabilidad de las aplicaciones y acelerando la resolución de incidencias.

Casos de uso

Localizar problemas de usuarios con rapidez. Ventaja central: campos como os, device y ua capturan el contexto completo de forma automática. Escenario típico: cuando un usuario reporta anomalías, se filtran logs en tiempo real para detectar dispositivo y ruta de operación en segundos.

Monitoreo de salud de la aplicación. Ventaja central: niveles info, warn y error que facilitan tableros de estabilidad. Escenario típico: seguimiento en tiempo real de errores de API o fugas de memoria para anticipar riesgos.

Reporte homogéneo a múltiples sistemas. Ventaja central: arquitectura de plugins con integración simultánea hacia varios servicios. Escenario típico: despliegues multicloud o transición entre plataformas de logging enviando una sola vez a varios destinos.

Extensiones de log personalizadas. Ventaja central: interfaz LogPlugin para personalizar lógica de envío, cifrado o integración con sistemas privados. Escenario típico: despliegues corporativos con información sensible en sectores como finanzas o salud.

Eficiencia y estandarización. Ventaja central: plugins listos para usar que permiten iniciar en pocas líneas de configuración, reduciendo desarrollo de infraestructura en startups y equipos ágiles.

Ventajas clave

Campos estandarizados incorporados para diagnóstico eficiente. Con campos como os, device y ua se recoge contexto completo sin desarrollo adicional, acelerando el hallazgo de causas raíz.

Configuración flexible de campos base con consulta en tiempo real. Puedes añadir uid, env u otros campos globales que se adjuntan a cada log, facilitando filtros y búsquedas precisas.

Gestión multinivel del log para salud de la aplicación. Los niveles info, warn y error ayudan a clasificar, priorizar y detectar anomalías de forma inmediata.

Arquitectura basada en plugins para integrarse con cualquier servicio. Existen plugins para servicios populares y la posibilidad de crear plugins propios para sistemas privados o de terceros.

Diseño de arquitectura

Capa Core @awesome-logger/core. Clase Logger para generar logs, controlar niveles y registrar plugins, con métodos info, warn y error, y soporte de campos base. Clase abstracta LogPlugin que define la especificación de plugins mediante el método sendLog para enviar datos al servicio destino.

Capa de Plugins @awesome-logger/plugin-*. Implementaciones concretas para servicios de logging, por ejemplo un plugin para SLS. El desarrollador puede crear plugins propios siguiendo la especificación.

Capa de Uso @awesome-logger/client. Clase Client que encapsula la lógica para simplificar la integración, permite registrar plugins con usePlugin y ofrece una interfaz unificada de logging.

Inicio rápido

Instalación. Ejecuta npm install de los paquetes client, core y el plugin que prefieras.

Inicialización. Crea el Logger con campos base como uid, release y env. Si necesitas escenarios asíncronos, actualiza campos con setBaseField. Crea el Client con el logger y registra el plugin que usarás. En el caso de un plugin que envía por lotes, configura host, proyecto, logstore y parámetros de lote como count y time.

Envío de logs. Usa info para eventos de navegación o métricas informativas, warn para latencias, timeouts o estados inesperados, y error para fallos de API con códigos de error y endpoint.

Envío a un servicio de logs. Antes de usar servicios gestionados crea la cuenta, activa el servicio de logging, crea proyecto y logstore, habilita la opción de web tracking si aplica, y tras reportar algunos registros crea índices para búsqueda eficiente.

Desarrollo de plugins personalizados

Crea una clase que extienda LogPlugin e implementa sendLog con tu lógica de reporte, por ejemplo llamando a un endpoint corporativo y aplicando cifrado. Registra tu plugin en Client con usePlugin y comienza a enviar info, warn o error con tus claves y datos.

Campos de log incorporados

uid identificador de usuario

release versión de la aplicación frontend

env entorno local pre prod

type nivel de log info warn error

key clave del log para identificar el evento

data datos adicionales del evento en forma de objeto

ua información de agente de usuario del navegador

url dirección completa de la página actual

os sistema operativo del dispositivo

osVersion versión del sistema operativo

traceId identificador de seguimiento acordado entre frontend y backend

sessionId identificador de sesión para agrupar eventos

browser nombre del navegador como Chrome o Safari

browserVersion versión del navegador

container contenedor donde corre la página por ejemplo navegador o superapp

device tipo de dispositivo como móvil o escritorio

clientTime marca de tiempo generada en el cliente

Cómo encaja Q2BSTUDIO en tu estrategia

En Q2BSTUDIO diseñamos e implantamos soluciones de observabilidad y logging que se integran con tus pipelines de despliegue y analítica, alineadas con buenas prácticas de seguridad y cumplimiento. Nuestro equipo desarrolla aplicaciones a medida y software a medida con enfoque en calidad, escalabilidad y observabilidad de extremo a extremo. Conocemos los retos modernos de ia para empresas, agentes IA, ciberseguridad y servicios cloud aws y azure, y combinamos estas disciplinas para que tu plataforma sea estable, segura y medible desde el primer día.

Si tu producto requiere trazabilidad avanzada, analítica y cuadros de mando, podemos unificar logs, métricas y eventos de negocio y conectarlos con herramientas de servicios inteligencia de negocio y power bi para que tu equipo tome decisiones con datos reales. Descubre cómo aceleramos tu roadmap en desarrollo de aplicaciones y software multiplataforma y cómo desplegamos y operamos estas soluciones en la nube con servicios cloud en AWS y Azure.

Conclusión

Con awesome-logger obtienes un sistema de logging estandarizado, observable y flexible para frontend que reduce el tiempo de diagnóstico, simplifica la integración con múltiples plataformas y permite extender el envío de eventos a tus necesidades específicas. Si buscas llevar tu observabilidad al siguiente nivel, Q2BSTUDIO puede ayudarte a diseñar, construir e integrar una solución integral que combine logging, inteligencia artificial, ciberseguridad y analítica con power bi, todo dentro de una arquitectura moderna y preparada para crecer.

¿UNA PAUSA?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.

Live Chat