skills.rest
jagreehal
jagreehalCOMMUNITY
Explore all skills by this author →
Website𝕏@jagreehalGitHub

autotel-web

Add distributed tracing to browser apps with JavaScript SDKs and OTLP export.

7|3|Updated Nov 26, 2025
Search Tags:#performance#web vitals#observability#tracing#browser#error tracking
One-click install
npx skills add https://github.com/jagreehal/autotel --skill autotel-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: autotel-web
Source: https://github.com/jagreehal/autotel/tree/main/packages/autotel-web/skills/autotel-web
Command: npx skills add https://github.com/jagreehal/autotel --skill autotel-web

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the integration of distributed tracing into browser applications, enabling developers to monitor performance, errors, and user experience seamlessly.

Core Features & Use Cases

  • Lean mode attaches W3C traceparent headers for backend trace continuation, optimizing for minimal size and overhead.
  • Full mode provides real browser spans, Web Vitals, error capturing, and OTLP export for comprehensive client-side observability.
  • Use Case: A developer wants to instrument a React SPA to track user interactions, network timings, and frontend errors, then export data to an observability backend for centralized monitoring.

Quick Start

Initialize the SDK in your web app to start capturing distributed traces and performance metrics immediately.

Frequently Asked Questions about autotel-web

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

FAQPage Schema
How do I add distributed tracing to a browser application?▼

You can add distributed tracing to a browser application by initializing a JavaScript SDK to capture performance metrics and frontend errors, which then exports the trace data to an observability backend.

What is the difference between lean and full mode for web tracing?▼

Lean mode optimizes for minimal overhead by attaching W3C traceparent headers for backend trace continuation. Full mode captures real browser spans, Web Vitals, and errors with OTLP export for comprehensive observability.

Can I track Web Vitals and frontend errors in a React SPA?▼

Yes, you can track Web Vitals and frontend errors in a React SPA by using full mode instrumentation to capture user interactions and network timings, then exporting the data via OTLP.

How do I continue a backend trace from the browser?▼

To continue a backend trace from the browser, use lean mode to attach W3C traceparent headers to your outgoing network requests, linking the frontend tracing context with your backend services.

Does browser distributed tracing work with OTLP export?▼

Yes, browser distributed tracing supports OTLP export compatibility, allowing you to send captured client-side spans, Web Vitals, and error data directly to an observability backend.

What is the best way to monitor client-side performance without high overhead?▼

The best way to monitor client-side performance without high overhead is using lean mode distributed tracing, which provides minimal size impact while enabling backend trace continuation for performance insights.

Related Skills

Explore More Software Engineering Skills→
raphaelmansuyraphaelmansuy
2

otel-observability

Enable OpenTelemetry traces, metrics, and logs across AgentStack components.

Community
Advanced
Arnutt-NArnutt-N

performance-monitor

Track real-time performance metrics for HR-IMS applications with threshold alerts.

Community
Advanced
AgentientAgentient
2

distributed-tracing-context-propagation

Propagate W3C trace context across HTTP service boundaries.

Official
Advanced
serkan-ozalserkan-ozal
7

observability

Trace distributed requests and monitor console and network activity in browser-based apps.

Community
Advanced