handle error happen during rsc payload generation

Author: AbanoubGhadban

node_package/src/ReactOnRailsRSC.ts

@@ -1,6 +1,6 @@
 import { BundleManifest } from 'react-on-rails-rsc';
 import { buildServerRenderer } from 'react-on-rails-rsc/server.node';
-import { PassThrough, Readable } from 'stream';
+import { Readable } from 'stream';
 
 import {
   RSCRenderParams,
@@ -9,9 +9,8 @@ import {
   StreamableComponentResult,
 } from './types/index.ts';
 import ReactOnRails from './ReactOnRails.full.ts';
-import buildConsoleReplay from './buildConsoleReplay.ts';
 import handleError from './handleError.ts';
-import { convertToError, createResultObject } from './serverRenderUtils.ts';
+import { convertToError } from './serverRenderUtils.ts';
 import { notifySSREnd, addPostSSRHook } from './postSSRHooks.ts';
 
 import {
@@ -20,13 +19,6 @@ import {
 } from './streamServerRenderedReactComponent.ts';
 import loadJsonFile from './loadJsonFile.ts';
 
-const stringToStream = (str: string) => {
-  const stream = new PassThrough();
-  stream.push(str);
-  stream.push(null);
-  return stream;
-};
-
 let serverRenderer: ReturnType<typeof buildServerRenderer> | undefined;
 
 const streamRenderRSCComponent = (
@@ -44,37 +36,41 @@ const streamRenderRSCComponent = (
     isShellReady: true,
   };
 
-  const { pipeToTransform, readableStream, emitError } =
+  const { pipeToTransform, readableStream, emitError, writeChunk, endStream } =
     transformRenderStreamChunksToResultObject(renderState);
-  Promise.resolve(reactRenderingResult)
-    .then(async (reactElement) => {
-      if (!serverRenderer) {
-        const reactClientManifest = await loadJsonFile<BundleManifest>(reactClientManifestFileName);
-        serverRenderer = buildServerRenderer(reactClientManifest);
-      }
 
-      const { renderToPipeableStream } = serverRenderer;
-      const rscStream = renderToPipeableStream(reactElement, {
-        onError: (err) => {
-          const error = convertToError(err);
-          console.error('Error in RSC stream', error);
-          if (throwJsErrors) {
-            emitError(error);
-          }
-          renderState.hasErrors = true;
-          renderState.error = error;
-        },
-      });
-      pipeToTransform(rscStream);
-    })
-    .catch((e: unknown) => {
-      const error = convertToError(e);
-      renderState.hasErrors = true;
-      renderState.error = error;
-      const htmlResult = handleError({ e: error, name: options.name, serverSide: true });
-      const jsonResult = JSON.stringify(createResultObject(htmlResult, buildConsoleReplay(), renderState));
-      return stringToStream(jsonResult);
+  const reportError = (error: Error) => {
+    console.error('Error in RSC stream', error);
+    if (throwJsErrors) {
+      emitError(error);
+    }
+    renderState.hasErrors = true;
+    renderState.error = error;
+  };
+
+  const initializeAndRender = async () => {
+    if (!serverRenderer) {
+      const reactClientManifest = await loadJsonFile<BundleManifest>(reactClientManifestFileName);
+      serverRenderer = buildServerRenderer(reactClientManifest);
+    }
+
+    const { renderToPipeableStream } = serverRenderer;
+    const rscStream = renderToPipeableStream(await reactRenderingResult, {
+      onError: (err) => {
+        const error = convertToError(err);
+        reportError(error);
+      },
     });
+    pipeToTransform(rscStream);
+  };
+
+  initializeAndRender().catch((e: unknown) => {
+    const error = convertToError(e);
+    reportError(error);
+    const errorHtml = handleError({ e: error, name: options.name, serverSide: true });
+    writeChunk(errorHtml);
+    endStream();
+  });
 
   readableStream.on('end', () => {
     notifySSREnd(railsContext);

node_package/src/handleError.ts

@@ -59,8 +59,10 @@ Message: ${e.message}
 
 ${e.stack}`;
 
-    const reactElement = React.createElement('pre', null, msg);
+    // In RSC (React Server Components) bundles, renderToString is not available.
+    // Therefore, we return the raw error message as a string instead of converting it to HTML.
     if (typeof renderToString === 'function') {
+      const reactElement = React.createElement('pre', null, msg);
       return renderToString(reactElement);
     }
     return msg;

node_package/src/injectRSCPayload.ts

@@ -1,5 +1,6 @@
 import { PassThrough, Transform } from 'stream';
 import { finished } from 'stream/promises';
+import { createRSCPayloadKey } from './utils.ts';
 import { RailsContextWithServerComponentCapabilities, PipeableOrReadableStream } from './types/index.ts';
 
 // In JavaScript, when an escape sequence with a backslash (\) is followed by a character
@@ -66,7 +67,7 @@ export default function injectRSCPayload(
 
       ReactOnRails.onRSCPayloadGenerated?.(railsContext, (streamInfo) => {
         const { stream, props, componentName } = streamInfo;
-        const cacheKey = `${componentName}-${JSON.stringify(props)}-${railsContext.componentSpecificMetadata?.renderRequestId}`;
+        const cacheKey = createRSCPayloadKey(componentName, props, railsContext);
 
         // When a component requests an RSC payload, we initialize a global array to store it.
         // This array is injected into the HTML before the component's HTML markup.