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 • Equip 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?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Intel·ligència artificial

Agents d'IA, chatbots i assistents intel·ligents que automatitzen tasques i atenen els teus clients 24/7 per millorar l'eficiència del teu negoci.

Més info

Desenvolupament de programari

Aplicacions web, mòbils i d'escriptori, intranets, e-commerce, SaaS i plataformes de gestió dissenyades per a les necessitats concretes de la teva empresa.

Més info

Serveis cloud

Migració, infraestructura, hosting gestionat, alta disponibilitat i seguretat en Microsoft Azure i Amazon Web Services perquè el teu negoci escali sense límits.

Més info

Ciberseguretat i pentesting

Auditories de seguretat, test d'intrusió (pentesting) i protecció d'aplicacions, dades i infraestructura on-premise i cloud, amb hacking ètic i compliment normatiu.

Més info

Business Intelligence

Quadres de comandament i anàlisi de dades amb Power BI: integrem les teves fonts, dissenyem dashboards i KPIs i convertim les teves dades en decisions.

Més info

Automatització de processos

Automatitzem tasques repetitives i connectem les teves aplicacions amb n8n, Power Automate, Make i RPA, eliminant treball manual i augmentant la productivitat.

Més info

Formació per a empreses

Formem els teus equips en tecnologia amb criteri: desenvolupament web, bases de dades, Git, bones pràctiques i seguretat, automatització amb n8n, intel·ligència artificial per a empreses i creació de solucions d'IA amb Azure AI Foundry.

Més info

Auditoria de codi

Auditem el codi que creguis tu, el teu equip o una IA: et diem què està bé i què millorar, el securitzem i el deixem llest per a producció, web o app.

Més info

Generació d'imatges amb IA

Creem per tu les imatges que necessita el teu negoci amb intel·ligència artificial: producte, xarxes, publicitat, il·lustració i avatars. Tu ens dius què vols i t'ho lliurem llest per fer servir.

Més info

Generació de vídeos amb IA

Creem per tu vídeos amb intel·ligència artificial: promocionals, per a xarxes, presentadors virtuals, doblatge i animacions. Ens comptes la idea i t'ho lliurem muntat i llest per publicar.

Més info

Avatars conversacionals amb IA

Creem avatars conversacionals amb IA —humans digitals amb cara i veu— que atenen els teus clients i equips amb el coneixement de la teva empresa, a la teva web, monitors interactius, WhatsApp o Teams.

Més info

Màrqueting Online i IA

Google Ads, Meta Ads, LinkedIn Ads i posicionament en motors d'IA (GEO/AEO): captem clients i fem que la teva marca aparegui on et busquen, també a ChatGPT, Gemini i Perplexity.

Més info

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.

Live Chat