Add support for replaying logs happen on async server operations

node_package/src/ReactOnRails.ts

@@ -257,7 +257,7 @@ ctx.ReactOnRails = {
    * Used by Rails server rendering to replay console messages.
    */
   buildConsoleReplay(): string {
-    return buildConsoleReplay();
+    return buildConsoleReplay(console.history);
   },
 
   /**

node_package/src/buildConsoleReplay.ts

@@ -11,14 +11,16 @@ declare global {
   }
 }
 
-export function consoleReplay(): string {
+export function consoleReplay(consoleHistory: typeof console['history']): string {
   // console.history is a global polyfill used in server rendering.
+  // Must use Array.isArray instead of instanceof Array the history array is defined outside the vm if node renderer is used.
+  // In this case, the Array prototype used to define the array is not the same as the one in the global scope inside the vm.
   // $FlowFixMe
-  if (!(console.history instanceof Array)) {
+  if (!(Array.isArray(consoleHistory))) {
     return '';
   }
 
-  const lines = console.history.map(msg => {
+  const lines = consoleHistory.map(msg => {
     const stringifiedList = msg.arguments.map(arg => {
       let val;
       try {
@@ -39,6 +41,6 @@ export function consoleReplay(): string {
   return lines.join('\n');
 }
 
-export default function buildConsoleReplay(): string {
-  return RenderUtils.wrapInScriptTags('consoleReplayLog', consoleReplay());
+export default function buildConsoleReplay(consoleHistory: typeof console['history']): string {
+  return RenderUtils.wrapInScriptTags('consoleReplayLog', consoleReplay(consoleHistory));
 }

node_package/src/isServerRenderResult.ts

@@ -9,7 +9,7 @@ export function isServerRenderHash(testValue: CreateReactOutputResult):
     (testValue as ServerRenderResult).error);
 }
 
-export function isPromise(testValue: CreateReactOutputResult):
-  testValue is Promise<string> {
-  return !!((testValue as Promise<string>).then);
+export function isPromise<T>(testValue: CreateReactOutputResult | Promise<T> | string):
+  testValue is Promise<T> {
+  return !!((testValue as Promise<T>).then);
 }

node_package/src/serverRenderReactComponent.ts

@@ -3,8 +3,7 @@ import type { ReactElement } from 'react';
 
 import ComponentRegistry from './ComponentRegistry';
 import createReactOutput from './createReactOutput';
-import {isServerRenderHash, isPromise} from
-    './isServerRenderResult';
+import { isServerRenderHash, isPromise } from './isServerRenderResult';
 import buildConsoleReplay from './buildConsoleReplay';
 import handleError from './handleError';
 import type { RenderParams, RenderResult, RenderingError } from './types/index';
@@ -99,7 +98,7 @@ as a renderFunction and not a simple React Function Component.`);
     renderingError = e;
   }
 
-  const consoleReplayScript = buildConsoleReplay();
+  const consoleHistoryAfterSyncExecution = console.history;
   const addRenderingErrors = (resultObject: RenderResult, renderError: RenderingError) => {
     resultObject.renderingError = { // eslint-disable-line no-param-reassign
       message: renderError.message,
@@ -112,8 +111,16 @@ as a renderFunction and not a simple React Function Component.`);
       let promiseResult;
 
       try {
+        const awaitedRenderResult = await renderResult;
+        const consoleHistoryAfterAsyncExecution = console.history;
+        let consoleReplayScript = '';
+        if ((consoleHistoryAfterAsyncExecution?.length ?? 0) > (consoleHistoryAfterSyncExecution?.length ?? 0)) {
+          consoleReplayScript = buildConsoleReplay(consoleHistoryAfterAsyncExecution);
+        } else {
+          consoleReplayScript = buildConsoleReplay(consoleHistoryAfterSyncExecution);
+        }
         promiseResult = {
-          html: await renderResult,
+          html: awaitedRenderResult,
           consoleReplayScript,
           hasErrors,
         };
@@ -127,7 +134,7 @@ as a renderFunction and not a simple React Function Component.`);
             name,
             serverSide: true,
           }),
-          consoleReplayScript,
+          consoleReplayScript: buildConsoleReplay(consoleHistoryAfterSyncExecution),
           hasErrors: true,
         }
         renderingError = e;
@@ -145,7 +152,7 @@ as a renderFunction and not a simple React Function Component.`);
 
   const result = {
     html: renderResult,
-    consoleReplayScript,
+    consoleReplayScript: buildConsoleReplay(consoleHistoryAfterSyncExecution),
     hasErrors,
   } as RenderResult;
 
@@ -157,12 +164,18 @@ as a renderFunction and not a simple React Function Component.`);
 }
 
 const serverRenderReactComponent: typeof serverRenderReactComponentInternal = (options) => {
+  let result: string | Promise<RenderResult> | null = null;
   try {
-    return serverRenderReactComponentInternal(options);
+    result = serverRenderReactComponentInternal(options);
   } finally {
     // Reset console history after each render.
     // See `RubyEmbeddedJavaScript.console_polyfill` for initialization.
-    console.history = [];
+    // We don't need to clear the console history if the result is a promise
+    // Promises only supported in node renderer and node renderer takes care of cleanining console history
+    if (typeof result === 'string') {
+      console.history = [];
+    }
   }
+  return result;
 };
 export default serverRenderReactComponent;