Grafana Cloud Monitor applications Frontend Observability Navigate Grafana Cloud Frontend Observability

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

Application List

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

On the Application Performance Overview page, view a set of dashboards that give you an idea of how your application is performing within the applied time range and filters. These dashboards consist of:

Web Vitals

The first row shows the average web vitals:

• TTFB (Time to First Byte)
• FCP (First Contentful Paint)
• CLS (Cumulative Layout Shift)
• LCP (Largest Contentful Paint)
• FID (First Input Delay)

The web vitals are color-coded based on the following thresholds:

The web vitals are retrieved from Loki with the following query:

Copy

avg_over_time(
  {kind=\"measurement\", app_id=\"APP_ID"} |= \"WEB_VITAL_NAME" |
  logfmt \$\{FILTERS\} |
  unwrap ${WEB_VITAL_NAME} [$__range]
) by (app)

The query variables are:

• APP_ID: Your application ID
• WEB_VITAL_NAME: The web vital name to retrieve: ttfb, fcp, cls, lcp, or fid
• FILTERS: Your applied filters and time range

Page Loads

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).

Errors Overview

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.

Errors

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.

App Settings

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.