Documentationbreadcrumb arrow Grafana Cloudbreadcrumb arrow Monitor applicationsbreadcrumb arrow Frontend Observabilitybreadcrumb arrow Quickstart
Grafana Cloud

Frontend Observability quickstart

Get telemetry data flowing from your frontend application to Grafana Cloud in less than 5 minutes.

Before you begin

  • A Grafana Cloud account (sign up for free)
  • A frontend web application (JavaScript, React, Next.js, or any framework)

Create a Frontend Observability app

  1. In Grafana Cloud, navigate to Frontend > Frontend Apps.
  2. Click Create new.
  3. Enter:
    • App Name: Your application name
    • CORS Allowed Origin: Your domain (use localhost for local development)
  4. Click Create.

Instrument your application

Copy the instrumentation snippet and paste it in the <head> section of your HTML:

HTML 
<script>
  // Snippet provided in the Grafana Cloud UI
</script>

Tip

The snippet is pre-configured with your app key and endpoint. No additional configuration needed.

View your data

  1. Load your application in a browser.
  2. Navigate through a few pages or trigger some interactions.
  3. Return to Frontend Apps in Grafana Cloud.
  4. Select your app to see real-time performance data, errors, and user sessions.

Next steps