skills.rest
whitebeardit
whitebearditOFFICIAL
Explore all skills by this author →
WebsiteGitHub

skill-frontend-instrumentation-otel

Instrument Vite 3 + TypeScript frontends with OpenTelemetry for Grafana, Tempo, and Mimir.

12|6|Updated Jan 26, 2026
Search Tags:#monitoring#frontend#tracing#instrumentation#vite#grafana#opentelemetry
One-click install
npx skills add https://github.com/whitebeardit/.cursor --skill skill-frontend-instrumentation-otel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-frontend-instrumentation-otel
Source: https://github.com/whitebeardit/.cursor/tree/main/skills/frontend/skill-frontend-instrumentation-otel
Command: npx skills add https://github.com/whitebeardit/.cursor --skill skill-frontend-instrumentation-otel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding detailed performance and usage telemetry to frontend applications, enabling better monitoring and debugging.

Core Features & Use Cases

  • OpenTelemetry Instrumentation: Integrates OpenTelemetry for tracing, metrics, and error tracking in Vite 3 + TypeScript/Vue applications.
  • Real User Monitoring (RUM): Captures essential metrics like Web Vitals, page views, and user interactions.
  • Use Case: When developing a new feature, use this Skill to ensure all user interactions, page loads, and potential errors are automatically captured and sent to Grafana, Tempo, and Mimir for analysis.

Quick Start

Use the skill-frontend-instrumentation-otel skill to instrument a new page with OpenTelemetry.

Frequently Asked Questions about skill-frontend-instrumentation-otel

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

FAQPage Schema
How do I add OpenTelemetry tracing to a Vite frontend?▼

OpenTelemetry instrumentation for a Vite frontend captures traces, Web Vitals, page views, clicks, and errors, sending the telemetry data directly to Grafana, Tempo, and Mimir for analysis.

What is frontend instrumentation for Real User Monitoring?▼

Frontend instrumentation for Real User Monitoring (RUM) is the process of integrating tracing tools to capture essential metrics like Web Vitals and user interactions automatically. It enables comprehensive monitoring and debugging of application performance from the client side.

Can I use OpenTelemetry to track Web Vitals and user clicks in TypeScript?▼

Yes, OpenTelemetry can track Web Vitals and user clicks in TypeScript applications. The instrumentation captures these interactions along with page views and errors, sending them to Grafana for enhanced RUM and debugging.

How do I send frontend error tracking data to Grafana and Tempo?▼

You can send frontend error tracking data to Grafana and Tempo by instrumenting your Vite 3 frontend with OpenTelemetry. This captures potential errors automatically and exports the traces and metrics to your configured monitoring platforms.

Does this OpenTelemetry frontend instrumentation work with Vue applications?▼

Yes, this OpenTelemetry frontend instrumentation works with Vite 3 + TypeScript/Vue applications. It integrates tracing, metrics, and error tracking to capture user interactions and page loads for comprehensive monitoring.

Related Skills

Explore More Software Engineering Skills→
cosmixcosmix
53

grafana

Configures Grafana-based observability dashboards with the LGTM stack, including RBAC and alerting for logs, traces, and metrics.

Community
Advanced
ddttomddttom
2

eds-performance-debugging

Debug EDS block errors and optimize Core Web Vitals performance.

Community
Intermediate
thc1006thc1006
20

service-mesh-observability

Implement full-stack observability for service mesh deployments with metrics, traces, and logs.

Community
Advanced
hopeoverturehopeoverture
6

sentry-and-otel-setup

Configure Sentry and OpenTelemetry error tracking and performance monitoring for Next.js applications.

Community
Advanced