instrumentation-and-telemetry skill

Overview

This skill implements deep instrumentation pipelines for React 18 applications to capture tracing, metrics, and real-user monitoring data. It focuses on tying UI render behavior to backend traces and producing dashboards for key UX metrics like TTI, INP, and CLS. The goal is reliable, privacy-aware telemetry that supports performance debugging and SLOs.

How this skill works

The implementation instruments React scheduler and render timings to capture render durations, lane metadata, and interaction contexts. It correlates client-side events with backend traces using shared trace IDs and a sample data pipeline that exports spans and metrics to observability backends. The package includes a sample dashboard configuration and synthetic benchmark hooks to validate telemetry accuracy.

When to use it

• You want to correlate frontend performance with API and backend latency for debugging and SLA analysis.
• You need granular render timing and scheduler lane data from React 18 to investigate jank and slow frames.
• You require production-safe sampling strategies that preserve tail latency events for incident investigation.
• You are building UX-focused dashboards (TTI, INP, CLS) and need consistent instrumentation across releases.
• You must validate telemetry accuracy with synthetic benchmarks before shipping to users.

Best practices

• Attach trace IDs at the earliest network request point and propagate them through backend services to enable end-to-end correlation.
• Use adaptive sampling that boosts collection for tail events and error conditions while preserving overall cost constraints.
• Limit PII in telemetry by hashing or omitting user-identifying fields and documenting privacy constraints.
• Validate instrumentation with controlled synthetic tests to detect measurement drift or browser-behavior changes.
• Expose high-cardinality metadata (e.g., route, feature flag) sparingly and use roll-up tags for dashboards to avoid metric explosion.

Example use cases

• Investigate a regression where specific routes show increased TTI after a frontend change by correlating render spans with API spans.
• Detect and alert on INP regressions that coincide with backend timeouts, enabling cross-team triage.
• Produce dashboards showing percentiles for paint and long tasks, filtered by user cohort or feature flag.
• Design a sampling policy that retains 100% of error traces and 10% of normal requests while preserving tail latency signals.
• Run synthetic benchmarks during CI to ensure telemetry captures expected spans and to catch instrumentation regressions.

FAQ