Observabilité du frontend : quoi et pourquoi

L'observabilité du serveur est bien établie : les journaux consignent les événements, les métriques suivent l'utilisation des ressources et les traces distribuées suivent les requêtes à travers les microservices. Des outils comme Datadog, Prometheus et Jaeger sont largement déployés dans les systèmes serveur en production.

L'observabilité côté client est une discipline plus récente, qui suit l'expérience de l'utilisateur lorsqu'il interagit avec votre application React. Elle comprend l'enregistrement des interactions de l'utilisateur, la mesure des performances du rendu, l'observation des requêtes réseau et la capture des erreurs JavaScript dans le navigateur.

Votre serveur peut sembler parfaitement sain — faibles taux d'erreur, requêtes rapides vers la base de données — tandis que les utilisateurs subissent une interface lente, saccadée ou défectueuse. L'observabilité côté client comble cet écart en mesurant ce que les utilisateurs vivent réellement, et pas seulement ce que fait le serveur.

Une trace côté client capture la chaîne d'événements déclenchés par une action de l'utilisateur : cliquer sur un bouton, déclencher une mise à jour de l'état React, récupérer des données depuis une API et afficher le résultat. Cette trace relie l'intention de l'utilisateur aux composants qui l'ont exécutée et aux appels réseau qu'ils ont effectués.

L'équivalent côté client des métriques du serveur est constitué des Web Vitals : LCP (affichage du plus grand élément de contenu) mesure la vitesse de chargement, INP (interaction jusqu'au prochain affichage) mesure la réactivité et CLS (décalage cumulatif de la mise en page) mesure la stabilité visuelle. Ce sont les métriques que Google utilise pour le classement Core Web Vitals.

Les journaux côté client recueillent les erreurs, les avertissements et les événements informatifs du navigateur. Les principaux signaux sont les appels à console.error, les exceptions JavaScript non gérées (window.onerror), les rejets de promesses non gérés (window.onunhandledrejection) et les erreurs interceptées par les frontières d'erreur React.

La surveillance des utilisateurs réels recueille des données d'observabilité auprès des navigateurs d'utilisateurs réels en production. RUM instrumente automatiquement le navigateur et capture les temps d'exécution, les erreurs et les interactions de l'utilisateur au moment où ils se produisent. Vous obtenez ainsi des données du monde réel qu'aucun essai synthétique ne peut reproduire.

La surveillance synthétique utilise des outils automatisés (Lighthouse CI, Playwright, WebPageTest) pour simuler des interactions d'utilisateur dans un environnement contrôlé. Elle est prévisible et détecte les régressions avant qu'elles n'atteignent les utilisateurs, mais elle ne tient pas compte de la diversité des appareils, des réseaux et des habitudes d'utilisation des utilisateurs réels.

Plusieurs outils commerciaux proposent une solution RUM complète pour React : Datadog RUM (s'intègre à Datadog APM pour fournir des traces de bout en bout), New Relic Browser et Sentry Performance (capture les erreurs et les performances dans un seul SDK). Leur intégration est rapide, mais ils deviennent coûteux à grande échelle.

OpenTelemetry est un projet de la CNCF qui définit des interfaces de programmation et des SDK indépendants des fournisseurs pour recueillir des traces, des métriques et des journaux. En instrumentant votre application avec OpenTelemetry, vous possédez vos données et pouvez les envoyer à n'importe quel serveur compatible — Jaeger, Grafana Tempo, Honeycomb, Datadog ou votre propre chaîne de traitement.

Sans observabilité côté client, une expérience utilisateur lente est presque invisible pour les équipes d'ingénierie. Vous pouvez constater une hausse des tickets adressés au support client ou une baisse des taux de conversion, mais sans traces ni métriques provenant du navigateur, isoler la cause racine demande de procéder par conjectures.

Quelle est la principale différence entre la surveillance des utilisateurs réels (RUM) et la surveillance synthétique ?

L'observabilité côté client applique les trois piliers — traces, métriques et journaux — au navigateur. RUM recueille les expériences d'utilisateurs réels, tandis que la surveillance synthétique détecte rapidement les régressions. Les Web Vitals (LCP, INP, CLS) sont les principales métriques côté client. OpenTelemetry fournit une norme indépendante des fournisseurs pour recueillir et exporter ces données, ce qui vous laisse libre de choisir votre serveur d'observabilité.