autotel-tanstack

Implement OpenTelemetry tracing for TanStack Start with middleware and server function wrappers.

7|3|Updated Nov 26, 2025
One-click install
npx skills add https://github.com/jagreehal/autotel --skill autotel-tanstack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: autotel-tanstack
Source: https://github.com/jagreehal/autotel/tree/main/packages/autotel-tanstack/skills/autotel-tanstack
Command: npx skills add https://github.com/jagreehal/autotel --skill autotel-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to add comprehensive observability to TanStack Start applications by simplifying instrumentation and tracing setup.

Core Features & Use Cases

  • Zero-config instrumentation: Automatically trace server functions, route loaders, middleware, and request handlers in React and Solid Start projects.
  • Flexible tracing approaches: Supports middleware-based, explicit wrapper, and manual configurations for diverse application architectures.
  • Use Case: For example, a developer building a server-rendered React app can effortlessly incorporate distributed tracing, monitor request latencies, and debug performance issues across client and server components.

Quick Start

Import 'autotel-tanstack/auto' and configure environment variables for tracing to immediately enable zero-config tracing across your app.

Frequently Asked Questions about autotel-tanstack

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

FAQPage Schema
How do I add OpenTelemetry tracing to a TanStack Start app?

To add OpenTelemetry tracing to a TanStack Start app, import the 'autotel-tanstack/auto' module and configure the required environment variables to enable zero-config instrumentation across your application.

What is zero-config instrumentation for React server functions?

Zero-config instrumentation automatically traces server functions, route loaders, middleware, and request handlers in React and Solid Start projects without requiring manual setup for each component.

Can I use manual tracing wrappers instead of middleware in TanStack Start?

Yes, you can use manual tracing wrappers instead of middleware. The Skill supports flexible tracing approaches including middleware-based, explicit wrapper, and manual configurations for diverse application architectures.

Does OpenTelemetry tracing work with route loaders in TanStack Start?

Yes, OpenTelemetry tracing works with route loaders in TanStack Start. The Skill provides specific loader instrumentation to facilitate comprehensive tracing and observability for your web application's data fetching.

What is the best way to monitor request latency in a server-rendered React app?

The best way to monitor request latency in a server-rendered React app is by implementing distributed tracing to track performance across client and server components, which this Skill simplifies through automated instrumentation.