devtools-instrumentation

Emit consolidated diagnostic events to TanStack Devtools from library boundaries.

485|92|Updated Jul 25, 2025
One-click install
npx skills add https://github.com/TanStack/devtools --skill devtools-instrumentation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: devtools-instrumentation
Source: https://github.com/TanStack/devtools/tree/main/packages/event-bus-client/skills/devtools-instrumentation
Command: npx skills add https://github.com/TanStack/devtools --skill devtools-instrumentation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of instrumenting libraries to emit critical diagnostic data to TanStack Devtools, minimizing noise and maximizing insight for debugging.

Core Features & Use Cases

  • Strategic Event Emission: Place emit() calls at architecture boundaries (middleware, state transitions, lifecycle hooks) for maximum diagnostic value.
  • Consolidated Events: Reduce high-frequency emissions into single, informative events.
  • DRY Payloads: Reuse common data fields across multiple event types.
  • Production Guarding: Ensure minimal overhead in production environments.
  • Transparent Bridging: Seamlessly send events from server to client and across browser tabs.
  • Use Case: Instrumenting a custom router library to emit a single request-processed event that includes middleware chain duration, status, and error information, allowing for quick identification of performance bottlenecks.

Quick Start

Use the devtools-instrumentation skill to add event emissions to the router's middleware pipeline boundaries.

Frequently Asked Questions about devtools-instrumentation

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

FAQPage Schema
How do I instrument a library for debugging without creating excessive event noise?

Library instrumentation reduces noise by placing emit calls at architecture boundaries like state transitions and lifecycle hooks. High-frequency events are consolidated into single emissions, and common data fields are reused across event types to maximize diagnostic value.

What is the best way to monitor library performance bottlenecks during state transitions?

Performance monitoring during state transitions is handled by emitting diagnostic events at middleware boundaries. A single processed event can include middleware chain duration, status, and error information to identify bottlenecks quickly.

Does devtools instrumentation work in both server and client production environments?

Devtools instrumentation supports both server and client environments with production-ready guarding. This ensures minimal performance overhead while transparently bridging diagnostic events from the server to the client and across browser tabs.

How do I emit diagnostic events from a custom router library to track middleware execution?

Emitting diagnostic events from a custom router library involves placing emit calls at middleware pipeline boundaries. This captures a single request-processed event containing duration, status, and error data for deep debugging insights.

Can I reuse common payload data fields across multiple diagnostic event types?

Common payload data fields can be reused across multiple diagnostic event types using a DRY payload approach. This avoids redundant data emission and streamlines the diagnostic output for more efficient library debugging.

When should I consolidate high-frequency diagnostic events during library debugging?

High-frequency diagnostic events should be consolidated when they occur rapidly at architecture boundaries. Consolidating these emissions into a single informative event prevents performance monitoring overhead and reduces devtools clutter.