Monitoreo de aplicaciones TypeScript: métricas y alertas

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Monitoreo de aplicaciones TypeScript: de métricas a alertas inteligentes

En el desarrollo moderno, escribir código es solo la mitad del trabajo. Es crítico entender cómo se comporta la aplicación en producción. Para proyectos TypeScript, ya sea un servidor en Node.js o un cliente en React, el monitoreo proactivo se convierte en un requisito obligatorio. En este artículo, analizaremos técnicas avanzadas de recolección de métricas, configuración de alertas y construcción de un sistema de observabilidad que te permitirá dormir tranquilo.

1. Métricas clave para aplicaciones TypeScript

Antes de configurar alertas, debemos definir qué medimos exactamente. Dividamos las métricas en tres grupos: infraestructura, negocio y usuario.

Métricas de infraestructura (metodología RED):

Rate — número de solicitudes por segundo (RPS).
Errors — porcentaje de errores (5xx, 4xx, rechazos no manejados).
Duration — tiempo de respuesta (p50, p95, p99).

Métricas de negocio:

Número de transacciones exitosas.
Tiempo de ejecución de operaciones críticas (por ejemplo, generación de informes).
Usuarios activos (DAU/MAU).

Métricas de usuario (para aplicaciones cliente):

LCP (Largest Contentful Paint) — velocidad de carga del contenido principal.
FID (First Input Delay) — retraso de la primera interacción.
CLS (Cumulative Layout Shift) — estabilidad del diseño visual.

Para recolectar estas métricas en TypeScript, usaremos la librería prom-client (para Node.js) y @opentelemetry/instrumentation-http.

2. Recolección de métricas con Prometheus y OpenTelemetry

Veamos un ejemplo de configuración de métricas para una aplicación Express en TypeScript. Instalemos los paquetes necesarios:

npm install prom-client @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-http @opentelemetry/instrumentation-express

Creemos el archivo metrics.ts para registrar las métricas:

import client from 'prom-client';

const collectDefaultMetrics = client.collectDefaultMetrics;collectDefaultMetrics({ timeout: 5000 });

export const httpRequestDuration = new client.Histogram({    name: 'http_request_duration_seconds',    help: 'Duration of HTTP requests in seconds',    labelNames: ['method', 'route', 'status_code'],    buckets: [0.01, 0.05, 0.1, 0.5, 1, 2, 5],});

export const errorCounter = new client.Counter({    name: 'http_errors_total',    help: 'Total number of HTTP errors',    labelNames: ['method', 'route', 'status_code'],});

Ahora integremos las métricas en un middleware:

import { Request, Response, NextFunction } from 'express';

export function metricsMiddleware(req: Request, res: Response, next: NextFunction) {    const end = httpRequestDuration.startTimer();    res.on('finish', () => {        end({ method: req.method, route: req.route?.path || 'unknown', status_code: res.statusCode.toString() });        if (res.statusCode >= 500) {            errorCounter.inc({ method: req.method, route: req.route?.path || 'unknown', status_code: res.statusCode.toString() });        }    });    next();}

Añadamos un endpoint para la recolección de métricas de Prometheus:

import { Router } from 'express';import client from 'prom-client';

const router = Router();router.get('/metrics', async (req, res) => {    res.set('Content-Type', client.register.contentType);    res.end(await client.register.metrics());});export default router;

Para aplicaciones cliente (React), usamos @opentelemetry/instrumentation-document-load para la recolección automática de Web Vitals.