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 read • Q2BSTUDIO Team

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.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat