skills.rest
grafana
grafanaOFFICIAL
Explore all skills by this author →
Website𝕏@grafanaGitHub

faro-setup-web

Instrument web apps with Grafana Faro Web SDK for frontend observability.

1.1k|123|Updated Sep 23, 2021
Search Tags:#tracing#instrumentation#errors#web-vitals#web-sdk#frontend-observability#faro
One-click install
npx skills add https://github.com/grafana/faro-web-sdk --skill faro-setup-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: faro-setup-web
Source: https://github.com/grafana/faro-web-sdk/tree/main/ai/grafana-cloud/faro-setup/skills/faro-web
Command: npx skills add https://github.com/grafana/faro-web-sdk --skill faro-setup-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend observability is hard; Faro Web SDK enables collecting errors, performance data, and traces from a browser app and shipping them to Grafana Alloy or a custom collector for centralized monitoring.

Core Features & Use Cases

  • Error tracking, Web Vitals, session monitoring, and distributed tracing for frontend apps.
  • Works across frameworks (React, Next.js, Angular, Vue) and vanilla JS, including SPA and non-SPA pages.
  • Simple quick-start guide: wire Faro into the app's entry point and configure with a collector URL and app name.

Quick Start

Create and wire an init file to initialize Faro with your collector URL and app name, then confirm data appears in Grafana.

Frequently Asked Questions about faro-setup-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add frontend observability and error tracking to a web app?▼

To add frontend observability and error tracking to a web app, you instrument it with Grafana Faro Web SDK by wiring an initialization file into the entry point to collect errors, performance data, and traces.

Does Grafana Faro Web SDK work with Next.js, React, Angular, and Vue?▼

Grafana Faro Web SDK works with Next.js, React, Angular, Vue, and vanilla JS, supporting both single-page applications and server-rendered pages to capture per-view context and navigation timing.

What do I need to configure when instrumenting a web app with Grafana Faro?▼

Instrumenting a web app with Grafana Faro requires configuring a collector URL, an app name, and importing the initialization file as the first import in your application's entry point.

Can I filter noise and enable router integration for SPA tracing?▼

You can optionally enable router integration and noise filtering for SPA tracing by referencing the advanced configuration options to customize data collection and reduce irrelevant telemetry.

Where does Grafana Faro send collected Web Vitals and performance data?▼

Grafana Faro sends collected Web Vitals, session monitoring, and performance data to Grafana Alloy or a custom collector endpoint, enabling centralized monitoring within your Grafana dashboard.

What is the best way to start tracking Web Vitals and distributed tracing in a browser application?▼

The best way to start tracking Web Vitals and distributed tracing in a browser application is to wire the Faro Web SDK into your entry point, configure the collector URL, and confirm data appears in Grafana.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

opentelemetry

Implement OpenTelemetry instrumentation and OTLP pipelines for Grafana telemetry.

Community
Advanced
ddttomddttom
2

eds-performance-debugging

Debug EDS block errors and optimize Core Web Vitals performance.

Community
Intermediate
AgentientAgentient
2

SKILL_NAME_PLACEHOLDER

Centralize and trace full-stack errors with Sentry integration.

Official
Advanced
grafanagrafana
213

opentelemetry

Instrument applications to export metrics, traces, and logs via OTLP endpoints.

Official
Advanced