Instrument a web application with the Grafana Faro Web SDK for real user monitoring, error tracking, and trace correlation
domain: grafana.com/docs/grafana-cloud · 6 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
Install @grafana/faro-web-sdk and optionally @grafana/faro-web-tracing; call initializeFaro() once at application startup with the collector URL from Grafana Cloud Frontend Observability
For trace correlation, add the TracingInstrumentation from faro-web-tracing; this creates OTel-compatible trace spans for page loads and fetch/XHR requests and injects traceparent headers so backend spans link to frontend spans
Use faro.api.pushLog() to emit structured log lines from application code, and faro.api.pushError() to manually report caught exceptions with additional context
In Grafana Cloud, navigate to Frontend Observability, select your app, and explore the Web Vitals dashboard, error list, and session timeline that Faro populates
Correlate Faro sessions with backend traces in Grafana Explore by matching the trace ID that Faro injected into outgoing request headers
Known gotchas
The collector URL (also called receiver URL) is specific to your Grafana Cloud stack and includes an API key embedded in the path — do not confuse it with a generic OTLP endpoint
CORS must allow the Faro collector origin from your web app's domain; if your CDN or backend strips custom headers, traceparent propagation will be silently broken
Faro v2 introduced breaking changes in the initializeFaro API compared to v1 — if you upgrade from an earlier version, review the migration guide before deploying
Give your agent this knowledge — and 15,500+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?