Suivi des utilisateurs réels et indicateurs Web Vitals

Le paquet npm web-vitals de Google fournit une API simple pour mesurer les indicateurs essentiels du Web dans les navigateurs de vrais utilisateurs. Installez-le avec `npm install web-vitals` et importez les fonctions de rappel individuelles pour les métriques : onLCP, onFID (obsolète), onCLS, onFCP, onTTFB et la moderne onINP, qui mesure l’interaction jusqu’au prochain affichage.

Chaque fonction de rappel (onLCP, onCLS, onINP, etc.) reçoit un objet de métrique contenant : name ('LCP'), value (des millisecondes ou un score sans unité), rating ('good', 'needs-improvement', 'poor') et id (un identifiant unique utilisé pour la déduplication). La fonction de rappel est exécutée une fois la valeur de la métrique définitivement établie.

Utilisez l’API Navigator.sendBeacon ou fetch pour envoyer les métriques à votre point de terminaison d’analyse. sendBeacon est préférable, car il continue de fonctionner même après le déchargement de la page — ce qui est essentiel pour les métriques comme CLS, dont la valeur finale est déterminée lorsque la page est masquée. Regroupez tous les rapports de métriques dans un seul signal lorsque cela est possible.

Pour intégrer les indicateurs essentiels du Web à OpenTelemetry, créez un instrument de type jauge pour chaque métrique : `const lcp = meter.createObservableGauge('web_vitals.lcp')`. Dans chaque fonction de rappel onLCP, enregistrez la valeur avec les attributs pertinents (chemin de page, type d’appareil). Votre plateforme d’observabilité peut alors déclencher des alertes en cas de régression du LCP P75.

Pour mesurer les performances propres à React qui ne sont pas prises en compte par les indicateurs essentiels du Web, utilisez l’API de mesure du temps utilisateur : performance.mark('render-start') avant le rendu, performance.mark('render-end') après celui-ci, puis performance.measure('component-render', 'render-start', 'render-end'). Ces mesures apparaissent dans l’onglet Performance de Chrome DevTools.

Le composant Profiler de React encapsule une sous-arborescence et appelle sa fonction de rappel onRender avec des données de minutage : id (identifiant du profileur), phase ('mount' ou 'update'), actualDuration (durée du rendu) et baseDuration (durée de rendu estimée sans mémorisation). Utilisez-le en développement pour repérer les composants lents.

Les erreurs non gérées et les rejets de promesses peuvent être capturés sous forme de segments OpenTelemetry avec un statut d’erreur. Configurez des écouteurs globaux : window.addEventListener('error', handler) et window.addEventListener('unhandledrejection', handler). Créez un segment, définissez son statut avec span.setStatus({ code: SpanStatusCode.ERROR }), ajoutez le message d’erreur et la trace de pile comme attributs, puis terminez le segment avec span.end().

Les limites d’erreur de React interceptent les erreurs de rendu dans l’arbre des composants. Dans la méthode componentDidCatch, créez un segment OpenTelemetry représentant l’erreur, définissez son statut sur ERROR, joignez error.message et componentStack comme attributs, puis appelez span.end(). Cela achemine les erreurs de rendu de React dans votre chaîne de traitement de traces distribuées.

Le JavaScript de production minifié produit des traces de pile illisibles comme "a.b at bundle.min.js:1:84721". Téléversez les cartes de source vers Sentry, Datadog ou votre chaîne de traitement OpenTelemetry pendant le processus de compilation CI/CD afin que les traces de pile brutes soient automatiquement résolues vers les noms de fichiers TypeScript et les numéros de ligne d’origine.

Envoyer les données de trace complètes pour chaque session coûte cher. Mettez en place un échantillonnage des sessions : attribuez aléatoirement une valeur à l’indicateur sessionSampled lors du premier chargement de la page et stockez-la dans sessionStorage. Initialisez le SDK OpenTelemetry et envoyez des traces uniquement pour les sessions échantillonnées (par exemple, 10 %). Échantillonnez toujours 100 % des sessions comportant des erreurs.

Les indicateurs essentiels du Web rapportés sous forme de métriques OpenTelemetry permettent de déclencher des alertes fondées sur des SLO : si le LCP P75 dépasse 2,5 secondes pour plus de 5 % des sessions sur une fenêtre d’une heure, déclenchez une alerte. Cela fournit aux équipes d’ingénierie des signaux exploitables directement liés à l’expérience utilisateur, plutôt qu’aux seules métriques de l’infrastructure du serveur.

Quand la fonction de rappel onLCP de la bibliothèque web-vitals est-elle exécutée ?

La bibliothèque web-vitals fournit des fonctions de rappel simples pour mesurer le LCP, l’INP, le CLS, le FCP et le TTFB dans les navigateurs de vrais utilisateurs. Rapportez ces valeurs sous forme de métriques OpenTelemetry pour déclencher des alertes fondées sur des SLO, capturez les erreurs au moyen d’écouteurs globaux et de limites d’erreur React sous forme de segments OpenTelemetry, et téléversez des cartes de source pour résoudre les traces de pile minifiées. Échantillonnez les sessions afin de gérer le volume de données tout en conservant une couverture de 100 % des erreurs.