@parcel/rsc 2.13.1-canary.3399 → 2.13.1-canary.3401

package/lib/node.d.ts

@@ -1,9 +1,13 @@
 /* @jsxRuntime automatic */ import type { IncomingMessage, ServerResponse } from 'http';
+import type { ReactNode } from 'react';
 import { Readable } from 'stream';
 import { RSCToHTMLOptions, RSCOptions } from './server';
 export declare function renderRSC(root: any, options?: RSCOptions): Readable;
 export declare function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<Readable>;
-export declare function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RSCToHTMLOptions): Promise<void>;
+export interface RenderRequestOptions extends RSCToHTMLOptions {
+    renderError?: (err: Error) => ReactNode;
+}
+export declare function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RenderRequestOptions): Promise<void>;
 export declare function callAction(request: IncomingMessage, id: string | null | undefined): Promise<{
     result: any;
 }>;

package/lib/server.d.ts

@@ -1,5 +1,5 @@
 /* @jsxRuntime automatic */ import type { ErrorInfo } from 'react-dom/client';
-import { ComponentType } from 'react' with {
+import { ComponentType, ReactNode } from 'react' with {
     env: 'react-client'
 };
 export interface RSCOptions {
@@ -22,11 +22,13 @@ export interface RSCToHTMLOptions {
     temporaryReferences?: any;
     onError?: (error: unknown, errorInfo?: ErrorInfo) => string | void;
 }
-export declare function renderRSCToHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream>;
+export declare function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream>;
 export interface RenderRequestOptions extends RSCToHTMLOptions {
     headers?: HeadersInit;
+    renderError?: (err: Error) => ReactNode;
 }
 export declare function renderRequest(request: Request, root: any, options?: RenderRequestOptions): Promise<Response>;
 export declare function callAction(request: Request, id: string | null | undefined): Promise<{
     result: any;
 }>;
+export declare function renderDevError(error: Error, options: RSCToHTMLOptions): Promise<ReadableStream | string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/rsc",
-  "version": "2.13.1-canary.3399+53633df12",
+  "version": "2.13.1-canary.3401+b50bc79cb",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -41,5 +41,5 @@
     "react": "^19",
     "react-dom": "^19"
   },
-  "gitHead": "53633df12ad9bba5d6ed5360e935fde8de0342fe"
+  "gitHead": "b50bc79cbc94fb83381e3dcfba0f8cab936f94b0"
 }

package/src/node.tsx

@@ -1,32 +1,55 @@
 /* @jsxRuntime automatic */
 import type { IncomingMessage, ServerResponse } from 'http';
 import type { ReadableStream as NodeReadableStream } from 'stream/web';
+import type { ReactNode } from 'react';
 
 import {Readable} from 'stream';
 import {renderToReadableStream, createTemporaryReferenceSet} from 'react-server-dom-parcel/server.edge';
-import {RSCToHTMLOptions, RSCOptions, renderRSCToHTML as renderRSCToHTMLBase, callAction as callActionBase} from './server';
+import {RSCToHTMLOptions, RSCOptions, renderHTML as renderHTMLBase, callAction as callActionBase, renderDevError} from './server';
 
 export function renderRSC(root: any, options?: RSCOptions): Readable {
   return Readable.fromWeb(renderToReadableStream(root, options) as NodeReadableStream);
 }
 
 export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<Readable> {
-  let htmlStream = await renderRSCToHTMLBase(root, options);
+  let htmlStream = await renderHTMLBase(root, options);
   return Readable.fromWeb(htmlStream as NodeReadableStream);
 }
 
-const temporaryReferencesSymbol = Symbol.for('temporaryReferences')
+const temporaryReferencesSymbol = Symbol.for('temporaryReferences');
 
-export async function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RSCToHTMLOptions): Promise<void> {
+export interface RenderRequestOptions extends RSCToHTMLOptions {
+  renderError?: (err: Error) => ReactNode
+}
+
+export async function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RenderRequestOptions): Promise<void> {
   options = {
     ...options,
     temporaryReferences: options?.temporaryReferences ?? (request as any)[temporaryReferencesSymbol]
   };
   
   if (request.headers.accept?.includes('text/html')) {
-    let html = await renderHTML(root, options);
-    response.setHeader('Content-Type', 'text/html');
-    html.pipe(response);
+    try {
+      let html = await renderHTML(root, options);
+      response.setHeader('Content-Type', 'text/html');
+      html.pipe(response);
+    } catch (err) {
+      response.statusCode = 500;
+      let error = err instanceof Error ? err : new Error(String(err));
+      let renderedError;
+      try {
+        renderedError = options?.renderError 
+          ? await renderHTMLBase(options.renderError(error), options)
+          : await renderDevError(error, options);
+      } catch {
+        renderedError = '<h1>Something went wrong!</h1>';
+      }
+      if (typeof renderedError === 'string') {
+        response.end(renderedError);
+      } else {
+        Readable.fromWeb(renderedError as NodeReadableStream).pipe(response);
+      }
+    }
   } else {
     response.setHeader('Content-Type', 'text/x-component');
     renderRSC(root, options).pipe(response);

package/src/server.tsx

@@ -36,7 +36,7 @@ export interface RSCToHTMLOptions {
   onError?: (error: unknown, errorInfo?: ErrorInfo) => string | void;
 }
 
-export async function renderRSCToHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream> {
+export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream> {
   let rscStream = renderToReadableStream(root, options);
 
   // Use client react to render the RSC payload to HTML.
@@ -50,14 +50,15 @@ export async function renderRSCToHTML(root: any, options?: RSCToHTMLOptions): Pr
 
   let htmlStream = await renderHTMLToReadableStream(<Content />, {
     ...options,
-    bootstrapScriptContent: (options?.component as any)?.bootstrapScript
+    bootstrapScriptContent: (options?.component as any)?.bootstrapScript,
   });
 
   return htmlStream.pipeThrough(injectRSCPayload(s2));
 }
 
 export interface RenderRequestOptions extends RSCToHTMLOptions {
-  headers?: HeadersInit
+  headers?: HeadersInit,
+  renderError?: (err: Error) => ReactNode
 }
 
 const temporaryReferencesSymbol = Symbol.for('temporaryReferences')
@@ -69,13 +70,32 @@ export async function renderRequest(request: Request, root: any, options?: Rende
   };
 
   if (request.headers.get('Accept')?.includes('text/html')) {
-    let html = await renderRSCToHTML(root, options);
-    return new Response(html, {
-      headers: {
-        ...options?.headers,
-        'Content-Type': 'text/html'
+    try {
+      let html = await renderHTML(root, options);
+      return new Response(html, {
+        headers: {
+          ...options?.headers,
+          'Content-Type': 'text/html'
+        }
+      });
+    } catch (err) {
+      let error = err instanceof Error ? err : new Error(String(err));
+      let res;
+      try {
+        res = options?.renderError 
+          ? await renderHTML(options.renderError(error), options)
+          : await renderDevError(error, options);
+      } catch {
+        res = '<h1>Something went wrong!</h1>';
       }
-    });
+      return new Response(res, {
+        status: 500,
+        headers: {
+          ...options?.headers,
+          'Content-Type': 'text/html'
+        }
+      });
+    }
   } else {
     let rscStream = renderToReadableStream(root, options);
     return new Response(rscStream, {
@@ -116,3 +136,37 @@ export async function callAction(request: Request, id: string | null | undefined
     return {result};
   }
 }
+
+export async function renderDevError(error: Error, options: RSCToHTMLOptions): Promise<ReadableStream | string> {
+  if (process.env.NODE_ENV !== 'production') {
+    let content = (
+      <html>
+        <meta charSet="utf-8" />
+        <title>Error</title>
+        <body>
+          <noscript>
+            <h1>Error: {error.message}</h1>
+            <pre>{error.stack}</pre>
+          </noscript>
+        </body>
+      </html>
+    );
+
+    // Load bootstrap script containing error overlay, and re-throw server error on the client.
+    let bootstrapScript = (options?.component as any)?.bootstrapScript;
+    bootstrapScript += '.then(() => {';
+    bootstrapScript += `let err = new Error(${JSON.stringify(error.message)});`;
+    bootstrapScript += `err.stack = ${JSON.stringify(error.stack)};`;
+    bootstrapScript += 'throw err;';
+    bootstrapScript += '})';
+
+    return await renderHTML(content, {
+      ...options,
+      component: {
+        bootstrapScript
+      } as any
+    });
+  } else {
+    return '<h1>Something went wrong!</h1>';
+  }
+}