Herramienta de Análisis

Analizador de Logs JSON para Flujo Documental

Convierte logs operacionales en métricas claras para detectar esperas, bloqueos y tiempos de procesamiento. Importación local de archivos JSON, reconstrucción de ciclos y reportes visuales — todo cerrado en el navegador.

Hablemos Volver al Portfolio
Dashboard del analizador con KPIs, gráfico de eventos y distribución de estados
El Desafío

De Logs Opacos a Diagnóstico Accionable

Una plataforma documental genera cientos de eventos por documento durante el flujo de extracción. Cada evento queda registrado en un log JSON con su marca temporal.

El problema es que esos logs son opacos: cientos de líneas donde es imposible ver cuánto tiempo pasa cada documento esperando, qué actividad está reteniendo el flujo, o cuánto tarda un documento en llegar a validación.

Antes

  • Logs JSON sin visualización ni métricas
  • Cuellos de botella imposibles de detectar
  • Tiempo de espera y bloqueo invisible
  • Lead Time desconocido
  • Análisis limitado a un archivo a la vez
La Solución

Diagnóstico de Trazas con Precisión Estadística

Importación JSON

Carga de archivos de log con normalización de eventos y reconstrucción automática de ciclos.

Detección de Cuellos

Identifica actividades donde espera más bloqueo supera el procesamiento activo, con severidad.

Análisis Multi-Archivo

Compara N archivos simultáneamente. Mediana, P90, P95 y detección de outliers.

Reportes Accionables

Resumen ejecutivo, recomendaciones priorizadas y reportes exportables por archivo.

Funcionalidades

El Analizador en Acción

Dashboard con KPIs en Tiempo Real

Panel principal con indicadores clave: eventos totales, duración total, duración promedio y actividad más lenta. Gráficos de línea, barras y dona.

Chart.js KPI Cards Tiempo real
Dashboard con KPIs, gráficos y tabla de monitor

Detección de Cuellos de Botella

Clasifica automáticamente actividades que exceden 1.5x la duración promedio como cuellos de botella, asignando severidad alta cuando superan el doble.

Ranking de Severidad P90 / P95 Detección de Outliers
Vista de cuellos de botella con ranking de actividades lentas
Proceso de Desarrollo

Cómo se Construyó

Arquitectura MVC en Vanilla JS

La aplicación separa responsabilidades en tres capas con clases ES6 puras, sin framework ni biblioteca de routing. Cada capa se carga como un <script> independiente y puede razonarse por separado.

Model Layer 5 archivos · 1,512 líneas

JsonParser · AuditAnalyzer · TimeCalculator · ReportGenerator · MultiReportAnalyzer

View Layer 3 archivos · 514 líneas

KPICard · ActivityTable · ChartComponent

Controller Layer 4 archivos · 1,330 líneas

AuditController · DashboardController · ReportController · MultiReportController

Patrón central: AuditAnalyzer.buildCyclesByActivity() — una máquina de estados que reconstruye ciclos Waiting → Locked → Processing → Released a partir de eventos desordenados por timestamp. El patrón permite agrupar, medir y detectar cuellos de botella incluso cuando los eventos llegan fuera de secuencia.

Flujo de Datos

Desde que el usuario arrastra un archivo hasta que aparece el dashboard, los datos atraviesan seis etapas secuenciales sin salir del navegador.

1
JSON Upload — Drag-and-drop o selector de archivos. El FileReader lee el contenido localmente.
2
Parse — JsonParser normaliza eventos con flexibilidad camelCase y PascalCase.
3
Analyze — AuditAnalyzer agrupa eventos por actividad, detecta ciclos y calcula métricas.
4
Measure — TimeCalculator computa duraciones, cuellos de botella y percentiles P90/P95.
5
Report — ReportGenerator produce resumen ejecutivo con recomendaciones priorizadas.
6
Render — Dashboard renderiza KPIs, gráficos (línea, barra, dona) y tablas interactivas con Chart.js.

Decisiones Técnicas

Sin Build Tools

Vanilla JS con <script> tags. Zero npm, zero bundler, zero config. Cualquier navegador abre el archivo y funciona. Deploy = copiar al servidor.

Zero Build Zero npm Zero Config

MVC Sin Framework

Clases ES6 puras con separación estricta por responsabilidad. Cada capa es testeable de forma independiente sin mockear el DOM.

ES6 Classes Separation of Concerns Testable

Cycle Detection

Máquina de estados que reconstruye ciclos Waiting → Locked → Processing → Released desde eventos desordenados. Detecta ciclos incompletos y calcula duración real por fase.

State Machine Event Ordering Phase Duration

Multi-JSON Aggregation

Compara N archivos de auditoría con percentiles P90/P95, mediana y detección de outliers. Identifica patrones de degradación entre ejecuciones.

Percentiles Median Outlier Detection
2,554
Líneas JS
15
Archivos Fuente
6
Tipos de Gráficas
0
Dependencias Build
24
JSONs de Muestra Real
Galería
Pantalla de carga de archivos JSON con zona drag-and-drop

01 — Carga de archivos JSON con zona drag-and-drop

Tabla de actividades con duraciones y badges de estado

03 — Tabla de actividades con duraciones y estados

Reporte de análisis con resumen ejecutivo y recomendaciones

05 — Reporte ejecutivo con métricas y recomendaciones

Diagrama de pipeline de procesamiento de datos

06 — Pipeline de procesamiento de extremo a extremo

Stack Tecnológico

Herramientas del Proyecto

Frontend

JavaScript ES6+ Chart.js Bootstrap HTML5 CSS3

Arquitectura

MVC Vanilla JS Clases ES6 Component Architecture Sin Framework

Análisis

Máquina de Estados Reconstrucción de Ciclos Percentiles Detección de Outliers

Sin Dependencias

Zero Build Zero npm Zero Server 100% Client-Side

¿Necesitas convertir logs en decisiones operativas?

Este analizador transforma trazas JSON en diagnóstico accionable. Hablemos de cómo aplicar métricas a tu flujo de extracción documental.

Hablemos Ver Otros Proyectos