Surveillance des applications TypeScript : outils et bibliothèques

Surveillance des applications TypeScript : du diagnostic à l'observabilité

Le développement en TypeScript couvre aujourd'hui à la fois le côté serveur (Node.js, Deno, Bun) et le côté client (React, Angular, Vue). Cependant, plus l'application est complexe, plus il est important de comprendre ce qui se passe en production. La surveillance des applications TypeScript n'est pas seulement une collecte de logs, mais un système complet d'observabilité, incluant métriques, traçage et alertes. Dans cet article, nous analyserons les bibliothèques et approches clés pour configurer la surveillance.

Pourquoi TypeScript nécessite une approche particulière

TypeScript est compilé en JavaScript, donc les outils standard pour JS fonctionnent également avec TS. Cependant, il y a des nuances :

• La pile d'erreurs peut pointer vers le code compilé, et non vers le TS source.
• Les source maps sont obligatoires pour un traçage correct des erreurs.
• Le typage permet d'annoter plus précisément les métriques et les spans.

1. Sentry — le roi des erreurs pour le frontend et le backend

Sentry est la plateforme la plus populaire pour le suivi des erreurs et des performances. Pour TypeScript, il existe un SDK officiel.

Installation :

npm install @sentry/node @sentry/tracing# ou pour React :npm install @sentry/react @sentry/tracing

Exemple pour Node.js :

import * as Sentry from "@sentry/node";import { ProfilingIntegration } from "@sentry/profiling-node";

Sentry.init({  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",  integrations: [new ProfilingIntegration()],  tracesSampleRate: 1.0,  profilesSampleRate: 1.0, // profilage});

// Capture automatique des erreursapp.get("/api/data", async (req, res) => {  try {    const data = await fetchData();    res.json(data);  } catch (err) {    Sentry.captureException(err);    res.status(500).send("Error");  }});

Particularités pour TypeScript :

• Prise en charge des source maps : chargez-les via sentry-cli ou le plugin webpack.
• Typage : le SDK exporte les types pour toutes les méthodes.
• Profilage : permet de voir quelles fonctions ralentissent.

2. OpenTelemetry — le standard universel d'observabilité

OpenTelemetry (OTel) est un ensemble d'API et de SDK pour collecter traces, métriques et logs. Idéal pour les microservices en TypeScript.

Installation :

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

Exemple de configuration du traçage :

import { NodeSDK } from "@opentelemetry/sdk-node";import { ConsoleSpanExporter } from "@opentelemetry/sdk-trace-node";import { getNodeAutoInstrumentations } from "@opentelemetry/auto-instrumentations-node";

const sdk = new NodeSDK({  traceExporter: new ConsoleSpanExporter(),  instrumentations: [getNodeAutoInstrumentations()],});

sdk.start();

// Applicationimport express from "express";const app = express();app.get("/", (req, res) => {  res.send("Hello OTel!");});app.listen(3000);

Avantages :

• Neutralité vis-à-vis des fournisseurs : les données peuvent être envoyées à Jaeger, Zipkin, Datadog, Grafana.
• Instrumentation automatique des bibliothèques populaires (Express, gRPC, MongoDB).
• TypeScript-first : tous les SDK sont écrits en TS avec un typage complet.

3. Prometheus + client pour métriques

Pour collecter des métriques (RPS, latence, mémoire), utilisez Prometheus avec le client prom-client.

Installation :

npm install prom-client

Exemple avec Express et TypeScript :

import ex