observability

Diagnose Rango request latency with performance waterfalls, Server-Timing, and structured telemetry.

Updated Nov 7, 2025
One-click install
npx skills add https://github.com/rangojs/rango --skill observability-rangojs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: observability
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/observability
Command: npx skills add https://github.com/rangojs/rango --skill observability-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a Rango request feels slow or serves stale data, you need visibility into where time is spent across loaders, rendering, caching, and revalidation. This Skill shows how to enable per-request performance waterfalls and wire structured telemetry into production monitoring. ## Core Features & Use Cases - Performance timeline: Enable debugPerformance globally or per-request via ctx.debugPerformance() to print a shared-axis waterfall and emit a Server-Timing header showing handler, render, loader, cache, and middleware spans. - Structured telemetry: Attach a pluggable sink (createConsoleSink, custom emit(event)) to receive lifecycle events like request.start/end/error, loader.start/end/error, cache.decision, and revalidation.decision. - Platform tracing: Use createOTelTracing/createOTelSink for OpenTelemetry, createCloudflareTracing for Workers native spans, or createVercelTracing for Vercel Functions, covering phases like rango.request, rango.loader, rango.render, rango.response, and rango.background. - Use Case: A page renders stale data after a form submission. Enable debugPerformance plus a console telemetry sink, then inspect revalidation.decision events and cache spans to see which segment re-ran or was skipped. ## Quick Start Enable debugPerformance on my Rango router and show me the request waterfall so I can find which loader is blocking first paint.

Frequently Asked Questions about observability

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

FAQPage Schema
How do I debug slow Rango requests?

Enable debugPerformance in createRouter or call ctx.debugPerformance() in middleware for selected requests. Rango prints a shared-axis waterfall and adds a Server-Timing header showing handler, render, loader, cache, and middleware spans so the slow phase is visible.

How do I add OpenTelemetry tracing to a Rango router?

Pass createOTelTracing(tracer) to the tracing slot for phase spans and createOTelSink(tracer) to the telemetry slot for discrete events like handler errors and cache decisions. Both come from @rangojs/router and use a tracer from @opentelemetry/api.

Does Rango tracing work on Cloudflare Workers?

Yes. Use createCloudflareTracing from @rangojs/router/cloudflare to emit phases as native Cloudflare custom spans with no OpenTelemetry dependency. Note that Server-Timing durations read near zero on deployed Workers because timers are frozen during request execution.

Why is my Server-Timing header showing zero durations on deployed Workers?

On production Cloudflare Workers, timers are frozen during request execution as a Spectre mitigation, so durations only advance across awaited I/O. Use the waterfall locally and rely on client-side timing plus structured telemetry for deployed measurement.

How do I debug stale data and revalidation in Rango?

Enable debugPerformance together with a telemetry sink, then inspect revalidation.decision events to see which segment re-ran or skipped, cache.decision events for hit/miss/stale behavior, and loader spans to confirm loaders overlap rendering.

Does Rango observability add overhead when disabled?

No. debugPerformance is off by default and telemetry emits nothing unless a sink is configured. Off-platform tracing calls are transparent pass-throughs, so requests behave as if tracing were off.