@timber-js/app 0.2.0-alpha.16 → 0.2.0-alpha.161

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

@@ -5,16 +5,15 @@
  * returned directly without SSR HTML rendering. The client decodes it via
  * `createFromFetch` and renders into the hydrated React root.
  *
- * Design docs: 19-client-navigation.md §"RSC Payload Handling",
- *              16-metadata.md §"Head Elements"
+ * Design docs: 19-client-navigation.md §"RSC Payload Handling"
  */
 
-import type { LayoutEntry } from '#/server/deny-renderer.js';
-import { renderDenyPageAsRsc } from '#/server/deny-renderer.js';
-import type { RouteMatch } from '#/server/pipeline.js';
-import type { RedirectSignal } from '#/server/primitives.js';
-import type { HeadElement, LayoutComponentEntry } from '#/server/route-element-builder.js';
-import type { ManifestSegmentNode } from '#/server/route-matcher.js';
+import type { LayoutEntry } from '../deny-renderer.js';
+import { renderDenyPageAsRsc } from '../deny-renderer.js';
+import type { RouteMatch } from '../pipeline.js';
+import type { RedirectSignal } from '../primitives.js';
+import type { LayoutComponentEntry } from '../route-element-builder.js';
+import type { ManifestSegmentNode } from '../route-matcher.js';
 
 import {
   buildRedirectResponse,
@@ -39,7 +38,6 @@ export async function buildRscPayloadResponse(
   signals: RenderSignals,
   segments: ManifestSegmentNode[],
   layoutComponents: LayoutComponentEntry[],
-  headElements: HeadElement[],
   match: RouteMatch,
   responseHeaders: Headers,
   skippedSegments?: string[]
@@ -69,10 +67,25 @@ export async function buildRscPayloadResponse(
     | { type: 'data'; chunk: ReadableStreamReadResult<Uint8Array> }
     | { type: 'signal' };
 
-  const first: RaceResult = await Promise.race([
-    reader.read().then((chunk) => ({ type: 'data' as const, chunk })),
-    signalDetected.then(() => ({ type: 'signal' as const })),
-  ]);
+  let first: RaceResult;
+  try {
+    first = await Promise.race([
+      reader.read().then((chunk) => ({ type: 'data' as const, chunk })),
+      signalDetected.then(() => ({ type: 'signal' as const })),
+    ]);
+  } catch (_readError) {
+    // RSC stream failed on first read — unhandled error in the page component.
+    // Return an error response so the client can hard-navigate for the
+    // SSR-rendered error page. See design/10-error-handling.md.
+    reader.cancel().catch(() => {});
+    signals.onSignal = undefined;
+    responseHeaders.set('X-Timber-Error', '1');
+    responseHeaders.set('content-type', 'application/json; charset=utf-8');
+    return new Response(JSON.stringify({ error: true, status: 500 }), {
+      status: 500,
+      headers: responseHeaders,
+    });
+  }
 
   // If data arrived first, still check signals — they may have fired
   // concurrently. Also do a final ceiling timeout check for edge cases
@@ -88,24 +101,51 @@ export async function buildRscPayloadResponse(
   // Check for redirect/deny signals detected during initial rendering
   const trackedRedirect = signals.redirectSignal as RedirectSignal | null;
   if (trackedRedirect) {
-    reader.cancel();
-    return buildRedirectResponse(req, trackedRedirect, responseHeaders);
+    reader.cancel().catch(() => {});
+    return buildRedirectResponse(trackedRedirect, req, responseHeaders);
   }
   if (signals.denySignal) {
-    reader.cancel();
+    reader.cancel().catch(() => {});
     return renderDenyPageAsRsc(
       signals.denySignal,
       segments,
       layoutComponents as LayoutEntry[],
+      req,
       responseHeaders,
       createDebugChannelSink
     );
   }
 
+  // Check for unhandled errors (RenderError or plain Error).
+  // These aren't redirect/deny signals but the RSC stream will be broken.
+  // Return an error response so the client can hard-navigate for the
+  // SSR-rendered error page. See design/10-error-handling.md
+  // §"Error Page Rendering for Client Navigation".
+  if (signals.renderError) {
+    reader.cancel().catch(() => {});
+    responseHeaders.set('X-Timber-Error', '1');
+    responseHeaders.set('content-type', 'application/json; charset=utf-8');
+    return new Response(
+      JSON.stringify({
+        error: true,
+        status: signals.renderError.status,
+      }),
+      { status: signals.renderError.status, headers: responseHeaders }
+    );
+  }
+
   // Extract the first chunk from the race result.
-  // If the signal won the race, read the first chunk now (the stream
-  // was already cancelled above, but we need a firstRead shape below).
-  const firstRead = first.type === 'data' ? first.chunk : await reader.read();
+  // If the signal won the race but neither redirect nor deny was detected
+  // (edge case), cancel the reader immediately rather than issuing a bare
+  // read() that could hang forever if the RSC stream has stalled.
+  // See TIM-519.
+  let firstRead: ReadableStreamReadResult<Uint8Array>;
+  if (first.type === 'data') {
+    firstRead = first.chunk;
+  } else {
+    await reader.cancel();
+    firstRead = { done: true, value: undefined };
+  }
 
   // Reconstruct the stream: prepend the buffered first chunk,
   // then continue piping from the original reader.
@@ -131,17 +171,10 @@ export async function buildRscPayloadResponse(
   });
 
   responseHeaders.set('content-type', `${RSC_CONTENT_TYPE}; charset=utf-8`);
-  // Vary on Accept so CDNs cache HTML and RSC responses separately
-  // for the same URL. The client appends ?_rsc=<id> as a cache-bust,
-  // but Vary ensures correct behavior even without the query param.
-  responseHeaders.set('Vary', 'Accept');
-
-  // Send resolved head elements so the client can update document.title
-  // and <meta> tags after SPA navigation. See design/16-metadata.md.
-  const encoded = encodeURIComponent(JSON.stringify(headElements));
-  if (encoded.length <= 4096) {
-    responseHeaders.set('X-Timber-Head', encoded);
-  }
+
+  // Metadata (<title>/<meta>/<link>) now rides the RSC Flight payload as
+  // React elements — React 19 Float manages them in document.head during
+  // client rendering. No X-Timber-Head header needed. See TIM-1151.
 
   // Send segment metadata so the client can populate its segment cache
   // for state tree diffing on subsequent navigations.
@@ -155,14 +188,20 @@ export async function buildRscPayloadResponse(
     responseHeaders.set('X-Timber-Skipped-Segments', JSON.stringify(skippedSegments));
   }
 
-  // Send route params so the client can populate useParams() after
-  // SPA navigation. Without this, useParams() returns {}.
-  if (Object.keys(match.params).length > 0) {
-    responseHeaders.set('X-Timber-Params', JSON.stringify(match.params));
+  // Send route params so the client can populate useSegmentParams() after
+  // SPA navigation. Without this, useSegmentParams() returns {}.
+  if (Object.keys(match.segmentParams).length > 0) {
+    responseHeaders.set('X-Timber-Params', JSON.stringify(match.segmentParams));
   }
 
+  // Check if a DenySignal was caught in-tree by AccessGate or
+  // PageDenyBoundary. The deny page is in the Flight stream as a normal
+  // element — use the deny status for the HTTP response. See TIM-666.
+  const { getDenyStatus } = await import('../deny-boundary.js');
+  const denyStatus = getDenyStatus();
+
   return new Response(patchedStream, {
-    status: 200,
+    status: denyStatus ?? 200,
     headers: responseHeaders,
   });
 }

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

@@ -10,14 +10,22 @@
  *              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.
@@ -33,13 +41,28 @@ export interface RenderSignals {
   denySignal: DenySignal | null;
   redirectSignal: RedirectSignal | null;
   renderError: { error: unknown; status: number } | null;
+  /**
+   * The last unhandled error seen by RSC onError that isn't a signal.
+   * Used as a fallback when SSR fails (SsrStreamError) but no structured
+   * signal was captured — provides the original error for the error page
+   * instead of relying on SsrStreamError.cause extraction.
+   *
+   * NOT used for page-level error detection (that would break Suspense
+   * error isolation). Only consumed when SSR actually fails.
+   */
+  lastUnhandledError: unknown | null;
   /** Callback fired when a redirect or deny signal is captured in onError. */
   onSignal?: () => void;
+  /** Callback fired when an unhandled error (non-signal) is captured. Used
+   *  to halt Flight data injection into the inline stream. */
+  onUnhandledError?: () => void;
 }
 
 export interface RscStreamResult {
   rscStream: ReadableStream<Uint8Array> | undefined;
   signals: RenderSignals;
+  /** Dev-only: server component debug info from the Flight debug channel. */
+  getDebugComponents?: () => DebugComponentEntry[];
 }
 
 /**
@@ -58,10 +81,15 @@ export function renderRscStream(element: React.ReactElement, req: Request): RscS
     denySignal: null,
     redirectSignal: null,
     renderError: null,
+    lastUnhandledError: null,
   };
 
   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,
@@ -126,13 +154,48 @@ 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.
+
+          // Track the last unhandled error so the pipeline can use it
+          // if SSR fails (SsrStreamError). This is NOT used for page-level
+          // error detection — only as a fallback when SSR actually fails.
+          signals.lastUnhandledError = error;
+          signals.onUnhandledError?.();
+
+          // 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 }) {
@@ -160,5 +223,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

@@ -1,18 +1,31 @@
 /**
  * SSR Bridge — loads the SSR entry and passes the RSC stream for HTML rendering.
+ *
+ * This is the RSC → SSR environment hop. The two environments are separate
+ * Vite module graphs; `NavContext` is the serializable contract that crosses
+ * the boundary. See `../ssr-bridge-types.ts` for the contract definition.
  */
 
 /// <reference types="@vitejs/plugin-rsc/types" />
 
-import type { NavContext } from '#/server/ssr-entry.js';
+import type { NavContext } from '../ssr-bridge-types.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')>(
-    '../ssr-entry.js',
-    { environment: 'ssr' }
-  );
+  let ssrEntry: typeof import('../ssr-entry.js');
+  try {
+    ssrEntry = await import.meta.viteRsc.import<typeof import('../ssr-entry.js')>(
+      '../ssr-entry.js',
+      { environment: 'ssr' }
+    );
+  } catch (error) {
+    const original = error instanceof Error ? error.message : String(error);
+    throw new Error(
+      `[timber] Failed to load SSR entry from RSC environment.\n  ${original}\n  This usually means a module evaluation error in the SSR bundle.`,
+      { cause: error }
+    );
+  }
   return ssrEntry.handleSsr(rscStream, navContext);
 }