document bug behavior in React

Author: AbanoubGhadban

packages/react-on-rails-pro/tests/concurrentRSCPayloadGeneration.rsc.test.tsx

@@ -14,6 +14,7 @@ import * as mock from 'mock-fs';
 import ReactOnRails, { RailsContextWithServerStreamingCapabilities } from '../src/ReactOnRailsRSC';
 import AsyncQueue from './AsyncQueue';
 import StreamReader from './StreamReader';
+import removeRSCChunkStack from './utils/removeRSCChunkStack';
 
 const manifestFileDirectory = path.resolve(__dirname, '../src')
 const clientManifestPath = path.join(manifestFileDirectory, 'react-client-manifest.json');
@@ -82,35 +83,10 @@ const createParallelRenders = (size: number) => {
 
   const enqueue = (value: string) => asyncQueues.forEach(asyncQueues => asyncQueues.enqueue(value));
 
-  const removeComponentJsonData = (chunk: string) => {
-    const parsedJson = JSON.parse(chunk);
-    const html = parsedJson.html as string;
-    const santizedHtml = html.split('\n').map(chunkLine => {
-      if (!chunkLine.includes('"stack":')) {
-        return chunkLine;
-      }
-
-      const regexMatch = /(^\d+):\{/.exec(chunkLine)
-      if (!regexMatch) {
-        return;
-      }
-
-      const chunkJsonString = chunkLine.slice(chunkLine.indexOf('{'));
-      const chunkJson = JSON.parse(chunkJsonString);
-      delete chunkJson.stack;
-      return `${regexMatch[1]}:${JSON.stringify(chunkJson)}`
-    });
-
-    return JSON.stringify({
-      ...parsedJson,
-      html: santizedHtml,
-    });
-  }
-
   const expectNextChunk = (nextChunk: string) => Promise.all(
     readers.map(async (reader) => {
       const chunk = await reader.nextChunk();
-      expect(removeComponentJsonData(chunk)).toEqual(removeComponentJsonData(nextChunk));
+      expect(removeRSCChunkStack(chunk)).toEqual(removeRSCChunkStack(nextChunk));
     })
   );
 

packages/react-on-rails-pro/tests/serverRenderRSCReactComponent.rsc.test.tsx

@@ -12,6 +12,7 @@ import { text } from 'stream/consumers';
 import { buildServerRenderer } from 'react-on-rails-rsc/server.node';
 import createReactOutput from 'react-on-rails/createReactOutput';
 import ReactOnRails, { RailsContextWithServerStreamingCapabilities } from '../src/ReactOnRailsRSC.ts';
+import removeRSCStackFromAllChunks from './utils/removeRSCStackFromAllChunks.ts'
 
 const PromiseWrapper = async ({ promise, name }: { promise: Promise<string>, name: string }) => {
   console.log(`[${name}] Before awaitng`);
@@ -59,7 +60,7 @@ mock({
 
 afterAll(() => {
   mock.restore();
-})
+});
 
 test('no logs leakage between concurrent rendering components', async () => {
   const readable1 = ReactOnRails.serverRenderRSCReactComponent({
@@ -89,10 +90,74 @@ test('no logs leakage between concurrent rendering components', async () => {
 
   expect(content1).toContain("First Unique Name");
   expect(content2).toContain("Second Unique Name");
-  // expect(content1.match(/First Unique Name/g)).toHaveLength(55)
-  // expect(content2.match(/Second Unique Name/g)).toHaveLength(55)
   expect(content1).not.toContain("Second Unique Name");
   expect(content2).not.toContain("First Unique Name");
+});
+
+test('no logs lekage from outside the component', async () => {
+  const readable1 = ReactOnRails.serverRenderRSCReactComponent({
+    railsContext: {
+      reactClientManifestFileName: 'react-client-manifest.json',
+      reactServerClientManifestFileName: 'react-server-client-manifest.json',
+    } as unknown as RailsContextWithServerStreamingCapabilities,
+    name: 'PromiseContainer',
+    renderingReturnsPromises: true,
+    throwJsErrors: true,
+    domNodeId: 'dom-id',
+    props: { name: "First Unique Name" }
+  });
 
-  // expect(content1.replace(new RegExp("First Unique Name", 'g'), "Second Unique Name")).toEqual(content2);
-})
+  const promise = new Promise<void>((resolve) => {
+    let i = 0;
+    const intervalId = setInterval(() => {
+      console.log(`Interval ${i} at [Outside The Component]`);
+      i += 1;
+      if (i === 50) {
+        clearInterval(intervalId);
+        resolve();
+      }
+    }, 1);
+  });
+
+  const [content1] = await Promise.all([text(readable1), promise]);
+
+  expect(content1).toContain("First Unique Name");
+  expect(content1).not.toContain("Outside The Component");
+});
+
+test('[bug] catches logs outside the component during reading the stream', async () => {
+  const readable1 = ReactOnRails.serverRenderRSCReactComponent({
+    railsContext: {
+      reactClientManifestFileName: 'react-client-manifest.json',
+      reactServerClientManifestFileName: 'react-server-client-manifest.json',
+    } as unknown as RailsContextWithServerStreamingCapabilities,
+    name: 'PromiseContainer',
+    renderingReturnsPromises: true,
+    throwJsErrors: true,
+    domNodeId: 'dom-id',
+    props: { name: "First Unique Name" }
+  });
+  
+  let content1 = "";
+  let i = 0;
+  readable1.on('data', (chunk) => {
+    i += 1;
+    // To avoid infinite loop
+    if (i < 5) {
+      console.log("Outside The Component");
+    }
+    content1 += chunk.toString();
+  });
+
+  // However, any logs from outside the stream 'data' event callback is not catched
+  const intervalId = setInterval(() => {
+    console.log("From Interval")
+  }, 2);
+  await finished(readable1);
+  clearInterval(intervalId);
+
+  expect(content1).toContain("First Unique Name");
+  expect(content1).not.toContain("From Interval");
+  // Here's the bug
+  expect(content1).toContain("Outside The Component");
+});

packages/react-on-rails-pro/tests/utils/removeRSCChunkStack.ts

@@ -0,0 +1,26 @@
+const removeRSCChunkStack = (chunk: string) => {
+  const parsedJson = JSON.parse(chunk);
+  const html = parsedJson.html as string;
+  const santizedHtml = html.split('\n').map(chunkLine => {
+    if (!chunkLine.includes('"stack":')) {
+      return chunkLine;
+    }
+
+    const regexMatch = /(^\d+):\{/.exec(chunkLine)
+    if (!regexMatch) {
+      return;
+    }
+
+    const chunkJsonString = chunkLine.slice(chunkLine.indexOf('{'));
+    const chunkJson = JSON.parse(chunkJsonString);
+    delete chunkJson.stack;
+    return `${regexMatch[1]}:${JSON.stringify(chunkJson)}`
+  });
+
+  return JSON.stringify({
+    ...parsedJson,
+    html: santizedHtml,
+  });
+}
+
+export default removeRSCChunkStack;

packages/react-on-rails-pro/tests/utils/removeRSCStackFromAllChunks.ts

@@ -0,0 +1,9 @@
+import removeRSCChunkStack from "./removeRSCChunkStack.ts";
+
+const removeRSCStackFromAllChunks = (allChunks: string) => {
+  return allChunks.split('\n')
+  .map((chunk) => chunk.trim().length > 0 ? removeRSCChunkStack(chunk) : chunk)
+  .join('\n');
+}
+
+export default removeRSCStackFromAllChunks;