Modern cloud-native applications and web browsers are highly complex, making it challenging to gain visibility into their performance. Without an effective way to track and measure frontend performance, it becomes difficult to monitor real user experiences, detect critical issues, assess website health, and ensure optimal functionality.
But what if you could see exactly what your users are experiencing in real time? This is where frontend observability comes in, providing visibility into user interactions and overall website performance.
In this blog post, we’ll take a closer look at what frontend observability is, why it’s important, and how you can implement it using Grafana Faro. You can also learn more about Grafana Faro and watch a demo in the video below.
What is frontend observability?
Frontend observability provides insight into how real users navigate and interact with your web application. It helps uncover and resolve issues that may not emerge during development and testing. Additionally, it offers valuable data on website health, performance, load times, and responsiveness.
This data allows developers to track frontend errors, resolve issues faster, and ensure the best possible end-user experience for their services and apps.
Introducing Grafana Faro
At Grafana Labs, we offer a comprehensive frontend observability solution with two key components:
- Grafana Faro: An open source web SDK for collecting and sending frontend performance metrics.
- Grafana Cloud Frontend Observability: A fully managed, end-to-end solution for real-user monitoring in Grafana Cloud.
Here, we’ll take a closer look at Faro, in particular, and demonstrate how it can be used to gather real user monitoring data from web applications and transfer that data to Grafana Cloud.
The Grafana Faro Web SDK is a lightweight and highly configurable JavaScript agent that integrates directly into web applications. It collects essential observability data, including performance metrics (like web vitals), logs, exceptions, errors, user events, and traces.
Embedding Faro into a web application requires just a few lines of code. It is compatible with all browser-based web applications and supports popular JavaScript frameworks like React and Next.js, making it a versatile tool for frontend monitoring.
To learn more about how to embed Faro in your projects, please check out our documentation.
Deployment options
Once Faro has collected the necessary data, you have two options for managing and visualizing that data:
- Open source approach: You can collect data via Faro and send it to Grafana Alloy, integrating seamlessly with Grafana’s LGTM stack for a full-stack, open source observability solution.
- A managed solution with Grafana Cloud: You can collect data via Faro and send it to a hosted endpoint in Grafana Cloud, gaining access to automatic, out-of-the-box dashboards. With this approach, you also gain access to features like dynamically changing service names within Faro.
Quick start: instrumenting your application with Faro
Now, we’ll walk through a quick tutorial to demonstrate how to instrument your application with Faro. For our application, we’ll use QuickPizza, a demo app designed to generate unique pizza combinations.
1. Create a Grafana Cloud account
To follow along with this tutorial, you will need a Grafana Cloud account. If you don’t already have one, you can sign up for a free Grafana Cloud account today.
2. Create a Frontend Observability dashboard in Grafana Cloud
In the Grafana Cloud UI, navigate to the left panel and select Frontend. If this is your first time using Frontend Observability, you will see a Start Observing button — click it. Otherwise, you will be taken directly to a screen where you can click Create New.
3. Create a Frontend Observability application
Now, we need to configure our Frontend Observability application check by entering the following info:
- Application name: Assign a name. For our example, we will choose QuickPizza:App.
- Domains: Enter the URL or IP address of the endpoint you want to monitor. QuickPizza is deployed locally on http://localhost:3333, so we will choose that URL.
4. Connect your web application
You can choose your package type: npm, yarn, or a CDN if your project lacks a package manager. We will use npm to install faro-web-sdk and faro-web-tracing, which are essential for instrumenting your web application. Install them via the terminal.
# install globally
npm i @grafana/faro-web-sdk
npm i @grafana/faro-web-tracingSet a sampling rate to determine the percentage of sessions to monitor. Choose between normal or persistent sessions. Normal sessions end when the user closes the tab. Persistent sessions continue tracking even after the browser is closed. We will use the default sampling rate of 100%.
5. Add code snippets to Faro
Now, move to your codebase and add a simple code snippet to enable auto-instrumentation. For security purposes, it is not recommended to hardcode your URL, but for the purposes of our demo, we will do so. Once configured, click Continue.
6. Optional source map upload
Uploading a source map enables better error tracking by displaying the original source code instead of minified code. This is an optional step, so for our example, we can just click Complete.
7. Viewing metrics in Grafana Cloud
Once the setup is complete, you can start observing the resulting metrics in one of the out-of-the-box dashboards in Grafana Cloud Frontend Observability, which are automatically generated for users.
These dashboards display many key performance metrics that can help development teams identify issues, troubleshoot faster, and optimize the overall user experience. The first row shows the page loads and web vitals, including:
- TTFB: Time to First Byte
- FCP: First Contentful Paint
- CLS: Cumulative Layout Shift
- LCP: Largest Contentful Paint
- FID: First Input Delay
- INP: Interaction to Next Paint
Subsequent charts show page loads, errors, and page performance.
To learn more about Frontend Observability out -of-the-box dashboards, please check out our documentation.
Wrapping up
Frontend observability is an essential component of monitoring real user behavior. By leveraging Grafana Faro, you can effortlessly collect and send critical frontend observability metrics to Grafana Cloud, ensuring you have the visibility you need into the performance of your most critical services.
To learn more, please visit our technical docs.
Grafana Cloud is the easiest way to get started with metrics, logs, traces, dashboards, and more. We have a generous forever-free tier and plans for every use case. Sign up for free now!