refactor: enhance RSC component handling by introducing promise wrapper and improving stream processing for better error management

Author: AbanoubGhadban

node_package/src/RSCProvider.tsx

@@ -45,11 +45,7 @@ export const createRSCProvider = ({
     return cachedComponents[key];
   };
 
-  const getComponent = async (componentName: string, componentProps: unknown) => {
-    const cachedComponent = getCachedComponent(componentName, componentProps);
-    if (cachedComponent) {
-      return cachedComponent;
-    }
+  const getComponent = (componentName: string, componentProps: unknown) => {
     const key = createRSCPayloadKey(componentName, componentProps, railsContext);
     if (key in fetchRSCPromises) {
       return fetchRSCPromises[key];

node_package/src/RSCRoute.ts

@@ -30,10 +30,13 @@ export type RSCRouteProps = {
 
 const RSCRoute = ({ componentName, componentProps }: RSCRouteProps) => {
   const { getComponent, getCachedComponent } = useRSC();
-  const component =
-    getCachedComponent(componentName, componentProps) ??
-    React.use(getComponent(componentName, componentProps));
-  return component;
+  const cachedComponent = getCachedComponent(componentName, componentProps);
+  if (cachedComponent) {
+    return cachedComponent;
+  }
+
+  const componentPromise = getComponent(componentName, componentProps);
+  return React.use(componentPromise);
 };
 
 export default RSCRoute;

node_package/src/getReactServerComponent.client.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createFromReadableStream } from 'react-on-rails-rsc/client.browser';
-import { createRSCPayloadKey, fetch } from './utils.ts';
+import { createRSCPayloadKey, fetch, wrapInNewPromise } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
 import { assertRailsContextWithComponentSpecificMetadata, RailsContext } from './types/index.ts';
 
@@ -23,7 +23,8 @@ const createFromFetch = async (fetchPromise: Promise<Response>) => {
     throw new Error('No stream found in response');
   }
   const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
-  return createFromReadableStream<React.ReactNode>(transformedStream);
+  const renderPromise = createFromReadableStream<React.ReactNode>(transformedStream);
+  return wrapInNewPromise(renderPromise);
 };
 
 /**
@@ -96,7 +97,8 @@ const createRSCStreamFromArray = (payloads: string[]) => {
 const createFromPreloadedPayloads = (payloads: string[]) => {
   const stream = createRSCStreamFromArray(payloads);
   const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
-  return createFromReadableStream<React.ReactNode>(transformedStream);
+  const renderPromise = createFromReadableStream<React.ReactNode>(transformedStream);
+  return wrapInNewPromise(renderPromise);
 };
 
 /**

node_package/src/transformRSCStreamAndReplayConsoleLogs.ts

@@ -39,31 +39,37 @@ export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableS
         }
       };
 
-      while (!done) {
-        const decodedValue = typeof value === 'string' ? value : decoder.decode(value);
-        const decodedChunks = lastIncompleteChunk + decodedValue;
-        const chunks = decodedChunks.split('\n');
-        lastIncompleteChunk = chunks.pop() ?? '';
+      try {
+        while (!done) {
+          const decodedValue = typeof value === 'string' ? value : decoder.decode(value);
+          const decodedChunks = lastIncompleteChunk + decodedValue;
+          const chunks = decodedChunks.split('\n');
+          lastIncompleteChunk = chunks.pop() ?? '';
 
-        const jsonChunks = chunks
-          .filter((line) => line.trim() !== '')
-          .map((line) => {
-            try {
-              return JSON.parse(line) as RSCPayloadChunk;
-            } catch (error) {
-              console.error('Error parsing JSON:', line, error);
-              throw error;
-            }
-          });
+          const jsonChunks = chunks
+            .filter((line) => line.trim() !== '')
+            .map((line) => {
+              try {
+                return JSON.parse(line) as RSCPayloadChunk;
+              } catch (error) {
+                console.error('Error parsing JSON:', line, error);
+                throw error;
+              }
+            });
 
-        for (const jsonChunk of jsonChunks) {
-          handleJsonChunk(jsonChunk);
-        }
+          for (const jsonChunk of jsonChunks) {
+            handleJsonChunk(jsonChunk);
+          }
 
-        // eslint-disable-next-line no-await-in-loop
-        ({ value, done } = await reader.read());
+          // eslint-disable-next-line no-await-in-loop
+          ({ value, done } = await reader.read());
+        }
+      } catch (error) {
+        console.error('Error transforming RSC stream:', error);
+        controller.error(error);
+      } finally {
+        controller.close();
       }
-      controller.close();
     },
   });
 }

node_package/src/utils.ts

@@ -19,3 +19,19 @@ export const createRSCPayloadKey = (
 ) => {
   return `${componentName}-${JSON.stringify(componentProps)}-${railsContext.componentSpecificMetadata.renderRequestId}`;
 };
+
+/**
+ * Wraps a promise from react-server-dom-webpack in a standard JavaScript Promise.
+ *
+ * This is necessary because promises returned by react-server-dom-webpack's methods
+ * (like `createFromReadableStream` and `createFromNodeStream`) have non-standard behavior:
+ * their `then()` method returns `null` instead of the promise itself, which breaks
+ * promise chaining. This wrapper creates a new standard Promise that properly
+ * forwards the resolution/rejection of the original promise.
+ */
+export const wrapInNewPromise = <T>(promise: Promise<T>) => {
+  return new Promise<T>((resolve, reject) => {
+    void promise.then(resolve);
+    void promise.catch(reject);
+  });
+};