pass console messages from server to client and replay them

Author: AbanoubGhadban

lib/react_on_rails/helper.rb

@@ -398,26 +398,24 @@ def build_react_component_result_for_server_streamed_content(
       component_specification_tag: required("component_specification_tag"),
       render_options: required("render_options")
     )
-      content_tag_options_html_tag = render_options.html_options[:tag] || "div"
-      # The component_specification_tag is appended to the first chunk
-      # We need to pass it early with the first chunk because it's needed in hydration
-      # We need to make sure that client can hydrate the app early even before all components are streamed
       is_first_chunk = true
-      rendered_html_stream = rendered_html_stream.transform do |chunk|
+      rendered_html_stream = rendered_html_stream.transform do |chunk_json_result|
         if is_first_chunk
           is_first_chunk = false
-          html_content = <<-HTML
-            #{rails_context_if_not_already_rendered}
-            #{component_specification_tag}
-            <#{content_tag_options_html_tag} id="#{render_options.dom_id}">#{chunk}</#{content_tag_options_html_tag}>
-          HTML
-          next html_content.strip
+          next build_react_component_result_for_server_rendered_string(
+            server_rendered_html: chunk_json_result["html"],
+            component_specification_tag: component_specification_tag,
+            console_script: chunk_json_result["consoleReplayScript"],
+            render_options: render_options
+          )
         end
-        chunk
-      end
 
-      rendered_html_stream.transform(&:html_safe)
-      # TODO: handle console logs
+        result_console_script = render_options.replay_console ? chunk_json_result["consoleReplayScript"] : ""
+        # No need to prepend component_specification_tag or add rails context again as they're already included in the first chunk
+        compose_react_component_html_with_spec_and_console(
+          "", chunk_json_result["html"], result_console_script
+        )
+      end
     end
 
     def build_react_component_result_for_server_rendered_hash(
@@ -456,11 +454,12 @@ def build_react_component_result_for_server_rendered_hash(
 
     def compose_react_component_html_with_spec_and_console(component_specification_tag, rendered_output, console_script)
       # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
-      <<~HTML.html_safe
+      html_content = <<~HTML
         #{rendered_output}
               #{component_specification_tag}
               #{console_script}
       HTML
+      html_content.strip.html_safe
     end
 
     def rails_context_if_not_already_rendered

lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -56,7 +56,11 @@ def exec_server_render_js(js_code, render_options, js_evaluator = nil)
             @file_index += 1
           end
           begin
-            json_string = js_evaluator.eval_js(js_code, render_options)
+            result = if render_options.stream?
+              js_evaluator.eval_streaming_js(js_code, render_options)
+            else
+              js_evaluator.eval_js(js_code, render_options)
+            end
           rescue StandardError => err
             msg = <<~MSG
               Error evaluating server bundle. Check your webpack configuration.
@@ -71,33 +75,15 @@ def exec_server_render_js(js_code, render_options, js_evaluator = nil)
             end
             raise ReactOnRails::Error, msg, err.backtrace
           end
-          result = nil
-          begin
-            result = JSON.parse(json_string)
-          rescue JSON::ParserError => e
-            raise ReactOnRails::JsonParseError.new(parse_error: e, json: json_string)
-          end
+          
+          return parse_result_and_replay_console_messages(result, render_options) unless render_options.stream?
 
-          if render_options.logging_on_server
-            console_script = result["consoleReplayScript"]
-            console_script_lines = console_script.split("\n")
-            console_script_lines = console_script_lines[2..-2]
-            re = /console\.(?:log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
-            console_script_lines&.each do |line|
-              match = re.match(line)
-              Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
-            end
-          end
-          result
+          # Streamed component is returned as stream of strings.
+          # We need to parse each chunk and replay the console messages.
+          result.transform { |chunk| parse_result_and_replay_console_messages(chunk, render_options) }
         end
         # rubocop:enable Metrics/CyclomaticComplexity, Metrics/AbcSize, Metrics/PerceivedComplexity
 
-        # TODO: merge with exec_server_render_js
-        def exec_server_render_streaming_js(js_code, render_options, js_evaluator = nil)
-          js_evaluator ||= self
-          js_evaluator.eval_streaming_js(js_code, render_options)
-        end
-
         def trace_js_code_used(msg, js_code, file_name = "tmp/server-generated.js", force: false)
           return unless ReactOnRails.configuration.trace || force
 
@@ -239,6 +225,27 @@ def file_url_to_string(url)
           msg = "file_url_to_string #{url} failed\nError is: #{e}"
           raise ReactOnRails::Error, msg
         end
+
+        def parse_result_and_replay_console_messages(result_string, render_options)
+          result = nil
+          begin
+            result = JSON.parse(result_string)
+          rescue JSON::ParserError => e
+            raise ReactOnRails::JsonParseError.new(parse_error: e, json: result_string)
+          end
+
+          if render_options.logging_on_server
+            console_script = result["consoleReplayScript"]
+            console_script_lines = console_script.split("\n")
+            console_script_lines = console_script_lines[2..-2]
+            re = /console\.(?:log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
+            console_script_lines&.each do |line|
+              match = re.match(line)
+              Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
+            end
+          end
+          result
+        end
       end
       # rubocop:enable Metrics/ClassLength
     end

node_package/src/buildConsoleReplay.ts

@@ -11,14 +11,14 @@ declare global {
   }
 }
 
-export function consoleReplay(): string {
+export function consoleReplay(skipFirstNumberOfMessages: number = 0): string {
   // console.history is a global polyfill used in server rendering.
   // $FlowFixMe
   if (!(console.history instanceof Array)) {
     return '';
   }
 
-  const lines = console.history.map(msg => {
+  const lines = console.history.slice(skipFirstNumberOfMessages).map(msg => {
     const stringifiedList = msg.arguments.map(arg => {
       let val;
       try {
@@ -39,6 +39,6 @@ export function consoleReplay(): string {
   return lines.join('\n');
 }
 
-export default function buildConsoleReplay(): string {
-  return RenderUtils.wrapInScriptTags('consoleReplayLog', consoleReplay());
+export default function buildConsoleReplay(skipFirstNumberOfMessages: number = 0): string {
+  return RenderUtils.wrapInScriptTags('consoleReplayLog', consoleReplay(skipFirstNumberOfMessages));
 }

node_package/src/serverRenderReactComponent.ts

@@ -1,5 +1,5 @@
 import ReactDOMServer from 'react-dom/server';
-import { PassThrough, Readable } from 'stream';
+import { PassThrough, Readable, Transform } from 'stream';
 import type { ReactElement } from 'react';
 
 import ComponentRegistry from './ComponentRegistry';
@@ -178,6 +178,7 @@ export const streamServerRenderedReactComponent = (options: RenderParams): Reada
   const { name, domNodeId, trace, props, railsContext, throwJsErrors } = options;
 
   let renderResult: null | Readable = null;
+  let previouslyReplayedConsoleMessages: number = 0;
 
   try {
     const componentObj = ComponentRegistry.get(name);
@@ -199,12 +200,26 @@ See https://github.com/shakacode/react_on_rails#renderer-functions`);
       throw new Error('Server rendering of streams is not supported for server render hashes or promises.');
     }
 
-    const renderStream = new PassThrough();
-    ReactDOMServer.renderToPipeableStream(reactRenderingResult).pipe(renderStream);
-    renderResult = renderStream;
+    const transformStream = new Transform({
+      transform(chunk, _, callback) {
+        const htmlChunk = chunk.toString();
+        const consoleReplayScript = buildConsoleReplay(previouslyReplayedConsoleMessages);
+        previouslyReplayedConsoleMessages = console.history?.length || 0;
+        
+        const jsonChunk = JSON.stringify({
+          html: htmlChunk,
+          consoleReplayScript,
+        });
+        
+        this.push(jsonChunk);
+        callback();
+      }
+    });
+
+    ReactDOMServer.renderToPipeableStream(reactRenderingResult)
+      .pipe(transformStream);
 
-    // TODO: Add console replay script to the stream
-    // Ensure to avoid console messages leaking between different components rendering
+    renderResult = transformStream;
   } catch (e: any) {
     if (throwJsErrors) {
       throw e;