Performance utilisateur

MIP RUM — Real User MonitoringRUM — Real User MonitoringTechniqueMesure de la performance et des erreurs vécues par les utilisateurs réels, en production.StackSDK navigateur (Web Vitals, erreurs, traces) → OTLP → Postgres → console Next.js. Souverain UE, OTel-native.En clairOn mesure le vrai ressenti des clients sur le site live, pas une simulation. C'est la donnée qui compte pour le chiffre d'affaires : un site rapide convertit mieux.

Monitoring de l'expérience réelle, OpenTelemetry-natif et souverain UE. Découvrez l'outil, puis connectez-vous pour accéder à votre console.

Qu'est-ce que le RUM ?RUM — Real User MonitoringTechniqueMesure de la performance et des erreurs vécues par les utilisateurs réels, en production.StackSDK navigateur (Web Vitals, erreurs, traces) → OTLP → Postgres → console Next.js. Souverain UE, OTel-native.En clairOn mesure le vrai ressenti des clients sur le site live, pas une simulation. C'est la donnée qui compte pour le chiffre d'affaires : un site rapide convertit mieux.

Le Real User Monitoring mesure la performance et les erreurs réellement vécues par vos utilisateurs en production — pas une sonde de laboratoire. On capte ce que vivent les vrais visiteurs (vitesse d'affichage, réactivité, bugs JavaScript, parcours), parce que c'est cette expérience-là qui pèse sur la conversion et la satisfaction. Un site rapide convertit mieux : le RUM le prouve avec des chiffres terrain.

La stack technique en quelques mots

SDK navigateur (Web Vitals API, rrweb)OpenTelemetry · OTLP/HTTPIngestion Deno / NodePostgreSQL → ClickHouseConsole Next.js 15 / React 19Souverain UE

Tout repose sur des standards ouverts (OpenTelemetry) : pas de format propriétaire, pas d'enfermement fournisseur, et une compatibilité immédiate avec l'écosystème observabilité existant.

Comment ça fonctionne — du navigateur à la décision

1 · Mesure navigateur

Un SDK léger (~5 ko) lit les Core Web Vitals, les erreurs JS et les interactions chez le vrai visiteur, via les API standard du navigateur (PerformanceObserver).

2 · Export OTLP

Les mesures partent en OpenTelemetry (OTLP/HTTP JSON) — un standard ouvert, pas un format maison : aucun enfermement fournisseur.

3 · Ingestion

Une fonction serverless (Deno) ou un service Node aplatit le flux OTLP et l'écrit en base, avec garde-fous de charge et idempotence.

4 · Stockage

PostgreSQL pour le POC ; chemin ClickHouse prouvé pour le grand compte (mêmes p75, ×15 plus compact). Rétention RGPD (TTL 30 j).

5 · Console

Cette interface Next.js 15 / React 19 calcule les agrégats (p75, score de santé, anomalies) et les rend lisibles — du commercial à l'ingénieur.

Ajouter un client en 6 étapes

De la création de l'app au premier graphe : ce qu'il faut faire, concrètement, pour brancher un nouveau site et le rendre monitorable.

Ajouter un client · étape 1 / 6

1. Créer le client dans l'outil

Administration → Clients → « Ajouter un client ». On renseigne le nom, un identifiant (app_id : minuscules, chiffres et tirets — ex. plateforme-client) et les domaines du site (les origines autorisées pour le CORS).

À la validation, l'outil génère la clé d'API (affichée une seule fois !) et autorise le domaine — pris en compte en ≤ 60 s, sans redéploiement.

Demandez à un administrateur de créer le client.

Les statistiques montrées

Score de santé /100Score de santéTechniqueScore composite 0–100 : 40 % vitals (LCP ×2), 30 % erreurs, 20 % stabilité, 10 % anomalies 24 h.StackPondération calculée côté console à partir des p75, du taux d'erreur et de la détection d'anomalies (vue SQL v_anomaly).En clairUne note unique pour piloter en un coup d'œil, comme un bulletin de santé du site. Idéal pour un comité de direction : vert = tout va bien, rouge = il faut agir.

Une note unique (vitals, erreurs, stabilité, anomalies) pour piloter en un coup d'œil.

Ouvrir →
Core Web Vitals (p75)LCP — Largest Contentful PaintTechniqueLargest Contentful Paint (Core Web Vital, seuil 2026 : bon < 2,0 s, à améliorer < 2,5 s).StackMesuré dans le navigateur réel par l'API PerformanceObserver (entry type 'largest-contentful-paint'), émis en span OTLP 'webvital.LCP' par le SDK.En clairLe temps avant que le plus gros élément visible (image, titre) s'affiche. C'est la perception de « la page a chargé ». Au-delà de 2,5 s, l'internaute a l'impression d'attendre.

LCP, INP, CLS, FCP, TTFB au 75ᵉ percentile — la qualité vécue par 3 visiteurs sur 4.

Ouvrir →
Anomalies (z-score)Anomalie (z-score)TechniqueÉcart statistique |z| > 3 du p75 LCP horaire vs moyenne 7 jours glissants.StackDétection en SQL (vue v_anomaly) par z-score = (valeur − moyenne) / écart-type, sans modèle externe.En clairUne alerte automatique quand le site se dégrade nettement par rapport à son comportement habituel — sans avoir à fixer de seuil à la main. Repère les incidents avant les clients.

Détection automatique des dérapages vs comportement habituel, sans seuil à régler.

Ouvrir →
Heatmap de santéHeatmap de santé (jour × heure)TechniqueGrille calendaire : une ligne par jour, une colonne par heure ; couleur = part de mesures « good » du créneau (LCP pondéré ×2), vert ≥ 90 %, orange ≥ 50 %, rouge sinon.StackAgrégat SQL par date_trunc('day') × extract(hour) sur 14 jours glissants, mêmes filtres app/appareil ; rendu serveur en CSS grid (zéro JS client).En clairLa performance « vue de loin » : on repère en un clin d'œil les créneaux récurrents qui dérapent (tous les matins 9 h, les soirs de pic…) plutôt que de fixer une seule valeur instantanée. Idéal pour montrer la tenue dans la durée à un client.

La tenue jour par jour, heure par heure — pour lire la performance dans la durée.

Ouvrir →
Erreurs regroupéesRegroupement d'erreurs (fingerprint)TechniqueHash FNV-1a de (type + message normalisé + 1er frame de stack) pour dédupliquer les erreurs.StackCalculé à l'ingestion : URLs, UUID et nombres sont remplacés par '#' afin que les variantes d'une même erreur partagent une empreinte.En clairAu lieu de 5 000 erreurs en vrac, on voit « 12 problèmes distincts », triés par impact. On corrige les vraies causes, pas le bruit.

Les erreurs JS dédupliquées par cause (fingerprint), triées par impact réel.

Ouvrir →
Sessions (replay à venir)Session utilisateurTechniqueSuite de pages vues d'un même visiteur (session_id), avec device, pays (timezone) et durée.StackUpsert en table rum_session ; aucune IP stockée — le pays est déduit de la timezone (RGPD-friendly).En clairLe parcours réel d'un visiteur. Permet de rejouer ce qu'il a vécu et de comprendre un abandon, sans collecter de données personnelles identifiantes.

Le parcours réel d'un visiteur (pages, vitals, erreurs), sans donnée identifiante. Rejeu visuel (rrweb) à venir, activé derrière consentement.

Ouvrir →
Tracing front → backTracing front → backTechniqueCorrélation d'un appel API navigateur (span 'http.client') à son exécution serveur (span 'http.server') par trace_id.StackPropagation W3C 'traceparent' injectée par le SDK (fetch/XHR), relue par le middleware backend (FastAPI/OTel) qui émet le span serveur.En clairOn suit un clic depuis le navigateur jusqu'au serveur et retour. Permet de répondre à « c'est lent : ça vient du réseau, du serveur ou du code ? » sans deviner.

Chaque appel API relié à son exécution serveur (W3C traceparent) : réseau, serveur ou code ?

Ouvrir →
Robot vs RéelRobot vs RéelTechniqueComparaison du synthétique (sondes programmées) au RUM (utilisateurs réels) pour une même route.StackVue SQL v_correlation : écart p75 robot ↔ réel ; surligne les routes où le monitoring synthétique ment.En clairVos tests automatiques disent « tout va bien » mais les vrais utilisateurs souffrent ? Cet écart le révèle — la mesure terrain prime sur le labo.

L'écart entre le monitoring synthétique et les vrais utilisateurs — le terrain prime sur le labo.

Ouvrir →
Performance IAPerformance IATechniqueUsage & performance des appels LLM : tokens (prompt/complétion), coût USD, latence (dont TTFB/TTFT) et taux d'erreur, par modèle et par route.StackChaque appel LLM émet un span OTLP (provider, model, tokens, cost_usd, latency_ms, status) stocké en table rum_ai ; agrégats calculés côté console (percentile_cont pour la latence p75).En clairCombien coûte l'IA, sur quels parcours, et à quelle vitesse ? On relie la dépense et la lenteur des modèles à l'expérience réelle des utilisateurs — pour arbitrer coût/qualité sans deviner.

Appels LLM (tokens, coût, latence, erreurs) + gouvernance des données : ce qui expose de la PII, pseudonymisé ou non.

Ouvrir →
Expérience utilisateurScore d'expérienceTechniqueNote /100 combinant la qualité perçue (Core Web Vitals), les signaux de frustration et la satisfaction déclarée (CSAT).StackCalculé côté console : rating des vitals (p75) × pénalité frustration (rage/dead clicks) × CSAT issu des feedbacks (rum_event name='feedback'). Fonction pure, testée.En clairUne seule note qui marie le mesuré (vitesse, bugs) et le ressenti (ce que l'utilisateur dit). Le chaînon qui manque à un RUM classique : le pont entre chiffres et satisfaction.

Le ressenti (feedbacks + CSAT) marié à la perf mesurée : un score d'expérience, le pont chiffres ↔ satisfaction.

Ouvrir →
Carte d'expérienceCarte d'expérienceTechniqueGraphe de service front→back : pages → API appelées → routes backend, arêtes pondérées par le volume, nœuds colorés par santé et annotés d'une tendance.StackConstruite depuis rum_span (spans front/back corrélés par trace_id) et rum_metric ; santé = latence p75 + taux d'erreur, tendance = moitié récente vs ancienne de la fenêtre. Rendu SVG maison, aucune dépendance graphe.En clairLa version « expérience » d'une weather map réseau : on voit d'un coup d'œil quelles briques du parcours sont sollicitées, lesquelles souffrent, et lesquelles montent en charge — cartographie, flux et anticipation réunis.

Le graphe pages → API → backend, coloré par santé et pondéré par le volume : cartographie, flux et anticipation.

Ouvrir →
Prévisions (AIOps)Prévisions (AIOps)TechniqueProjection linéaire (moindres carrés) des indicateurs sur 14 jours ; ETA au franchissement de seuil (LCP 2,5 s, taux d'erreur 2 %).Stacklib/forecast (pur) sur les séries journalières (rum_metric/rum_pageview/rum_error). Régression transparente — aucune boîte noire ; complète les anomalies z-score (réactives) par de l'anticipation.En clairOn ne se contente plus de réagir : on voit ce qui dérive et QUAND ça franchira le seuil. Le passage du curatif au prédictif — arbitrer avant que l'utilisateur ne subisse.

Projette la dérive des indicateurs sur 14 j et l'ETA au franchissement de seuil : du réactif au prédictif.

Ouvrir →