[Article] Frontend Observability

1. À quoi sert Frontend Observability ? #

Le RUM de Grafana Cloud : Web Vitals, erreurs JavaScript et sessions, collectés par Faro.

Le principe #

Disponible dans : ✕ OSS ✕ Enterprise ✓ Cloud SDK Faro : open source

Frontend Observability est l'application RUM de Grafana Cloud. Les données viennent du SDK Faro, lui-même open source : vous pouvez envoyer les données Faro vers votre propre Alloy et Loki, mais l'application qui les présente est propre au Cloud.

Frontend Observability : Navigateur → Collecte → Stockage → Frontend Observability

2. Les fonctions clés #

Ce que propose la solution.

Vue d’ensemble #

Fonction	Rôle ou disponibilité
Web Vitals	LCP, INP, CLS par page et par navigateur
Erreurs	Exceptions JavaScript regroupées, avec source maps
Sessions	Parcours d’une session et événements personnalisés
Traces	Du clic jusqu’au back-end avec le contexte de trace

3. Démarrer #

Les premières étapes.

Pas à pas #

Créez une application dans Frontend Observability.
Ajoutez le SDK Faro avec l'URL de collecte fournie.
Consultez Web Vitals et erreurs.
Reliez au back-end avec le contexte de trace.

Voir aussi. La formation Grafana Faro détaille l'instrumentation, y compris en auto-hébergé.

Sources #

Frontend Observability

D'après la documentation de Grafana Labs consultée en novembre 2026 : la répartition entre éditions et offres évolue.

📄 Frontend Observability dans Grafana Cloud →

Mon suivi

⏱ Durée estimée : ≈ 3 min

Connectez-vous pour suivre votre progression et prendre des notes. Se connecter

💬 Discussions récentes de la formation

Grafana : une variable « service » qui dépend de la variable « environnement »✓ résolu · 1 réponse(s)

Poser une question sur cette leçon →Voir toutes les discussions de la formation

← Session précédente Session suivante →

Glossaire de la formation

Observabilité

La capacité à connaître l'état interne d'un système à partir des données qu'il émet.Ces données sont classées en 3 piliers : logsmétriquestracesprofil...

Grafana

Plateforme open source de visualisation de données et d'analyse de métriques interactives.

Prometheus

Système open source de surveillance et d'alerte, particulièrement adapté pour la collecte de métriques dans des environnements dynamiques (comme Kuber...

APM (Application Performance Monitoring)

Surveillance des performances applicatives pour identifier, diagnostiquer et résoudre les problèmes complexes liés aux performances et à la disponibil...

k6

Outil open source de test de charge (load testing) conçu pour l'ingénierie de performance, permettant d'évaluer la fiabilité et la scalabilité des sys...

Traces distribuées

Technique (issue du pilier des Traces) permettant de suivre le cheminement complet d'une requête à travers de multiples micro-services pour identifier...

Métriques

Mesures numériques collectées à intervalles réguliers (ex: CPU, RAM, temps de réponse) utilisées pour évaluer l'état de santé global d'un système au f...

Alerting

Processus consistant à notifier les équipes (via email, Slack, Teams) lorsqu'un événement spécifique, un dépassement de seuil ou une anomalie est déte...

HTTP Code

Codes de statut HTTP standardisés indiquant le résultat du traitement d'une requête.1xx (Information) : 100 Continue, 101 Switching Protocols.2xx (Suc...

Access Log

Fichier de journalisation enregistrant les requêtes traitées par un serveur web (Apache, Nginx, Lighttpd, etc.). Il permet de tracer l'activité du ser...

Client IP

L'adresse IP de l'utilisateur effectuant la requête vers le serveur web. Lorsqu'un utilisateur passe par un Load Balancer ou un proxy (ex: Cloudflare)...

Timestamp

La date et l'heure exactes auxquelles la requête a été reçue par le serveur.Configuration : %t dans Apache, $time_local ou $time_iso8601 dans Nginx.

Request

La ligne de requête initiale du client. Elle comprend généralement la méthode HTTP (ex: GET), l'URL demandée et la version du protocole HTTP.Configura...

Status Code

Le code de statut HTTP final renvoyé par le serveur au client (ex : 200 pour un succès, 404 pour ressource non trouvée).Configuration : %>s dans Apach...

Size

Le volume des données renvoyées au client, mesuré en octets (généralement sans les en-têtes HTTP).Configuration : %b ou %O dans Apache, $body_bytes_se...

Referrer

L'URL de la page web depuis laquelle le client a cliqué ou suivi un lien pour accéder à la ressource actuelle.Configuration : %{Referer}i dans Apache,...

User-Agent

Les informations d'identification fournies par le client concernant son navigateur, son système d'exploitation et son appareil. Sa structure standard ...

Response Time

La durée totale prise par le serveur pour traiter la requête et renvoyer la réponse au client.Configuration : %D (microsecondes) ou %T (secondes) dans...

Grafana Loki

Système de journalisation (logs) multi-tenant, hautement disponible et inspiré de Prometheus. Il est conçu pour être très économe en ressources en n'i...