Skip to main content

Monitoring a Web Application with Grafana Faro

This guide explains how to instrument your frontend web application using Grafana Faro, allowing you to collect and visualize frontend performance metrics, errors, and user interactions directly in Grafana Cloud.

1. Access Grafana Cloud Faro Setup​

  1. Log in to your Grafana Cloud instance: 👉 [https://<name>.grafana.net](https://<name>.grafana.net)

  2. From the left sidebar, navigate to: Observability → Frontend → Create New

2. Create a New Application​

You’ll be asked to provide some basic information about your frontend application:

  • Application Name — choose a clear and unique name for your app (e.g. byvikas).
  • Domains — enter one or more domains where your app is hosted (e.g., byvikas.com, byvikas.com, etc.).

Once filled, click Next.

3. Connect Your Web Application​

In the next step, under the “Connect your web application” tab:

  1. Select “Web” as your platform type.

  2. Copy the CDN script provided by Grafana. It will look similar to this:

    <script
      defer
      src="https://faro.grafana.net/faro.js"
      data-faro-dsn="https://<unique_id>@faro.grafana.net/collect"
    ></script>

  3. Paste this script into the <head> section of your application's main index.html file — ideally before any other analytics scripts so that Faro can track the full page lifecycle.

4. Continue Setup in Grafana Cloud​

Return to the Grafana Cloud browser tab:

  1. Click Continue once the script is added.
  2. When prompted about “Upload Source Maps”, you can simply click Continue again — this step is optional and mainly used for enhanced JavaScript error tracing.

5. Enable Alerting​

In the “Enable Alerting” section:

  1. Enable all alerting checkboxes (such as performance issues, frontend errors, and high latency alerts).
  2. Click Complete to finish setup.

6. Verify Data Collection​

Once setup is complete:

  • Open your web application in the browser.
  • Return to Grafana → Frontend → Applications.
  • You should begin seeing live session data, page loads, and performance metrics within a few minutes.

Grafana Faro automatically tracks:

  • Page loads and navigations
  • JavaScript errors and exceptions
  • Performance timings (LCP, FID, CLS, etc.)
  • Custom events and telemetry from your frontend

7. (Optional) Advanced Usage​

You can also send custom events or logs from your frontend code using the Faro SDK:

import { faro } from "@grafana/faro-web-sdk";

faro.api.pushLog(["User clicked Subscribe button"]);
faro.api.pushEvent("user_signup", { plan: "premium" });

These events will appear in your Grafana dashboards under the Faro data source.