Menu
Documentationbreadcrumb arrow Grafana Cloudbreadcrumb arrow Monitor applicationsbreadcrumb arrow Frontend Observabilitybreadcrumb arrow Alerts
Grafana Cloud

Frontend Observability alerting

Frontend Observability provides alerting based on Faro data. These predefined alerts fire when they breach a specified threshold and enable you to gain actionable insights from your frontend data.

How it works

Frontend Observability alerts are built on Grafana-managed alerts. When you enable alerting, Grafana Cloud creates a data source-managed recording rule. This recording rule creates a metrics series based on the frontend application’s app-id that is used to define alert rules.

Frontend Observability includes the following alerts based on predefined rules:

Alert nameDescription
Errors CountFires when the number of errors increases day over day for the last 24 hours
New ErrorsFires when the there are new errors in the last 24 hours
Web Vitals - FIDFires when the First Input Delay (FID) is greater than 300ms for the last 6 hours
Web Vitals - LCPFires when the Largest Contentful Paint (LCP) is greater than 4000ms for the last 6 hours
Web Vitals - CLSFires when the Cumulative Layout Shift (CLS) is greater than 0.25 for the last 6 hours
Web Vitals - TTFBFires when the Time to First Byte (TTFB) is greater than 1800ms for the last 6 hours
Web Vitals - FCPFires when the First Contentful Paint (FCP) is greater than 3000ms for the last 6 hours
Web Vitals - INPFires when the Interaction to Next Paint (INP) is greater than 500ms for the last 6 hours

Before you begin

  • Ensure you have permission to create and edit an application in Frontend Observability
  • Ensure you have permission to create folders and Alerts in Grafana
  • Ensure you have a basic understanding of Grafana-managed alerts

Enable alerts

You can enable alerts when you create a new application or on existing applications.

Enable alerts on new applications

  1. Use the left navigation to select Observability > Frontend and then click Create New.
  2. Complete the usual steps to create a Frontend Observability application.
  3. In the Enable alerting section, select the alerts that you want to apply to your application.
  4. Click Complete.

Enable alerts on a single existing application

Tip

You can click the toggle next to any alert to view the expression it uses and what it is currently recording. This displays data only if the alert is enabled.

  1. Use the left navigation to select Observability > Frontend and then choose the desired application.
  2. Click Settings > Alerting.
  3. Select the alerts that you want to apply to this frontend application.
  4. Click Enable selected alerts.

Enable alerts for all existing applications

You can manage alerts for all applications on the Frontend Observability Configuration page. This includes enabling and disabling alerts.

Tip

You can click the toggle next to any alert to view the expression it uses and what it is currently recording. This displays data only if the alert is enabled.

  1. Use the left navigation to select Observability > Frontend > Configuration.
  2. In the Enable alerts section, select the alerts that you want to apply to frontend applications in your Grafana instance.
  3. Click Enable alerts.
  4. For each alert that you selected, choose the applications where you want to enable the alerts.
  5. Click Save.

Configure threshold values

You can edit basic threshold values for alerts on a per application basis to prompt them to fire based on your specified criteria.

  1. Use the left navigation to select Observability > Frontend and then choose the desired application.
  2. Click Settings > Alerting.
  3. Select the alerts that you want to edit and click Edit alert thresholds.
  4. Make the necessary changes and then click Save Changes.

Note

You can make more advanced edits to alerts by clicking Edit alert rule in Alerting. Refer to Configure alert rules for more information.

Configure alert notifications

By default, Frontend Observability doesn’t include contact points for predefined alerts. If you want to configure alert notifications, you must add the appropriate contact points for each alert rule.

Steps

  1. Use the left navigation to select Observability > Frontend > Configuration.
  2. In the Enable alerts section, click View in Alerting.
  3. Choose the alert rule for which you want to configure a notification and click Edit.
  4. In the Configure notifications section, toggle off Advanced options.
  5. Refer to Configure contact points to learn more.