Navigate Grafana Cloud Frontend Observability
After you configure your application and begin sending telemetry data in Frontend Observability, you can navigate through the visualizations provided to evaluate your applications performance in real-time. If you have not set up Frontend Observability yet, see the getting started with Frontend Observability guide
This page helps you manage your applications that you use to send data into Grafana Cloud.
On the Application List page, you can:
- See all the applications you have created
- Filter applications by name
- Create new applications
- Edit or Delete an application
Application Performance Overview
Click an Application List page to view its performance overview
In the Application Performance Overview page you have a set of dashboards that will give you an idea of how your application is performing. These dashboards consist of
The first row of data are the average values of all 5 web vitals:
- TTFB (Time to First Byte)
- FCP (First Contentful Paint)
- CLS (Cumulative Layout Shift)
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
Which are color coded based on the following thresholds:
Next is the total page loads as well as their distribution over time. You can use the time window selection as you would do in a normal Grafana dashboard to zoom into a specific interval (i.e. a spike in page loads).
Similarly to Page Loads, in this section you can view the total number of errors that happened in the selected time range, as well as their distribution.
Web Vitals 75p Timeseries
In this section, you can view a 75th percentile distribution of all Web Vitals divided into:
- Page Load: TTFB, FCP, LCP
- Cumulative Layout Shift: CLS
- First Input Delay: FID
These graphs are used to identify issues with your application and zoom into specific time windows.
To learn more about using the Application Performance Overview page, you can read the Using the Application Performance Overview document.
From the navigation bar in the middle, click on Errors to navigate to the Errors page
In this page you can:
- View how many errors your application is generating within a given timeframe
- Filter results based on an error
- Filter out noisy errors
- Inspect error context (stacktrace, session ids or other meta information)
- Identify dominant exceptions
- Identify URLs that are generating errors
- Segregate error count based on browsers
To learn more about using the Errors page, you can read the Using the Errors Overview Page document.
This page is used to edit the settings of your application. To see more details about these fields refer to the Getting Started guide.
Faro Web SDK Configuration
This page is used to generate the snippets that you can use to integrate the Faro Web SDK into your application.