@rangojs/router 0.0.0-experimental.126 → 0.0.0-experimental.127

package/src/route-definition/dsl-helpers.ts

@@ -524,6 +524,22 @@ const middleware: RouteHelpers<any, any>["middleware"] = (...args: any[]) => {
   } as MiddlewareItem;
 };
 
+// Slot names become part of segment ids: a parallel/intercept slot is encoded
+// as `${shortCode}.${slotName}`, and loader segments append `D${index}.${loaderId}`.
+// A "." in the slot name collides with that separator -- loaderParentId
+// (segment-system.tsx) strips from the FIRST `D<index>.`, so a name like
+// "@D3.foo" is mis-cut to "@" and the loader's data is silently dropped. Reject
+// the dot at definition time so the failure is loud, not a corrupted tree at
+// runtime. (A bare "D" without a trailing dot -- e.g. "@Detail" -- is fine.)
+function assertValidSlotName(slotName: string): void {
+  invariant(
+    !slotName.includes("."),
+    `Slot name "${slotName}" must not contain ".". The dot is a reserved ` +
+      `segment-id separator; a name like "@D3.foo" corrupts loader segment-id ` +
+      `parsing and silently drops the loader's data. Rename the slot.`,
+  );
+}
+
 const parallel: RouteHelpers<any, any>["parallel"] = (slots, use) => {
   const { store, ctx } = requireDslContext(
     "parallel() must be called inside urls()",
@@ -539,6 +555,7 @@ const parallel: RouteHelpers<any, any>["parallel"] = (slots, use) => {
   );
 
   const slotNames = Object.keys(slots as Record<string, any>) as `@${string}`[];
+  for (const slotName of slotNames) assertValidSlotName(slotName);
 
   const namespace = `${ctx.namespace}.$${store.getNextIndex("parallel")}`;
 
@@ -698,6 +715,8 @@ const intercept = (
     "intercept() cannot be used inside parallel()",
   );
 
+  assertValidSlotName(slotName);
+
   const namespace = `${ctx.namespace}.$${store.getNextIndex("intercept")}.${slotName}`;
 
   // Dot-prefixed = local (add include prefix), unprefixed = global (use as-is)

package/src/router/instrument.ts

@@ -0,0 +1,230 @@
+/**
+ * Phase + event instrumentation — the single internal API for observing router
+ * work.
+ *
+ * The router exposes the same work on three surfaces, and the rule is: each
+ * surface has exactly one owner here, so they cannot drift.
+ *
+ *   - observePhase(): a span of work. Co-emits the `debugPerformance` perf
+ *     metric (metrics store -> [RSC Perf] timeline + Server-Timing) AND the
+ *     platform span (tracing runner -> Cloudflare custom spans / OTel). From one
+ *     wrap site, so the span set is always a subset of the perf phases and the
+ *     two can't disagree. Phases that meter their own perf metric with a finer
+ *     decomposition (request, middleware) pass `metric: false` and get the span
+ *     only — still co-located, still one owner per surface.
+ *   - observeEvent(): a discrete fact (TelemetrySink): cache decisions,
+ *     revalidation decisions, handler errors, timeouts, origin rejections.
+ *     Event-shaped, not phase-shaped — derived from the same call sites but a
+ *     separate surface from spans.
+ *
+ * Why phases, not events, are the parent abstraction: Cloudflare's span API is
+ * callback-bound (enterSpan wraps the actual work), so the callback boundary is
+ * the source of truth — async-context nesting (a loader's KV/D1/fetch spans
+ * landing under rango.loader) cannot be faithfully reconstructed from
+ * after-the-fact start/end events. Spans drive; events are emitted alongside.
+ *
+ * Phase identity lives in the PHASES registry below, so the raw `rango.*` span
+ * names, perf-metric labels, and span attributes have a single definition each.
+ *
+ * When neither perf surface nor tracing is active on the request, observePhase
+ * is a direct call — no wrapper, no timestamp, no allocation.
+ */
+
+import { _getRequestContext } from "../server/request-context.js";
+import { isAutoGeneratedRouteName } from "../route-name.js";
+import { getRouterContext } from "./router-context.js";
+import { resolveSink, safeEmit, type TelemetryEvent } from "./telemetry.js";
+import { appendMetric } from "./metrics.js";
+import {
+  NOOP_TRACE_SPAN,
+  traceSpan,
+  runThenSettle,
+  type TracePhase,
+  type TraceSpan,
+} from "./tracing.js";
+
+/**
+ * Perf-metric boundary for a phase, or `false` for span-only. `false` means the
+ * caller records its own perf metric with a finer decomposition than a single
+ * wrap (request: a grand total incl. pre-context bootstrap; middleware: pre/post
+ * own-time), so observePhase opens the span but records no metric of its own.
+ */
+export type PhaseMetric =
+  | { label: string | (() => string); depth?: number }
+  | false;
+
+/** Describes one observable phase across the perf and span surfaces. */
+export interface PhaseSpec {
+  /** Perf timeline label + Server-Timing name, or false for span-only. */
+  metric: PhaseMetric;
+  /** Span phase gate (per-phase toggle in the tracing config). */
+  tracePhase: TracePhase;
+  /** Span name (rango.*). */
+  spanName: string;
+  /** Span attributes set automatically when the span opens. */
+  attributes?: Record<string, string | number | boolean>;
+}
+
+/**
+ * The router's observable phases. One definition per phase keeps the `rango.*`
+ * span names, perf-metric labels, and identifying attributes from spreading
+ * across call sites.
+ */
+export const PHASES = {
+  /** Whole request pipeline. Span only — handler:total is metered directly. */
+  request: {
+    metric: false,
+    tracePhase: "request",
+    spanName: "rango.request",
+  } as PhaseSpec,
+
+  /** One middleware (incl. its downstream onion). Span only — the perf metric
+   * is the middleware's exclusive pre/post own-time, recorded directly.
+   * `metricLabel` is that metric's label (e.g. "middleware:auth@*"); it doubles
+   * as the rango.middleware_name span attribute. */
+  middleware: (metricLabel: string): PhaseSpec => ({
+    metric: false,
+    tracePhase: "middleware",
+    spanName: "rango.middleware",
+    attributes: { "rango.middleware_name": metricLabel },
+  }),
+
+  /** The server-action execution (decode args + run the action body), before
+   * the revalidation render. The metric label carries the action id (the
+   * _rsc_action / action $$id) so the perf timeline shows WHICH action ran, not
+   * just "an action"; the span also gets it as rango.action_id. */
+  action: (id: string): PhaseSpec => ({
+    metric: { label: `action:${id}` },
+    tracePhase: "action",
+    spanName: "rango.action",
+    attributes: { "rango.action_id": id },
+  }),
+
+  /**
+   * One loader execution. `depth` is the perf-timeline indentation: 2 (default)
+   * for render-time loaders that nest under the render phase; 1 for a standalone
+   * fetchable `_rsc_loader` request, which has no render parent.
+   */
+  loader: (id: string, depth: number = 2): PhaseSpec => ({
+    metric: { label: `loader:${id}`, depth },
+    tracePhase: "loader",
+    spanName: "rango.loader",
+    attributes: { "rango.loader_id": id },
+  }),
+
+  /** Whole render phase: match + serialize + SSR. The metric label is resolved
+   * lazily at record time (after match has set the route name) so the perf
+   * timeline shows WHICH route rendered: `render:total:<routeName>`, falling back
+   * to `render:total` when there is no named route (unmatched / auto-generated). */
+  render: {
+    metric: {
+      label: () => {
+        const routeName = _getRequestContext()?._routeName;
+        return routeName && !isAutoGeneratedRouteName(routeName)
+          ? `render:total:${routeName}`
+          : "render:total";
+      },
+    },
+    tracePhase: "render",
+    spanName: "rango.render",
+  } as PhaseSpec,
+
+  /** SSR HTML render from the RSC stream. Colon-delimited like the other ssr:*
+   * setup metrics (ssr:module-load / ssr:stream-mode). */
+  ssr: {
+    metric: { label: "ssr:render-html" },
+    tracePhase: "ssr",
+    spanName: "rango.ssr",
+  } as PhaseSpec,
+} as const;
+
+/**
+ * Instrument one unit of work: open its span AND (unless `metric: false`) record
+ * its perf metric, from a single wrap site. fn is invoked exactly once with the
+ * span (a no-op span when tracing is off); its return value is returned
+ * unchanged and thrown errors / rejected promises propagate unchanged. When fn
+ * returns a promise both the metric duration and the span end when it settles.
+ *
+ * Reads the metrics store + tracing off the RequestContext ALS, which is active
+ * for the WHOLE request — contrast observeEvent, which reads the RouterContext
+ * ALS (entered later, during match).
+ */
+export function observePhase<T>(
+  spec: PhaseSpec,
+  fn: (span: TraceSpan) => T,
+): T {
+  const reqCtx = _getRequestContext();
+  const store = reqCtx?._metricsStore;
+  const tracing = reqCtx?._tracing;
+
+  // Neither surface active: direct call, zero overhead.
+  if (!store && !tracing) return fn(NOOP_TRACE_SPAN);
+
+  // Attributes only land on a real span, so skip the wrapper when only the perf
+  // surface is active (traceSpan would apply them to NOOP_TRACE_SPAN for nothing).
+  const attributes = spec.attributes;
+  const wrapped: (span: TraceSpan) => T =
+    attributes && tracing
+      ? (span) => {
+          for (const key in attributes) span.setAttribute(key, attributes[key]);
+          return fn(span);
+        }
+      : fn;
+
+  const runSpan = (): T =>
+    traceSpan(tracing, spec.tracePhase, spec.spanName, wrapped);
+
+  // Span-only — no perf metric to record (metric:false, or perf surface off).
+  const metric = spec.metric;
+  if (!store || metric === false) return runSpan();
+
+  // Record the phase duration on EVERY termination — success or failure — so a
+  // failed loader/render still shows its timing in the perf report (parity with
+  // the old track().finally() path it replaced).
+  const start = performance.now();
+  return runThenSettle(runSpan, () => {
+    // The label may be lazy (resolved at record time, e.g. render:total needs the
+    // route name that match sets partway through the wrapped work).
+    const label =
+      typeof metric.label === "function" ? metric.label() : metric.label;
+    appendMetric(store, label, start, performance.now() - start, metric.depth);
+  });
+}
+
+/**
+ * Emit one discrete telemetry event (the event-shaped counterpart to
+ * observePhase). Resolves the sink from the active router context and stamps the
+ * request id when the event omits it. No-op (and total — never throws) when no
+ * sink is configured.
+ *
+ * This is the canonical emitter for SYNCHRONOUS facts that fire inside the
+ * request's ALS scope (handler errors, timeouts, origin rejections, revalidation
+ * decisions). A few emitters deliberately stay on the lower-level
+ * resolveSink + safeEmit because observeEvent's lazy, per-call
+ * getRouterContext() read does not fit them — keep this the complete list:
+ *   - router.ts wrapLoaderPromise (loader.start/end/error) and
+ *     segment-resolution/streamed-handler-telemetry.ts (streamed handler.error)
+ *     capture the sink + request id EAGERLY and emit from a fire-and-forget
+ *     continuation that runs after the ALS scope may have unwound.
+ *   - router/match-handlers.ts resolves the sink ONCE for the hot match-pipeline
+ *     loop (request.start/end/error, cache.decision, ...).
+ *   - segment-resolution/helpers.ts emits via a caller-provided report.telemetry
+ *     sink rather than the ALS router context.
+ */
+export function observeEvent(event: TelemetryEvent): void {
+  // getRouterContext() either throws (real impl, outside a router context — e.g.
+  // the build-time prerender path) or returns null/undefined (e.g. mocked).
+  // Either way there is no sink to emit to, so swallow and return.
+  let routerCtx: ReturnType<typeof getRouterContext> | null | undefined;
+  try {
+    routerCtx = getRouterContext();
+  } catch {
+    return;
+  }
+  if (!routerCtx?.telemetry) return;
+  const stamped =
+    event.requestId === undefined && routerCtx.requestId !== undefined
+      ? ({ ...event, requestId: routerCtx.requestId } as TelemetryEvent)
+      : event;
+  safeEmit(resolveSink(routerCtx.telemetry), stamped);
+}

package/src/router/loader-resolution.ts

@@ -5,8 +5,8 @@
  */
 
 import type { ReactNode } from "react";
-import { track } from "../server/context";
 import type { EntryData } from "../server/context";
+import { observePhase, PHASES } from "./instrument.js";
 import { contextGet } from "../context-var.js";
 import type {
   ResolvedSegment,
@@ -382,7 +382,11 @@ function createLoaderExecutor<TEnv>(
       },
     };
 
-    const doneLoader = track(`loader:${loader.$$id}`, 2);
+    // Meter this loader once via observePhase (loader:<id> perf metric +
+    // rango.loader span); loaderFn runs inside the span callback so its KV/D1/
+    // fetch spans nest under it. This is one of the observePhase loader funnels —
+    // see instrument.ts for the single-metering contract.
+    //
     // Run the loader body inside loader scope so request-scoped reads
     // (cookies()/headers() and non-cacheable ctx.get) are exempt from the
     // cache-purity guards: loaders always run fresh, so their reads never leak
@@ -392,14 +396,15 @@ function createLoaderExecutor<TEnv>(
     // throw. rendered() gating uses the captured isDslLoader (above), so this
     // does not grant rendered() to handler-invoked loaders. Uses a body-only
     // scope, so isInsideLoaderScope() / barrier / deadlock gating is unchanged.
-    const promise = Promise.resolve(
-      runInsideLoaderBodyScope(() =>
-        loaderFn(loaderCtx as LoaderContext<any, TEnv>),
-      ),
-    ).finally(() => {
-      pendingLoaders.delete(loader.$$id);
-      doneLoader();
-    });
+    const promise = observePhase(PHASES.loader(loader.$$id), () =>
+      Promise.resolve(
+        runInsideLoaderBodyScope(() =>
+          loaderFn(loaderCtx as LoaderContext<any, TEnv>),
+        ),
+      ).finally(() => {
+        pendingLoaders.delete(loader.$$id);
+      }),
+    );
 
     loaderPromises.set(loader.$$id, promise);
     return promise;

package/src/router/match-middleware/cache-lookup.ts

@@ -94,7 +94,7 @@
 import type { ResolvedSegment } from "../../types.js";
 import type { MatchContext, MatchPipelineState } from "../match-context.js";
 import { getRouterContext, type RouterContext } from "../router-context.js";
-import { resolveSink, safeEmit } from "../telemetry.js";
+import { observeEvent } from "../instrument.js";
 import { pushRevalidationTraceEntry, isTraceActive } from "../logging.js";
 import { treeHasStreaming } from "./segment-resolution.js";
 import type { PrerenderStore, PrerenderEntry } from "../../prerender/store.js";
@@ -546,19 +546,14 @@ export function withCacheLookup<TEnv>(
         traceSource: "cache-hit",
       });
 
-      const routerCtx = getRouterContext<TEnv>();
-      if (routerCtx.telemetry) {
-        const tSink = resolveSink(routerCtx.telemetry);
-        safeEmit(tSink, {
-          type: "revalidation.decision",
-          timestamp: performance.now(),
-          requestId: routerCtx.requestId,
-          segmentId: segment.id,
-          pathname: ctx.pathname,
-          routeKey: ctx.routeKey,
-          shouldRevalidate,
-        });
-      }
+      observeEvent({
+        type: "revalidation.decision",
+        timestamp: performance.now(),
+        segmentId: segment.id,
+        pathname: ctx.pathname,
+        routeKey: ctx.routeKey,
+        shouldRevalidate,
+      });
 
       if (!shouldRevalidate) {
         segment.component = null;

package/src/router/match-middleware/cache-store.ts

@@ -168,6 +168,18 @@ export function withCacheStore<TEnv>(
     if (!requestCtx) return;
 
     const cacheScope = ctx.cacheScope;
+
+    // Record the route's segment-DSL cache tags into the request tag union NOW,
+    // synchronously in the pipeline. The actual store write (cacheRoute) runs in
+    // requestCtx.waitUntil() below — and the proactive path re-resolves the whole
+    // tree first — so cacheRoute's own tag recording races the document cache's
+    // post-body-drain snapshot of _requestTags. On a first-write miss the document
+    // tag union could miss these tags and revalidateTag()/updateTag() would not
+    // invalidate the cached document. Recording here (before the snapshot) closes
+    // the window for both the direct and proactive write paths; the duplicate
+    // record inside cacheRoute is idempotent.
+    cacheScope.recordTags(requestCtx);
+
     const reqId = INTERNAL_RANGO_DEBUG
       ? getOrCreateRequestId(ctx.request)
       : undefined;

package/src/router/middleware.ts

@@ -19,6 +19,7 @@ import {
 } from "../redirect-origin.js";
 import { isAutoGeneratedRouteName } from "../route-name.js";
 import { appendMetric, createMetricsStore } from "./metrics.js";
+import { observePhase, PHASES } from "./instrument.js";
 import { stripInternalParams } from "./handler-context.js";
 import { isWebSocketUpgradeResponse } from "../response-utils.js";
 
@@ -478,9 +479,17 @@ export async function executeMiddleware<TEnv>(
       return nextPromise;
     };
 
+    // Wrap the middleware (including its downstream next() chain) in its span
+    // via the unified phase API. metric:false — the middleware's perf metric is
+    // its exclusive pre/post own-time, recorded directly above and below, finer
+    // than a single wrap. Spans nest by async context, so this onions
+    // middleware-over-middleware and the core handler underneath. Pass-through
+    // when neither surface is active.
     let result: Response | void;
     try {
-      result = await entry.handler(ctx, wrappedNext);
+      result = await observePhase(PHASES.middleware(metricLabel), () =>
+        entry.handler(ctx, wrappedNext),
+      );
     } catch (error) {
       // Thrown Response is short-circuit control flow, not an error.
       // Fall through to the `if (result instanceof Response)` branch below
@@ -622,6 +631,7 @@ export async function executeInterceptMiddleware<TEnv>(
       return stubResponse;
     }
 
+    const ordinal = index;
     const middleware = middlewares[index++];
     const ctx = createMiddlewareContext(
       request,
@@ -643,9 +653,20 @@ export async function executeInterceptMiddleware<TEnv>(
       return next();
     };
 
+    // Span-wrap each intercept middleware as rango.middleware (metric:false —
+    // intercept runs inside the render phase already metered by render:total, so
+    // it contributes a span but no separate perf metric). Bare MiddlewareFns
+    // have no pattern, so the label is scoped to "*" like a pattern-less entry.
+    const label = getMiddlewareMetricLabel(
+      { handler: middleware, pattern: null } as MiddlewareEntry<TEnv>,
+      ordinal,
+    );
+
     let result: Response | void;
     try {
-      result = await middleware(ctx, guardedNext);
+      result = await observePhase(PHASES.middleware(label), () =>
+        middleware(ctx, guardedNext),
+      );
     } catch (error) {
       // Thrown Response is short-circuit control flow, parity with the
       // explicit-return path below. Real errors propagate.

package/src/router/prerender-match.ts

@@ -17,6 +17,7 @@ import { setupBuildUse } from "./loader-resolution.js";
 import { loadManifest } from "./manifest.js";
 import { traverseBack } from "./pattern-matching.js";
 import type { RouterContext } from "./router-context.js";
+import type { ResolveSegmentOptions } from "./segment-resolution.js";
 import { runWithRouterContext } from "./router-context.js";
 import type { EntryData, InterceptEntry } from "../server/context";
 import type {
@@ -40,7 +41,7 @@ export interface PrerenderMatchDeps<TEnv = any> {
     params: Record<string, string>,
     context: HandlerContext<any, TEnv>,
     loaderPromises: Map<string, Promise<any>>,
-    options?: { skipLoaders?: boolean },
+    options?: ResolveSegmentOptions,
   ) => Promise<ResolvedSegment[]>;
 }
 
@@ -257,7 +258,9 @@ export async function matchForPrerender<TEnv = any>(
         matchedParams,
         buildCtx,
         loaderPromises,
-        { skipLoaders: true },
+        // throwOnError: a render failure (or `throw new Skip()`) must reach the
+        // build/dev caller, not be baked into a frozen error page (issue #587).
+        { skipLoaders: true, throwOnError: true },
       );
 
       // 9. Detect passthrough sentinel: handler returned ctx.passthrough().

package/src/router/router-context.ts

@@ -19,6 +19,7 @@ import type {
 } from "../types.js";
 import type { RouteMatchResult } from "./pattern-matching.js";
 import type { TelemetrySink } from "./telemetry.js";
+import type { ResolveSegmentOptions } from "./segment-resolution.js";
 
 /**
  * Revalidation context passed to segment resolution
@@ -195,7 +196,7 @@ export interface RouterContext<TEnv = any> {
     params: Record<string, string>,
     handlerContext: HandlerContext<any, TEnv>,
     loaderPromises: Map<string, Promise<any>>,
-    options?: { skipLoaders?: boolean },
+    options?: ResolveSegmentOptions,
   ) => Promise<ResolvedSegment[]>;
 
   resolveAllSegmentsGenerator?: (

package/src/router/router-interfaces.ts

@@ -14,6 +14,7 @@ import { RSC_ROUTER_BRAND } from "./router-registry.js";
 import type { RangoOptions, RootLayoutProps } from "./router-options.js";
 import type { DefaultVars } from "../types/global-namespace.js";
 import type { ResolvedTimeouts, OnTimeoutCallback } from "./timeout.js";
+import type { ResolvedTracing } from "./tracing.js";
 
 /**
  * Options passed to router.fetch(), router.match(), and other request entrypoints.
@@ -320,6 +321,13 @@ export interface RangoInternal<
    */
   readonly debugPerformance?: boolean;
 
+  /**
+   * Resolved platform phase-span tracing (Cloudflare custom spans or OTel), or
+   * undefined when off. Threaded onto the request context and read at each
+   * traced phase.
+   */
+  readonly tracing?: ResolvedTracing;
+
   /**
    * Whether ?__debug_manifest is allowed in production.
    * Always enabled in development.

package/src/router/router-options.ts

@@ -11,6 +11,7 @@ import type { UrlPatterns } from "../urls.js";
 import type { UrlBuilder } from "../urls/pattern-types.js";
 import type { NamedRouteEntry } from "./content-negotiation.js";
 import type { TelemetrySink } from "./telemetry.js";
+import type { RouterTracingConfig } from "./tracing.js";
 import type { RouterTimeouts, OnTimeoutCallback } from "./timeout.js";
 
 /**
@@ -574,11 +575,14 @@ export interface RangoOptions<TEnv = any> {
   onTimeout?: OnTimeoutCallback<TEnv>;
 
   /**
-   * Telemetry sink for structured lifecycle events.
+   * Telemetry sink for structured, discrete lifecycle EVENTS: request
+   * start/end/error, loader start/end/error, handler errors, cache decisions,
+   * revalidation decisions, timeouts, origin rejections.
    *
-   * When provided, the router emits events for request start/end,
-   * loader start/end/error, handler errors, cache decisions, and
-   * revalidation decisions.
+   * This is the EVENT surface. Phase-duration SPANS (request/loader/render/ssr
+   * timing wired into a tracing backend) come from the separate `tracing`
+   * option below — a sink does not emit them, because async-context nesting
+   * cannot be faithfully reconstructed from after-the-fact start/end events.
    *
    * No-op when not configured (zero overhead).
    *
@@ -591,6 +595,18 @@ export interface RangoOptions<TEnv = any> {
    * });
    * ```
    *
+   * @example OpenTelemetry — pair the event sink with the tracing slot
+   * ```typescript
+   * import { createOTelTracing, createOTelSink } from "@rangojs/router";
+   * import { trace } from "@opentelemetry/api";
+   *
+   * const tracer = trace.getTracer("my-app");
+   * const router = createRouter({
+   *   tracing: createOTelTracing(tracer), // phase spans
+   *   telemetry: createOTelSink(tracer), // discrete-fact events
+   * });
+   * ```
+   *
    * @example Custom sink
    * ```typescript
    * const router = createRouter({
@@ -604,6 +620,44 @@ export interface RangoOptions<TEnv = any> {
    */
   telemetry?: TelemetrySink;
 
+  /**
+   * Span tracing for the router's performance phases (request, middleware, action,
+   * loaders, render, ssr). Connects the same phases shown in the
+   * `debugPerformance` timeline to the host platform's tracing system. This is
+   * the SPAN surface (the `telemetry` option above is the event surface).
+   *
+   * Two factories produce a config, both for this slot:
+   * - `createOTelTracing(tracer)` from `@rangojs/router` — any platform with an
+   *   OpenTelemetry SDK (including Node). Bridges the phases onto
+   *   `tracer.startActiveSpan`.
+   * - `createCloudflareTracing()` from `@rangojs/router/cloudflare` — Cloudflare
+   *   Workers native custom spans, alongside the automatic KV/D1/fetch spans.
+   *
+   * When tracing is unset — or off-platform (no OTel SDK / no Cloudflare tracing
+   * destination) — every span call falls through to the work directly, so the
+   * request behaves exactly as if tracing were off.
+   *
+   * @example OpenTelemetry
+   * ```typescript
+   * import { createOTelTracing } from "@rangojs/router";
+   * import { trace } from "@opentelemetry/api";
+   *
+   * const router = createRouter({
+   *   tracing: createOTelTracing(trace.getTracer("my-app")),
+   * });
+   * ```
+   *
+   * @example Cloudflare
+   * ```typescript
+   * import { createCloudflareTracing } from "@rangojs/router/cloudflare";
+   *
+   * const router = createRouter({
+   *   tracing: createCloudflareTracing({ spans: { ssr: false } }),
+   * });
+   * ```
+   */
+  tracing?: RouterTracingConfig;
+
   /**
    * SSR configuration options.
    *

package/src/router/segment-resolution/fresh.ts

@@ -19,8 +19,6 @@ import type {
 } from "../../types";
 import type { SegmentResolutionDeps } from "../types.js";
 import { resolveLoaderData } from "./loader-cache.js";
-import { _getRequestContext } from "../../server/request-context.js";
-import { appendMetric } from "../metrics.js";
 import {
   handleHandlerResult,
   tryStaticHandler,
@@ -59,7 +57,6 @@ export async function resolveLoaders<TEnv>(
   const shortCode = shortCodeOverride ?? entry.shortCode;
   const hasLoading = "loading" in entry && entry.loading !== undefined;
   const loadingDisabled = hasLoading && entry.loading === false;
-  const ms = _getRequestContext()?._metricsStore;
 
   if (!loadingDisabled) {
     // Streaming loaders: promises kick off now, settle during RSC serialization.
@@ -102,7 +99,6 @@ export async function resolveLoaders<TEnv>(
   const pendingLoaderData = loaderEntries.map((loaderEntry, i) => {
     const { loader } = loaderEntry;
     const segmentId = `${shortCode}D${i}.${loader.$$id}`;
-    const start = performance.now();
     const wrapped = deps.wrapLoaderPromise(
       runInsideLoaderScope(() =>
         resolveLoaderData(loaderEntry, ctx, ctx.pathname),
@@ -111,26 +107,17 @@ export async function resolveLoaders<TEnv>(
       segmentId,
       ctx.pathname,
     );
-    return { wrapped, start, segmentId, loaderId: loader.$$id };
+    return { wrapped, segmentId };
   });
   await Promise.all(pendingLoaderData.map((p) => p.wrapped));
 
   return loaderEntries.map((loaderEntry, i) => {
     const { loader } = loaderEntry;
     const pending = pendingLoaderData[i]!;
-    if (ms && !ms.metrics.some((m) => m.label === `loader:${loader.$$id}`)) {
-      // All loaders ran in parallel via Promise.all — each span covers
-      // from its own kickoff to the batch settlement, giving a ceiling
-      // on that loader's contribution to the overall wait.
-      const batchEnd = performance.now();
-      appendMetric(
-        ms,
-        `loader:${loader.$$id}`,
-        pending.start,
-        batchEnd - pending.start,
-        2,
-      );
-    }
+    // The "loader:<id>" perf metric is recorded by observePhase at the single
+    // loader-metering site (useLoader, reached via ctx.use during
+    // resolveLoaderData), with the real per-loader duration rather than a
+    // Promise.all batch ceiling.
     return {
       id: pending.segmentId,
       namespace: entry.id,
@@ -151,6 +138,15 @@ export async function resolveLoaders<TEnv>(
 export interface ResolveSegmentOptions {
   /** When true, skip resolveLoaders() calls (used for pre-rendering) */
   skipLoaders?: boolean;
+  /**
+   * When true, a thrown render error is re-thrown instead of being converted
+   * into an error-boundary segment. Set only by the pre-render path so a
+   * build-time render failure (and a `throw new Skip()` inside a render fn)
+   * surfaces to the build instead of being silently baked into a frozen error
+   * page served as a 200 (issue #587). The live request path leaves this unset,
+   * so error boundaries keep catching at request time.
+   */
+  throwOnError?: boolean;
 }
 
 /**
@@ -635,6 +631,7 @@ export async function resolveAllSegments<TEnv>(
       deps,
       { request: safeRequest, url: context.url, routeKey, telemetry },
       context.pathname,
+      options?.throwOnError,
     );
     doneEntry();
     // Deduplicate by segment ID. include() scopes can produce entries that