@timber-js/app 0.2.0-alpha.6 → 0.2.0-alpha.61

package/src/server/rsc-entry/rsc-stream.ts

@@ -10,30 +10,46 @@
  *              13-security.md §"Errors don't leak"
  */
 
-import { renderToReadableStream } from '#/rsc-runtime/rsc.js';
+import { renderToReadableStream } from '../../rsc-runtime/rsc.js';
 
-import { logRenderError } from '#/server/logger.js';
-import { DenySignal, RedirectSignal, RenderError } from '#/server/primitives.js';
-import { checkAndWarnRscPropError } from '#/server/rsc-prop-warnings.js';
+import { randomUUID } from 'node:crypto';
 
-import { createDebugChannelSink, isAbortError } from './helpers.js';
-import { isDebug } from '#/server/debug.js';
+import { logRenderError } from '../logger.js';
+import { DenySignal, RedirectSignal, RenderError } from '../primitives.js';
+import { checkAndWarnRscPropError } from '../rsc-prop-warnings.js';
+
+import {
+  createDebugChannelSink,
+  createDebugChannelCollector,
+  isAbortError,
+  type DebugComponentEntry,
+} from './helpers.js';
+import { isDebug } from '../debug.js';
+import { isDevMode } from '../debug.js';
 
 /**
  * Mutable signal state captured during RSC rendering.
  *
  * Signals fire asynchronously via `onError` during stream consumption.
  * The first signal of each type wins — subsequent signals are ignored.
+ *
+ * `onSignal` is an optional callback fired when a DenySignal or
+ * RedirectSignal is captured. Consumers use it with Promise.race to
+ * react immediately instead of polling with setTimeout/queueMicrotask.
  */
 export interface RenderSignals {
   denySignal: DenySignal | null;
   redirectSignal: RedirectSignal | null;
   renderError: { error: unknown; status: number } | null;
+  /** Callback fired when a redirect or deny signal is captured in onError. */
+  onSignal?: () => void;
 }
 
 export interface RscStreamResult {
   rscStream: ReadableStream<Uint8Array> | undefined;
   signals: RenderSignals;
+  /** Dev-only: server component debug info from the Flight debug channel. */
+  getDebugComponents?: () => DebugComponentEntry[];
 }
 
 /**
@@ -56,6 +72,10 @@ export function renderRscStream(element: React.ReactElement, req: Request): RscS
 
   let rscStream: ReadableStream<Uint8Array> | undefined;
 
+  // In dev mode, collect debug channel data for the error overlay.
+  // In production, use the discard sink (no overhead).
+  const debugChannel = isDevMode() ? createDebugChannelCollector() : createDebugChannelSink();
+
   try {
     rscStream = renderToReadableStream(
       element,
@@ -67,11 +87,13 @@ export function renderRscStream(element: React.ReactElement, req: Request): RscS
           if (isAbortError(error) || req.signal?.aborted) return;
           if (error instanceof DenySignal) {
             signals.denySignal = error;
+            signals.onSignal?.();
             // Return structured digest for client-side error boundaries
             return JSON.stringify({ type: 'deny', status: error.status, data: error.data });
           }
           if (error instanceof RedirectSignal) {
             signals.redirectSignal = error;
+            signals.onSignal?.();
             return JSON.stringify({
               type: 'redirect',
               location: error.location,
@@ -98,11 +120,7 @@ export function renderRscStream(element: React.ReactElement, req: Request): RscS
           // directive isn't at the very top of the file, or the component is
           // re-exported through a barrel file without 'use client'.
           // See LOCAL-297.
-          if (
-            isDebug() &&
-            error instanceof Error &&
-            error.message.includes('Invalid hook call')
-          ) {
+          if (isDebug() && error instanceof Error && error.message.includes('Invalid hook call')) {
             console.error(
               '[timber] A React hook was called during RSC rendering. This usually means a ' +
                 "'use client' component is being executed as a server component instead of " +
@@ -122,13 +140,42 @@ export function renderRscStream(element: React.ReactElement, req: Request): RscS
             checkAndWarnRscPropError(error, new URL(req.url).pathname);
           }
 
-          // Track unhandled errors for pre-flush handling (500 status)
-          if (!signals.renderError) {
-            signals.renderError = { error, status: 500 };
-          }
-          logRenderError({ method: req.method, path: new URL(req.url).pathname, error });
+          // Log the error but do NOT track it as a page-level render error.
+          // If this error is inside a <Suspense> boundary, React will emit
+          // an error row in the Flight stream and the Suspense fallback will
+          // render on the client. Tracking it as signals.renderError would
+          // cause the pipeline to treat the entire page as a 500, even though
+          // the shell rendered successfully. See TIM-524.
+          //
+          // Only track as renderError if no Suspense boundary contains it —
+          // React will call onShellError for truly unrecoverable errors.
+
+          // Return a digest so React emits a per-row error in the Flight
+          // stream instead of leaving the lazy reference unresolved.
+          //
+          // SECURITY: Never include error.message in the digest — it may
+          // contain SQL queries, filesystem paths, secret fragments, or
+          // internal IDs. Use a generic message with a correlation ID so
+          // the error can be matched to server logs.
+          // See design/13-security.md §"Errors don't leak".
+          const errorId = randomUUID();
+          logRenderError({
+            method: req.method,
+            path: new URL(req.url).pathname,
+            error,
+            errorId,
+          });
+          return JSON.stringify({
+            type: 'error',
+            message: isDevMode()
+              ? error instanceof Error
+                ? error.message
+                : String(error)
+              : 'An unexpected error occurred.',
+            errorId,
+          });
         },
-        debugChannel: createDebugChannelSink(),
+        debugChannel,
       },
       {
         onClientReference(info: { id: string; name: string; deps: unknown }) {
@@ -156,5 +203,14 @@ export function renderRscStream(element: React.ReactElement, req: Request): RscS
     }
   }
 
-  return { rscStream, signals };
+  return {
+    rscStream,
+    signals,
+    // Expose the debug channel collector's getComponents in dev mode.
+    // The caller can retrieve component tree info when handling errors.
+    getDebugComponents:
+      'getComponents' in debugChannel
+        ? (debugChannel as { getComponents: () => DebugComponentEntry[] }).getComponents
+        : undefined,
+  };
 }

package/src/server/rsc-entry/ssr-bridge.ts

@@ -4,13 +4,13 @@
 
 /// <reference types="@vitejs/plugin-rsc/types" />
 
-import type { NavContext } from '#/server/ssr-entry.js';
+import type { NavContext } from '../ssr-entry.js';
 
 export async function callSsr(
   rscStream: ReadableStream<Uint8Array>,
   navContext: NavContext
 ): Promise<Response> {
-  const ssrEntry = await import.meta.viteRsc.import<typeof import('#/server/ssr-entry.js')>(
+  const ssrEntry = await import.meta.viteRsc.import<typeof import('../ssr-entry.js')>(
     '../ssr-entry.js',
     { environment: 'ssr' }
   );

package/src/server/rsc-entry/ssr-renderer.ts

@@ -12,25 +12,48 @@
  *              05-streaming.md §"deferSuspenseFor and the Hold Window"
  */
 
-import type { ClientBootstrapConfig } from '#/server/html-injectors.js';
-import type { LayoutEntry } from '#/server/deny-renderer.js';
-import { renderDenyPage } from '#/server/deny-renderer.js';
-import type { RouteMatch } from '#/server/pipeline.js';
-import { SsrStreamError } from '#/server/primitives.js';
-import type { LayoutComponentEntry } from '#/server/route-element-builder.js';
-import type { ManifestSegmentNode } from '#/server/route-matcher.js';
-import type { NavContext } from '#/server/ssr-entry.js';
+import type { ClientBootstrapConfig } from '../html-injectors.js';
+import { flightInitScript } from '../flight-scripts.js';
+import type { LayoutEntry } from '../deny-renderer.js';
+import { renderDenyPage } from '../deny-renderer.js';
+import type { RouteMatch } from '../pipeline.js';
+import { SsrStreamError } from '../primitives.js';
+import type { LayoutComponentEntry } from '../route-element-builder.js';
+import type { ManifestSegmentNode } from '../route-matcher.js';
+import type { NavContext } from '../ssr-entry.js';
 
 import {
   buildRedirectResponse,
   buildSegmentInfo,
   createDebugChannelSink,
   isAbortError,
-  parseCookiesFromHeader,
 } from './helpers.js';
-import { renderErrorPage } from './error-renderer.js';
+import { getCookiesForSsr } from '../request-context.js';
+import { renderErrorPage, type GlobalErrorFile } from './error-renderer.js';
 import { callSsr } from './ssr-bridge.js';
 import type { RenderSignals } from './rsc-stream.js';
+import { recordTiming } from '../server-timing.js';
+import { teeWithErrorPropagation } from '../stream-utils.js';
+
+/**
+ * Maximum number of queueMicrotask yields during signal promotion.
+ * The known rejection chain depth for a withSpan-wrapped component is 3+
+ * microtasks. We use 5 to tolerate additional async wrappers or React
+ * Flight internals adding extra microtask hops. Do not increase beyond 8 —
+ * a deeper chain indicates a structural problem.
+ */
+const SIGNAL_PROMOTION_MAX_YIELDS = 5;
+
+/**
+ * Test-only observable: records how many microtask yields were consumed
+ * during the last signal promotion check. Import this in tests to assert
+ * the actual rejection chain depth and detect regressions if wrappers
+ * add more async hops.
+ *
+ * Only populated when the object is imported and exists — production
+ * bundles that don't import it pay zero cost (the typeof check is free).
+ */
+export const __test_only_signalPromotionDepth: { value: number } = { value: 0 };
 
 interface SsrRenderOptions {
   req: Request;
@@ -44,6 +67,8 @@ interface SsrRenderOptions {
   clientJsDisabled: boolean;
   headHtml: string;
   deferSuspenseFor: number;
+  /** Tier 2 global-error.tsx file, if present in app/. */
+  globalError?: GlobalErrorFile;
 }
 
 /**
@@ -77,11 +102,26 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
     clientJsDisabled,
     headHtml,
     deferSuspenseFor,
+    globalError,
   } = opts;
 
   // Tee the RSC stream — one copy goes to SSR for HTML rendering,
   // the other is inlined in the HTML for client-side hydration.
-  const [ssrStream, inlineStream] = rscStream.tee();
+  // Uses teeWithErrorPropagation to ensure errors on either branch
+  // cancel the other (preventing hung responses) and to monitor
+  // buffer divergence between SSR and inline consumers.
+  //
+  // When client JS is disabled, skip the tee — the inline stream would
+  // never be consumed, causing monotonic buffer divergence that eventually
+  // triggers the 5MB guard and cancels the SSR stream.
+  let ssrStream: ReadableStream<Uint8Array>;
+  let inlineStream: ReadableStream<Uint8Array> | undefined;
+  if (clientJsDisabled) {
+    ssrStream = rscStream;
+    inlineStream = undefined;
+  } else {
+    [ssrStream, inlineStream] = teeWithErrorPropagation(rscStream);
+  }
 
   // Embed segment metadata in HTML for initial hydration.
   // The client reads this to populate its segment cache before the
@@ -91,8 +131,8 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
     ? ''
     : `<script>self.__timber_segments=${JSON.stringify(buildSegmentInfo(segments, layoutComponents))}</script>`;
 
-  // Embed route params in HTML so useParams() works on initial hydration.
-  // Without this, useParams() returns {} until the first client navigation.
+  // Embed route params in HTML so useSegmentParams() works on initial hydration.
+  // Without this, useSegmentParams() returns {} until the first client navigation.
   const paramsScript =
     clientJsDisabled || Object.keys(match.params).length === 0
       ? ''
@@ -104,13 +144,20 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
     searchParams: Object.fromEntries(new URL(req.url).searchParams),
     statusCode: 200,
     responseHeaders,
-    headHtml: headHtml + clientBootstrap.preloadLinks + segmentScript + paramsScript,
+    headHtml:
+      headHtml +
+      clientBootstrap.preloadLinks +
+      segmentScript +
+      paramsScript +
+      // Initialize __timber_f in <head> so it exists before any streaming
+      // chunk scripts arrive in <body>. See flight-scripts.ts, LOCAL-415.
+      (clientJsDisabled ? '' : flightInitScript()),
     bootstrapScriptContent: clientBootstrap.bootstrapScriptContent,
     // Skip RSC inline stream when client JS is disabled — no client to hydrate.
     rscStream: clientJsDisabled ? undefined : inlineStream,
     deferSuspenseFor: deferSuspenseFor > 0 ? deferSuspenseFor : undefined,
     signal: req.signal,
-    cookies: parseCookiesFromHeader(req.headers.get('cookie') ?? ''),
+    cookies: getCookiesForSsr(),
   };
 
   // Helper: check if render-phase signals were captured and return the
@@ -147,7 +194,8 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
         req,
         match,
         responseHeaders,
-        clientBootstrap
+        clientBootstrap,
+        globalError
       );
     }
     return null;
@@ -156,16 +204,52 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
   try {
     const ssrResponse = await callSsr(ssrStream, navContext);
 
-    // Signal promotion: yield one microtask so async component rejections
-    // propagate to the RSC onError callback, then check if any signals
-    // were captured during rendering inside Suspense boundaries.
-    // The Response hasn't been sent yet — it's an unconsumed stream.
+    // Record SSR sub-phase timings for Server-Timing header (detailed mode).
+    // These are populated by handleSsr() in the SSR environment and passed
+    // back via navContext._ssrTimings across the RSC→SSR boundary.
+    if (navContext._ssrTimings) {
+      const t = navContext._ssrTimings;
+      recordTiming({ name: 'ssr-decode', dur: t.decodeMs, desc: 'RSC Flight decode' });
+      recordTiming({ name: 'ssr-shell', dur: t.shellMs, desc: 'Fizz onShellReady' });
+      recordTiming({ name: 'ssr-pipeline', dur: t.pipelineMs, desc: 'stream transforms' });
+      recordTiming({
+        name: 'ssr-total',
+        dur: t.totalMs,
+        desc: t.nodeStreams ? 'SSR (Node streams)' : 'SSR (Web Streams)',
+      });
+    }
+
+    // Signal promotion: check if any signals were captured during rendering
+    // inside Suspense boundaries. If no signals are present yet, yield
+    // multiple microtasks so async component rejections propagate through
+    // the full rejection chain to the RSC onError callback before we
+    // commit the response.
+    //
+    // The known rejection chain depth for a withSpan-wrapped page:
+    //   1. PageComponent throws DenySignal/RedirectSignal
+    //   2. withSpan catches and re-throws (microtask 1)
+    //   3. TracedPage promise rejects (microtask 2)
+    //   4. React Flight rejection handler → onError (microtask 3+)
+    //
+    // A single queueMicrotask only advances the queue by one step, which
+    // is insufficient for chains deeper than 1. We retry up to
+    // SIGNAL_PROMOTION_MAX_YIELDS (5) times, exiting early as soon as a
+    // signal is detected. This tolerates future wrappers adding depth
+    // without requiring code changes.
     //
-    // Uses queueMicrotask instead of setTimeout(0) to avoid yielding to
-    // the full event loop (timers phase). Microtask resolution happens
-    // within the same tick, eliminating per-request idle time under load.
+    // When signals are already captured (onSignal already fired), skip the
+    // yield entirely — react immediately. Uses queueMicrotask instead of
+    // setTimeout(0) to avoid yielding to the full event loop (timers phase).
     // See design/05-streaming.md §"deferSuspenseFor and the Hold Window"
-    await new Promise<void>((r) => queueMicrotask(r));
+    if (!signals.redirectSignal && !signals.denySignal && !signals.renderError) {
+      let yieldsConsumed = 0;
+      for (let i = 0; i < SIGNAL_PROMOTION_MAX_YIELDS; i++) {
+        await new Promise<void>((r) => queueMicrotask(r));
+        yieldsConsumed++;
+        if (signals.redirectSignal || signals.denySignal || signals.renderError) break;
+      }
+      __test_only_signalPromotionDepth.value = yieldsConsumed;
+    }
 
     const promoted = checkCapturedSignals(/* skipHandledDeny */ true);
     if (promoted) {
@@ -182,19 +266,38 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
 
     // SsrStreamError: SSR's renderToReadableStream failed because the RSC
     // stream contained an uncontained error (e.g., slot without error boundary).
-    // Render the deny/error page WITHOUT layout wrapping to avoid re-executing
-    // server components (which call headers()/cookies() and fail in SSR's
-    // separate ALS scope). See LOCAL-293.
-    if (ssrError instanceof SsrStreamError) {
+    //
+    // Error pages now use SSR-only rendering (Fizz directly, no RSC Flight),
+    // which imports layouts in the SSR environment where ALS is active. This
+    // means we CAN include layouts — they'll call headers()/cookies() correctly.
+    //
+    // Deny pages still go through RSC → SSR (plain props), so they pass empty
+    // layouts to avoid re-executing server components in the RSC environment's
+    // stale ALS scope. See LOCAL-293.
+    // Name-based check: SsrStreamError is thrown in the SSR environment
+    // but caught in the RSC environment. Since RSC and SSR are separate
+    // Vite module graphs, `instanceof` fails (different class identities).
+    // Use error.name instead. See design/18-build-system.md §"Virtual Module
+    // Resolution Quirks".
+    const isSsrStreamError =
+      ssrError instanceof SsrStreamError ||
+      (ssrError instanceof Error && ssrError.name === 'SsrStreamError');
+    if (isSsrStreamError) {
       if (signals.redirectSignal) {
         return buildRedirectResponse(req, signals.redirectSignal, responseHeaders);
       }
       if (signals.denySignal) {
-        // Render deny page without layouts — pass empty layout list
+        // Deny pages go through RSC → SSR with the full layout chain.
+        // We re-execute layout server components in a fresh RSC render,
+        // which is necessary so the deny page gets the HTML shell
+        // (<html>, <head>, <body>) and CSS from the root layout.
+        // Without layouts, deny pages render unstyled (no doctype, no
+        // stylesheets). ALS is still active for this request, so
+        // layouts calling headers()/cookies() work correctly.
         return renderDenyPage(
           signals.denySignal,
           segments,
-          [] as LayoutEntry[],
+          layoutComponents as LayoutEntry[],
           req,
           match,
           responseHeaders,
@@ -204,19 +307,34 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
         );
       }
       if (signals.renderError) {
+        // RenderError: TSX error pages use SSR-only path (layouts OK),
+        // MDX error pages use RSC path (plain props, no Error object).
         return renderErrorPage(
           signals.renderError.error,
           signals.renderError.status,
           segments,
-          [] as LayoutEntry[],
+          layoutComponents as LayoutEntry[],
           req,
           match,
           responseHeaders,
-          clientBootstrap
+          clientBootstrap,
+          globalError
         );
       }
-      // No captured signal — return bare 500
-      return new Response(null, { status: 500, headers: responseHeaders });
+      // No captured signal — unhandled error in the RSC stream.
+      // Render the error page using the original error (cause).
+      const cause = (ssrError as { cause?: unknown }).cause ?? ssrError;
+      return renderErrorPage(
+        cause,
+        500,
+        segments,
+        layoutComponents as LayoutEntry[],
+        req,
+        match,
+        responseHeaders,
+        clientBootstrap,
+        globalError
+      );
     }
 
     // SSR shell rendering failed — the error was outside Suspense.