Sentry SDK JavaScript v11 intègre l’INP aux métriques Web Vitals

Présentation du SDK

Sentry a publié la version v11 de son SDK JavaScript dédié à la surveillance des performances côté client. Cette version ajoute la mesure de l’Interaction to Next Paint (INP) aux indicateurs classiques Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS). Le SDK se déclenche lors de chaque navigation client, ce qui permet d’identifier des routes lentes que les métriques de chargement initial ne révèlent pas.

import * as Sentry from "@sentry/browser";
Sentry.init({
  dsn: "https://example@sentry.io/12345",
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
  enableMetrics: true // active LCP, CLS, INP
});

Mécanisme de mesure de l’INP

L’INP calcule le temps d’interaction le plus long parmi toutes les interactions d’une session, en se basant sur les événements d’entrée (clic, tap, clavier). Contrairement à LCP, dont le point de départ est le début du chargement de la page, l’INP démarre son chronométrage à chaque interaction utilisateur, ce qui explique pourquoi les scores doivent être filtrés séparément des métriques de page‑load. Le SDK capture les timestamps via l’API PerformanceObserver et les agrège en temps réel, en envoyant les valeurs à Sentry uniquement si elles dépassent les seuils configurés.

Contraintes d’environnement et implications

Le support de l’INP nécessite Chromium 151 ou une version ultérieure, car les versions antérieures ne fournissent pas l’observateur d’interaction requis. Cette exigence limite l’utilisation du SDK aux navigateurs récents, notamment les versions de Chrome, Edge et les dérivés basés sur Chromium publiés après le 15 mai 2026. Les développeurs doivent donc prévoir un fallback ou désactiver l’INP pour les utilisateurs de navigateurs plus anciens, sous peine de perdre la cohérence des données de performance.

En outre, la séparation des horloges implique que les tableaux de bord doivent gérer deux séries temporelles distinctes : une pour les métriques de chargement (LCP, CLS) et une autre pour les interactions (INP). Cette double collecte augmente le volume de données envoyé à Sentry d’environ 30 % selon les tests internes, ce qui peut impacter les quotas de transmission dans les environnements à bande passante restreinte.

Analyse d’impact sur les pratiques de performance

L’ajout de l’INP pousse les équipes à optimiser non seulement le rendu initial mais aussi la réactivité des interfaces après le chargement. Les scénarios typiques où l’INP révèle des régressions sont les menus déroulants complexes, les listes de cases à cocher animées et les composants réactifs qui déclenchent des recalculs de mise en page à chaque interaction. En combinant les mesures de Sentry avec des tests automatisés (ex. : Playwright), les équipes peuvent établir des budgets de temps d’interaction et bloquer les déploiements qui dépassent les seuils définis.

Enfin, la dépendance à Chromium 151 crée un point de friction pour les projets qui ciblent des navigateurs plus anciens ou des environnements mobiles à mise à jour lente. Les équipes doivent donc équilibrer la valeur ajoutée de l’INP contre le coût de la compatibilité, éventuellement en implémentant une logique conditionnelle qui active l’observateur uniquement lorsque la version du navigateur le permet.