Surveillance des applications TypeScript : métriques et alertes

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Surveillance des applications TypeScript : des métriques aux alertes intelligentes

Dans le développement moderne, écrire du code n'est que la moitié du travail. Il est crucial de comprendre comment l'application se comporte en production. Pour les projets TypeScript, qu'il s'agisse d'un serveur Node.js ou d'un client React, une surveillance proactive devient une exigence obligatoire. Dans cet article, nous aborderons les techniques avancées de collecte de métriques, de configuration d'alertes et de construction d'un système d'observabilité qui vous permettra de dormir tranquille.

1. Métriques clés pour les applications TypeScript

Avant de configurer des alertes, il faut définir ce que nous mesurons exactement. Divisons les métriques en trois groupes : infrastructurelles, métier et utilisateur.

Métriques infrastructurelles (méthodologie RED) :

Rate — nombre de requêtes par seconde (RPS).
Errors — pourcentage d'erreurs (5xx, 4xx, rejets non gérés).
Duration — temps de réponse (p50, p95, p99).

Métriques métier :

Nombre de transactions réussies.
Temps d'exécution des opérations critiques (par exemple, génération de rapport).
Utilisateurs actifs (DAU/MAU).

Métriques utilisateur (pour les applications clientes) :

LCP (Largest Contentful Paint) — vitesse de chargement du contenu principal.
FID (First Input Delay) — délai de la première interaction.
CLS (Cumulative Layout Shift) — stabilité de la mise en page visuelle.

Pour collecter ces métriques en TypeScript, nous utiliserons la bibliothèque prom-client (pour Node.js) et @opentelemetry/instrumentation-http.

2. Collecte de métriques avec Prometheus et OpenTelemetry

Considérons un exemple de configuration de métriques pour une application Express en TypeScript. Installons les paquets nécessaires :

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

Créons un fichier metrics.ts pour enregistrer les métriques :

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'],});

Intégrons maintenant les métriques dans 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();}

Ajoutons un endpoint pour la collecte des métriques 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;

Pour les applications clientes (React), nous utilisons @opentelemetry/instrumentation-document-load pour la collecte automatique des Web Vitals.