Documentation Grafana Cloud Monitor applications Frontend Observability Introduction

Introduction to Frontend Observability

Frontend Observability gives you insight into how users experience your application in production. It collects real-user performance data, JavaScript errors, browser logs, and client-side traces directly from the browser, then sends this telemetry to Grafana Cloud for analysis and visualization. With this data, you can understand how your application loads, renders, and behaves across different devices, browsers, and network conditions.

Unlike synthetic tests or local benchmarks, Frontend Observability measures performance as real users experience it. These insights help you detect issues related to deployments, regions, user cohorts, and frontend code paths that are otherwise difficult to surface.

What you can do with Frontend Observability

Frontend Observability is built around several core capabilities:

• Real User Monitoring (RUM): Capture core Web Vitals, navigation timings, device metadata, geolocation, and network information to understand real-user performance
• Error monitoring: Track JavaScript exceptions and crashes, including stack traces, breadcrumbs, and source map support. Refer to Errors overview.
• User interactions and events: Monitor navigation, clicks, and custom events to see how users interact with your application
• Client-side tracing: Generate spans in the browser and correlate them with backend traces for end-to-end visibility
• Browser logs: Collect structured client-side logs to diagnose issues and enrich traces
• Dashboards and analytics: Visualize performance trends, errors, and user sessions using built-in or custom Grafana dashboards
• Alert on issues: Create custom alerts or start with built-in presets to get notified when issues impact your users. Refer to Frontend Observability alerting.

With these capabilities, you can quickly detect regressions, investigate slow interactions, and understand the user experience across devices, browsers, and network conditions.

How Frontend Observability works

Frontend Observability uses the Faro Web SDK, a lightweight, open source JavaScript library that runs in the browser. After you install and configure the SDK, it automatically collects performance metrics, errors, and tracing data. The SDK sends this telemetry to your Grafana data source or OpenTelemetry collector, where it becomes available in dashboards and trace views.

A typical workflow includes:

1. Use the Faro Web SDK to instrument your application
2. Configure telemetry collection for errors, logs, and tracing
3. Send data to Grafana Cloud or an OpenTelemetry-compatible backend
4. Analyze telemetry using dashboards and trace views
5. Investigate issues using errors, slow interactions, or degraded metrics

Who should use Frontend Observability

Frontend Observability supports a variety of roles:

• Frontend engineers monitoring performance and reliability
• SRE and platform teams requiring end-to-end visibility from backend services to their impact on frontend performance and user experience
• Product and UX teams analyzing real-world user behavior
• Performance engineers optimizing load times, rendering, and interactions

Next steps

1. Review the Quickstart for your application framework
2. Install and configure the Faro Web SDK
3. Explore collected telemetry in Grafana dashboards and trace views.