[WIP] handle errors happen in rsc payload

.github/workflows/package-js-tests.yml

@@ -43,3 +43,6 @@ jobs:
         sudo yarn global add yalc
     - name: Run JS unit tests for Renderer package
       run: yarn test
+    # TODO: Remove this once we made these tests compatible with React 19
+    - name: Run JS unit tests for Renderer package with React 18 (for tests not compatible with React 19)
+      run: yarn test:react-18

Gemfile.lock

@@ -385,11 +385,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0, < 4.11)
-    webpacker (6.0.0.rc.6)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.10)
     websocket-driver (0.7.6)
@@ -444,7 +439,6 @@ DEPENDENCIES
   turbolinks
   uglifier
   webdrivers (= 5.3.0)
-  webpacker (= 6.0.0.rc.6)
 
 BUNDLED WITH
    2.5.9

jest.config.js

@@ -2,4 +2,15 @@ module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   setupFiles: ['<rootDir>/node_package/tests/jest.setup.js'],
+  // TODO: Remove this once we made RSCClientRoot compatible with React 19
+  moduleNameMapper: process.env.USE_REACT_18
+    ? {
+        '^react$': '<rootDir>/node_modules/react-18',
+        '^react/(.*)$': '<rootDir>/node_modules/react-18/$1',
+        '^react-dom$': '<rootDir>/node_modules/react-dom-18',
+        '^react-dom/(.*)$': '<rootDir>/node_modules/react-dom-18/$1',
+      }
+    : {
+        'react-server-dom-webpack/client': '<rootDir>/node_package/tests/emptyForTesting.js',
+      },
 };

knip.ts

@@ -32,6 +32,10 @@ const config: KnipConfig = {
         'eslint-plugin-jsx-a11y',
         'eslint-plugin-react',
         'react-server-dom-webpack',
+        'cross-fetch',
+        'jsdom',
+        'react-18',
+        'react-dom-18',
       ],
     },
     'spec/dummy': {

lib/react_on_rails/configuration.rb

@@ -9,6 +9,7 @@ def self.configure
   end
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
+  DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
 
   def self.configuration
     @configuration ||= Configuration.new(
@@ -18,6 +19,7 @@ def self.configuration
       generated_assets_dir: "",
       server_bundle_js_file: "",
       rsc_bundle_js_file: "",
+      react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -57,8 +59,8 @@ class Configuration
                   :server_render_method, :random_dom_id, :auto_load_bundle,
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
-                  :defer_generated_component_packs, :rsc_bundle_js_file,
-                  :force_load
+                  :defer_generated_component_packs, :force_load, :rsc_bundle_js_file,
+                  :react_client_manifest_file
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -74,7 +76,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
                    i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, i18n_yml_safe_load_options: nil,
                    random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
                    components_subdirectory: nil, auto_load_bundle: nil, force_load: nil,
-                   rsc_bundle_js_file: nil)
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -102,6 +104,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       # Server rendering:
       self.server_bundle_js_file = server_bundle_js_file
       self.rsc_bundle_js_file = rsc_bundle_js_file
+      self.react_client_manifest_file = react_client_manifest_file
       self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
@@ -247,6 +250,8 @@ def ensure_webpack_generated_files_exists
       files = ["manifest.json"]
       files << server_bundle_js_file if server_bundle_js_file.present?
       files << rsc_bundle_js_file if rsc_bundle_js_file.present?
+      files << react_client_manifest_file if react_client_manifest_file.present?
+
       self.webpack_generated_files = files
     end
 

lib/react_on_rails/helper.rb

@@ -436,7 +436,7 @@ def internal_rsc_react_component(react_component_name, options = {})
       render_options = create_render_options(react_component_name, options)
       json_stream = server_rendered_react_component(render_options)
       json_stream.transform do |chunk|
-        chunk[:html].html_safe
+        "#{chunk.to_json}\n".html_safe
       end
     end
 
@@ -691,10 +691,7 @@ def server_rendered_react_component(render_options) # rubocop:disable Metrics/Cy
                                                js_code: js_code)
       end
 
-      # TODO: handle errors for rsc streams
-      return result if render_options.rsc?
-
-      if render_options.stream?
+      if render_options.stream? || render_options.rsc?
         result.transform do |chunk_json_result|
           if should_raise_streaming_prerender_error?(chunk_json_result, render_options)
             raise_prerender_error(chunk_json_result, react_component_name, props, js_code)

lib/react_on_rails/packer_utils.rb

@@ -45,6 +45,10 @@ def self.dev_server_running?
       packer.dev_server.running?
     end
 
+    def self.dev_server_url
+      "#{packer.dev_server.protocol}://#{packer.dev_server.host_with_port}"
+    end
+
     def self.shakapacker_version
       return @shakapacker_version if defined?(@shakapacker_version)
       return nil unless ReactOnRails::Utils.gem_available?("shakapacker")
@@ -79,12 +83,27 @@ def self.bundle_js_uri_from_packer(bundle_name)
 
       if packer.dev_server.running? && (!is_bundle_running_on_server ||
         ReactOnRails.configuration.same_bundle_for_client_and_server)
-        "#{packer.dev_server.protocol}://#{packer.dev_server.host_with_port}#{hashed_bundle_name}"
+        "#{dev_server_url}#{hashed_bundle_name}"
       else
         File.expand_path(File.join("public", hashed_bundle_name)).to_s
       end
     end
 
+    def self.public_output_uri_path
+      "#{packer.config.public_output_path.relative_path_from(packer.config.public_path)}/"
+    end
+
+    # The function doesn't ensure that the asset exists.
+    # - It just returns url to the asset if dev server is running
+    # - Otherwise it returns file path to the asset
+    def self.asset_uri_from_packer(asset_name)
+      if dev_server_running?
+        "#{dev_server_url}/#{public_output_uri_path}#{asset_name}"
+      else
+        File.join(packer_public_output_path, asset_name).to_s
+      end
+    end
+
     def self.precompile?
       return ::Webpacker.config.webpacker_precompile? if using_webpacker_const?
       return ::Shakapacker.config.shakapacker_precompile? if using_shakapacker_const?

lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -234,8 +234,6 @@ def file_url_to_string(url)
         end
 
         def parse_result_and_replay_console_messages(result_string, render_options)
-          return { html: result_string } if render_options.rsc?
-
           result = nil
           begin
             result = JSON.parse(result_string)

lib/react_on_rails/test_helper/webpack_assets_status_checker.rb

@@ -50,8 +50,8 @@ def stale_generated_files(files)
       def all_compiled_assets
         @all_compiled_assets ||= begin
           webpack_generated_files = @webpack_generated_files.map do |bundle_name|
-            if bundle_name == ReactOnRails.configuration.server_bundle_js_file
-              ReactOnRails::Utils.server_bundle_js_file_path
+            if bundle_name == ReactOnRails.configuration.react_client_manifest_file
+              ReactOnRails::Utils.react_client_manifest_file_path
             else
               ReactOnRails::Utils.bundle_js_file_path(bundle_name)
             end

lib/react_on_rails/utils.rb

@@ -109,6 +109,17 @@ def self.rsc_bundle_js_file_path
       @rsc_bundle_path = bundle_js_file_path(bundle_name)
     end
 
+    def self.react_client_manifest_file_path
+      return @react_client_manifest_path if @react_client_manifest_path && !Rails.env.development?
+
+      file_name = ReactOnRails.configuration.react_client_manifest_file
+      @react_client_manifest_path = if ReactOnRails::PackerUtils.using_packer?
+                                      ReactOnRails::PackerUtils.asset_uri_from_packer(file_name)
+                                    else
+                                      File.join(generated_assets_full_path, file_name)
+                                    end
+    end
+
     def self.running_on_windows?
       (/cygwin|mswin|mingw|bccwin|wince|emx/ =~ RUBY_PLATFORM) != nil
     end

node_package/src/RSCClientRoot.ts

@@ -1,22 +1,38 @@
 import * as React from 'react';
 import RSDWClient from 'react-server-dom-webpack/client';
+import { fetch } from './utils';
+import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs';
 
-if (!('use' in React)) {
+if (!('use' in React && typeof React.use === 'function')) {
   throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
 }
 
 const { use } = React;
 
-const renderCache: Record<string, Promise<React.ReactNode>> = {};
+let renderCache: Record<string, Promise<React.ReactNode>> = {};
+export const resetRenderCache = () => {
+  renderCache = {};
+}
 
 export type RSCClientRootProps = {
   componentName: string;
   rscRenderingUrlPath: string;
 }
 
+const createFromFetch = async (fetchPromise: Promise<Response>) => {
+  const response = await fetchPromise;
+  const stream = response.body;
+  if (!stream) {
+    throw new Error('No stream found in response');
+  }
+  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream);
+  return RSDWClient.createFromReadableStream(transformedStream);
+}
+
 const fetchRSC = ({ componentName, rscRenderingUrlPath }: RSCClientRootProps) => {
   if (!renderCache[componentName]) {
-    renderCache[componentName] = RSDWClient.createFromFetch(fetch(`${rscRenderingUrlPath}/${componentName}`)) as Promise<React.ReactNode>;
+    const strippedUrlPath = rscRenderingUrlPath.replace(/^\/|\/$/g, '');
+    renderCache[componentName] = createFromFetch(fetch(`/${strippedUrlPath}/${componentName}`)) as Promise<React.ReactNode>;
   }
   return renderCache[componentName];
 }

node_package/src/ReactOnRailsRSC.ts

@@ -1,13 +1,21 @@
-// @ts-expect-error will define this module types later
-import { renderToReadableStream } from 'react-server-dom-webpack/server.edge';
-import { PassThrough } from 'stream';
-import fs from 'fs';
+import { renderToPipeableStream } from 'react-server-dom-webpack/server.node';
+import { PassThrough, Readable } from 'stream';
+import type { ReactElement } from 'react';
 
-import { RenderParams } from './types';
-import ComponentRegistry from './ComponentRegistry';
-import createReactOutput from './createReactOutput';
-import { isPromise, isServerRenderHash } from './isServerRenderResult';
+import { RSCRenderParams, StreamRenderState } from './types';
 import ReactOnRails from './ReactOnRails';
+import buildConsoleReplay from './buildConsoleReplay';
+import handleError from './handleError';
+import {
+  convertToError,
+  createResultObject,
+} from './serverRenderUtils';
+
+import {
+  streamServerRenderedComponent,
+  transformRenderStreamChunksToResultObject,
+} from './streamServerRenderedReactComponent';
+import loadReactClientManifest from './loadReactClientManifest';
 
 const stringToStream = (str: string) => {
   const stream = new PassThrough();
@@ -16,68 +24,49 @@ const stringToStream = (str: string) => {
   return stream;
 };
 
-const getBundleConfig = () => {
-  const bundleConfig = JSON.parse(fs.readFileSync('./public/webpack/development/react-client-manifest.json', 'utf8'));
-  // remove file:// from keys
-  const newBundleConfig: { [key: string]: unknown } = {};
-  for (const [key, value] of Object.entries(bundleConfig)) {
-    newBundleConfig[key.replace('file://', '')] = value;
-  }
-  return newBundleConfig;
-}
-
-ReactOnRails.serverRenderRSCReactComponent = (options: RenderParams) => {
-  const { name, domNodeId, trace, props, railsContext, throwJsErrors } = options;
-
-  let renderResult: null | PassThrough = null;
+const streamRenderRSCComponent = (reactElement: ReactElement, options: RSCRenderParams): Readable => {
+  const { throwJsErrors, reactClientManifestFileName } = options;
+  const renderState: StreamRenderState = {
+    result: null,
+    hasErrors: false,
+    isShellReady: true
+  };
 
+  const { pipeToTransform, readableStream, emitError } = transformRenderStreamChunksToResultObject(renderState);
   try {
-    const componentObj = ComponentRegistry.get(name);
-    if (componentObj.isRenderer) {
-      throw new Error(`\
-Detected a renderer while server rendering component '${name}'. \
-See https://github.com/shakacode/react_on_rails#renderer-functions`);
-    }
-
-    const reactRenderingResult = createReactOutput({
-      componentObj,
-      domNodeId,
-      trace,
-      props,
-      railsContext,
-    });
-
-    if (isServerRenderHash(reactRenderingResult) || isPromise(reactRenderingResult)) {
-      throw new Error('Server rendering of streams is not supported for server render hashes or promises.');
-    }
-
-    renderResult = new PassThrough();
-    let finalValue = "";
-    const streamReader = renderToReadableStream(reactRenderingResult, getBundleConfig()).getReader();
-    const decoder = new TextDecoder();
-    const processStream = async () => {
-      const { done, value } = await streamReader.read();
-      if (done) {
-        renderResult?.push(null);
-        // @ts-expect-error value is not typed
-        debugConsole.log('value', finalValue);
-        return;
+    const rscStream = renderToPipeableStream(
+      reactElement,
+      loadReactClientManifest(reactClientManifestFileName),
+      {
+        onError: (err) => {
+          const error = convertToError(err);
+          console.error("Error in RSC stream", error);
+          if (throwJsErrors) {
+            emitError(error);
+          }
+          renderState.hasErrors = true;
+          renderState.error = error;
+        }
       }
-
-      finalValue += decoder.decode(value);
-      renderResult?.push(value);
-      processStream();
-    }
-    processStream();
-  } catch (e: unknown) {
-    if (throwJsErrors) {
-      throw e;
-    }
-
-    renderResult = stringToStream(`Error: ${e}`);
+    );
+    pipeToTransform(rscStream);
+    return readableStream;
+  } catch (e) {
+    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);
   }
+};
 
-  return renderResult;
+ReactOnRails.serverRenderRSCReactComponent = (options: RSCRenderParams) => {
+  try {
+    return streamServerRenderedComponent(options, streamRenderRSCComponent);
+  } finally {
+    console.history = [];
+  }
 };
 
 export * from './types';