RousselTMLEARNING

Observabilité

Bonnes pratiques de l'observabilité front-end avec Faro

Check-list pour un RUM utile et respectueux : configuration du SDK, versions, source maps, corrélation avec le back-end, maîtrise du volume et conformité RGPD.

1. Collecter #

L'essentiel, proprement.

Principes #

  • Nom, version et environnement de l'application systématiquement renseignés.
  • Instrumentations web par défaut + traces fetch vers vos API.
  • Source maps disponibles pour le récepteur, pas forcément publiques.
  • Événements métier sur les étapes clés du parcours (pas sur chaque clic).
  • Échantillonnage des sessions sur les sites à fort trafic.

2. Protéger #

Récepteur et données.

Sécurité et RGPD #

  • CORS limité à vos domaines, clé d'API, limitation de débit devant le récepteur.
  • Aucune donnée personnelle directe ; URL nettoyées par beforeSend.
  • Collecte conditionnée au consentement si elle n'est pas strictement nécessaire.
  • Rétention courte dans Loki.

3. Exploiter #

Des indicateurs qui guident les décisions.

Rituels #

  • Web Vitals p75 par page et par version dans le dashboard de chaque équipe front.
  • Alerte sur la hausse d'exceptions après un déploiement.
  • Revue mensuelle des pages « mauvaises » au sens des Core Web Vitals.
  • SLO d'expérience utilisateur (par exemple 75 % des visites avec un LCP < 2,5 s).

Schéma de référence et vérification rapide #

Check-list.

Check-list #

  1. SDK initialisé avec version et environnement
  2. Récepteur Alloy sécurisé
  3. Logs vers Loki, traces vers Tempo
  4. Propagation traceparent autorisée par les API
  5. Dashboard Web Vitals et erreurs
  6. Politique de confidentialité à jour

Articles liés

Monitoring de site web : disponibilité, surveillance HTTPS, certificats et performances

Mettre en place le monitoring d'un site web : surveillance de la disponibilité et du HTTPS, expiration des ce…

Real User Monitoring (RUM) et Core Web Vitals : mesurer ce que vivent les utilisateurs

Pourquoi observer le front-end, ce que mesure le RUM, les Core Web Vitals (LCP, INP, CLS) et leurs seuils, et…

Grafana Faro : architecture et installation

Installer Grafana Faro : le SDK web (npm ou CDN), le récepteur faro.receiver d'Alloy, l'envoi vers Loki et Te…

Pour aller plus loin