[WIP] handle errors happen in rsc payload (#1663)

* stream rsc payload in json objects like streamed react components
* make path to rsc bundle and react client manifest configurable

* feat: Improve client manifest path handling for dev server

- Add `dev_server_url` helper to centralize dev server URL construction
- Add `public_output_uri_path` to get relative webpack output path
- Add `asset_uri_from_packer` to handle asset URIs consistently
- Update `react_client_manifest_file_path` to return dev server URLs when appropriate
- Add comprehensive specs for new asset URI handling

This change ensures client manifest paths are properly resolved to dev server
URLs during development, improving hot-reloading functionality.

* fix: normalize RSC URL path by absorbing leading/trailing slashes
* specify Shakapacker as top-level module
* add tests for RSCClientRoot
* Make RSCClientRoot tests run with react 18
* Update webpack asset path configuration for client manifest

---------

Co-authored-by: Judah Meek <[email protected]>

Author: AbanoubGhadban

.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