make consoleReplay function accept the list of logs to be added to the script

Author: AbanoubGhadban

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,16 +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 (!(Array.isArray(console.history))) {
+  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 {
@@ -41,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/serverRenderReactComponent.ts

@@ -98,6 +98,7 @@ as a renderFunction and not a simple React Function Component.`);
     renderingError = e;
   }
 
+  const consoleHistoryAfterSyncExecution = console.history;
   const addRenderingErrors = (resultObject: RenderResult, renderError: RenderingError) => {
     resultObject.renderingError = { // eslint-disable-line no-param-reassign
       message: renderError.message,
@@ -110,9 +111,17 @@ 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,
-          consoleReplayScript: buildConsoleReplay(),
+          html: awaitedRenderResult,
+          consoleReplayScript,
           hasErrors,
         };
       } catch (e: any) {
@@ -125,7 +134,7 @@ as a renderFunction and not a simple React Function Component.`);
             name,
             serverSide: true,
           }),
-          consoleReplayScript: buildConsoleReplay(),
+          consoleReplayScript: buildConsoleReplay(consoleHistoryAfterSyncExecution),
           hasErrors: true,
         }
         renderingError = e;
@@ -143,7 +152,7 @@ as a renderFunction and not a simple React Function Component.`);
 
   const result = {
     html: renderResult,
-    consoleReplayScript: buildConsoleReplay(),
+    consoleReplayScript: buildConsoleReplay(consoleHistoryAfterSyncExecution),
     hasErrors,
   } as RenderResult;
 
@@ -161,11 +170,9 @@ const serverRenderReactComponent: typeof serverRenderReactComponentInternal = (o
   } finally {
     // Reset console history after each render.
     // See `RubyEmbeddedJavaScript.console_polyfill` for initialization.
-    if (result && isPromise(result)) {
-      result.finally(() => {
-        console.history = [];
-      });
-    } else {
+    // 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 = [];
     }
   }