Configure Grafana Faro Web SDK for browser RUM with session tracking and error capture

Steps

1. Install the @grafana/faro-web-sdk package and optionally @grafana/faro-web-tracing for OTel trace integration; initialize Faro early in the application with initializeFaro(), providing the url of your Grafana Cloud Frontend Observability receiver or a self-hosted Faro Collector endpoint.
2. Set the app metadata object in the initializeFaro config with name, version, and environment fields; these become resource attributes on all events and allow filtering in the Grafana Cloud Frontend Observability UI.
3. Enable the default instrumentations by including getWebInstrumentations() in the instrumentations array; this automatically captures unhandled JavaScript errors, console errors, page navigation events, and user-timing marks.
4. Add the FaroTracing instrumentation from @grafana/faro-web-tracing to correlate frontend errors and events with backend OTel traces; configure it with an OTLP exporter URL and propagation targets to inject trace headers into fetch requests.
5. Push custom events and measurements using faro.api.pushEvent('event_name', attributes) and faro.api.pushMeasurement({ type: 'custom', values: { metricName: value } }); use these for business-logic signals beyond automatic instrumentation.
6. View collected data in Grafana Cloud under Frontend Observability; sessions, errors, and custom events appear in the default dashboards; link from error entries to traces using the trace_id field when tracing is enabled.