Enhance error handling and support for async render functions in streaming components and add more tests

Author: AbanoubGhadban

node_package/src/handleError.ts

@@ -60,7 +60,10 @@ Message: ${e.message}
 ${e.stack}`;
 
     const reactElement = React.createElement('pre', null, msg);
-    return ReactDOMServer.renderToString(reactElement);
+    if (typeof ReactDOMServer.renderToString === 'function') {
+      return ReactDOMServer.renderToString(reactElement);
+    }
+    return msg;
   }
 
   return 'undefined';

node_package/src/streamServerRenderedReactComponent.ts

@@ -10,13 +10,6 @@ import handleError from './handleError';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils';
 import type { RenderParams, StreamRenderState } from './types';
 
-const stringToStream = (str: string): Readable => {
-  const stream = new PassThrough();
-  stream.write(str);
-  stream.end();
-  return stream;
-};
-
 type BufferedEvent = {
   event: 'data' | 'error' | 'end';
   data: unknown;
@@ -223,16 +216,20 @@ export const streamServerRenderedComponent = <T, P extends RenderParams>(
 
     return renderStrategy(reactRenderingResult, options);
   } catch (e) {
+    const { readableStream, writeChunk, emitError, endStream } = transformRenderStreamChunksToResultObject({
+      hasErrors: true,
+      isShellReady: false,
+      result: null,
+    });
     if (throwJsErrors) {
-      throw e;
+      emitError(e);
     }
 
     const error = convertToError(e);
     const htmlResult = handleError({ e: error, name: componentName, serverSide: true });
-    const jsonResult = JSON.stringify(
-      createResultObject(htmlResult, buildConsoleReplay(), { hasErrors: true, error, result: null }),
-    );
-    return stringToStream(jsonResult) as T;
+    writeChunk(htmlResult);
+    endStream();
+    return readableStream as T;
   }
 };
 

node_package/tests/serverRenderReactComponent.test.ts

@@ -216,7 +216,7 @@ describe('serverRenderReactComponent', () => {
     const reactComponentHashResult = { componentHtml: '<div>Hello</div>' };
     const X7 = (_props: unknown, _railsContext?: RailsContext) => Promise.resolve(reactComponentHashResult);
 
-    ComponentRegistry.register({ X7: X7 as unknown as RenderFunction });
+    ComponentRegistry.register({ X7 });
 
     const renderParams: RenderParams = {
       name: 'X7',
@@ -232,6 +232,23 @@ describe('serverRenderReactComponent', () => {
     expect(result.html).toEqual(JSON.stringify(reactComponentHashResult));
   });
 
+  it('serverRenderReactComponent renders async render function that returns react component', async () => {
+    const X8 = (_props: unknown, _railsContext?: RailsContext) =>
+      Promise.resolve(() => React.createElement('div', null, 'Hello'));
+    ComponentRegistry.register({ X8 });
+
+    const renderResult = serverRenderReactComponent({
+      name: 'X8',
+      domNodeId: 'myDomId',
+      trace: false,
+      throwJsErrors: false,
+      renderingReturnsPromises: true,
+    });
+    assertIsPromise(renderResult);
+    const result = await renderResult;
+    expect(result.html).toEqual('<div>Hello</div>');
+  });
+
   it('serverRenderReactComponent renders an error if attempting to render a renderer', () => {
     const X4: RenderFunction = (
       _props: unknown,

node_package/tests/streamServerRenderedReactComponent.test.jsx

@@ -60,8 +60,41 @@ describe('streamServerRenderedReactComponent', () => {
     throwSyncError = false,
     throwJsErrors = false,
     throwAsyncError = false,
+    componentType = 'reactComponent',
   } = {}) => {
-    ComponentRegistry.register({ TestComponentForStreaming });
+    switch (componentType) {
+      case 'reactComponent':
+        ComponentRegistry.register({ TestComponentForStreaming });
+        break;
+      case 'renderFunction':
+        ComponentRegistry.register({
+          TestComponentForStreaming: (props, _railsContext) => () => <TestComponentForStreaming {...props} />,
+        });
+        break;
+      case 'asyncRenderFunction':
+        ComponentRegistry.register({
+          TestComponentForStreaming: (props, _railsContext) => () =>
+            Promise.resolve(<TestComponentForStreaming {...props} />),
+        });
+        break;
+      case 'erroneousRenderFunction':
+        ComponentRegistry.register({
+          TestComponentForStreaming: (_props, _railsContext) => {
+            // The error happen inside the render function itself not inside the returned React component
+            throw new Error('Sync Error from render function');
+          },
+        });
+        break;
+      case 'erroneousAsyncRenderFunction':
+        ComponentRegistry.register({
+          TestComponentForStreaming: (_props, _railsContext) =>
+            // The error happen inside the render function itself not inside the returned React component
+            Promise.reject(new Error('Async Error from render function')),
+        });
+        break;
+      default:
+        throw new Error(`Unknown component type: ${componentType}`);
+    }
     const renderResult = streamServerRenderedReactComponent({
       name: 'TestComponentForStreaming',
       domNodeId: 'myDomId',
@@ -82,7 +115,7 @@ describe('streamServerRenderedReactComponent', () => {
   it('streamServerRenderedReactComponent streams the rendered component', async () => {
     const { renderResult, chunks } = setupStreamTest();
     await new Promise((resolve) => {
-      renderResult.on('end', resolve);
+      renderResult.once('end', resolve);
     });
 
     expect(chunks).toHaveLength(2);
@@ -101,7 +134,7 @@ describe('streamServerRenderedReactComponent', () => {
     const onError = jest.fn();
     renderResult.on('error', onError);
     await new Promise((resolve) => {
-      renderResult.on('end', resolve);
+      renderResult.once('end', resolve);
     });
 
     expect(onError).toHaveBeenCalled();
@@ -117,7 +150,7 @@ describe('streamServerRenderedReactComponent', () => {
     const onError = jest.fn();
     renderResult.on('error', onError);
     await new Promise((resolve) => {
-      renderResult.on('end', resolve);
+      renderResult.once('end', resolve);
     });
 
     expect(onError).not.toHaveBeenCalled();
@@ -133,17 +166,17 @@ describe('streamServerRenderedReactComponent', () => {
     const onError = jest.fn();
     renderResult.on('error', onError);
     await new Promise((resolve) => {
-      renderResult.on('end', resolve);
+      renderResult.once('end', resolve);
     });
 
     expect(onError).toHaveBeenCalled();
-    expect(chunks).toHaveLength(2);
+    expect(chunks.length).toBeGreaterThanOrEqual(2);
     expect(chunks[0].html).toContain('Header In The Shell');
     expect(chunks[0].consoleReplayScript).toBe('');
     expect(chunks[0].hasErrors).toBe(false);
     expect(chunks[0].isShellReady).toBe(true);
     // Script that fallbacks the render to client side
-    expect(chunks[1].html).toMatch(/<script>[.\s\S]*Async Error[.\s\S]*<\/script>/);
+    expect(chunks[1].html).toMatch(/the server rendering errored:\\n\\nAsync Error/);
     expect(chunks[1].consoleReplayScript).toBe('');
     expect(chunks[1].hasErrors).toBe(true);
     expect(chunks[1].isShellReady).toBe(true);
@@ -154,19 +187,149 @@ describe('streamServerRenderedReactComponent', () => {
     const onError = jest.fn();
     renderResult.on('error', onError);
     await new Promise((resolve) => {
-      renderResult.on('end', resolve);
+      renderResult.once('end', resolve);
     });
 
     expect(onError).not.toHaveBeenCalled();
-    expect(chunks).toHaveLength(2);
+    expect(chunks.length).toBeGreaterThanOrEqual(2);
     expect(chunks[0].html).toContain('Header In The Shell');
     expect(chunks[0].consoleReplayScript).toBe('');
     expect(chunks[0].hasErrors).toBe(false);
     expect(chunks[0].isShellReady).toBe(true);
     // Script that fallbacks the render to client side
-    expect(chunks[1].html).toMatch(/<script>[.\s\S]*Async Error[.\s\S]*<\/script>/);
+    expect(chunks[1].html).toMatch(/the server rendering errored:\\n\\nAsync Error/);
     expect(chunks[1].consoleReplayScript).toBe('');
     expect(chunks[1].hasErrors).toBe(true);
     expect(chunks[1].isShellReady).toBe(true);
   });
+
+  it.each(['asyncRenderFunction', 'renderFunction'])(
+    'streams a component from a %s that resolves to a React component',
+    async (componentType) => {
+      const { renderResult, chunks } = setupStreamTest({ componentType });
+      await new Promise((resolve) => {
+        renderResult.once('end', resolve);
+      });
+
+      expect(chunks).toHaveLength(2);
+      expect(chunks[0].html).toContain('Header In The Shell');
+      expect(chunks[0].consoleReplayScript).toBe('');
+      expect(chunks[0].hasErrors).toBe(false);
+      expect(chunks[0].isShellReady).toBe(true);
+      expect(chunks[1].html).toContain('Async Content');
+      expect(chunks[1].consoleReplayScript).toBe('');
+      expect(chunks[1].hasErrors).toBe(false);
+      expect(chunks[1].isShellReady).toBe(true);
+    },
+  );
+
+  it.each(['asyncRenderFunction', 'renderFunction'])(
+    'handles sync errors in the %s',
+    async (componentType) => {
+      const { renderResult, chunks } = setupStreamTest({ componentType, throwSyncError: true });
+      await new Promise((resolve) => {
+        renderResult.once('end', resolve);
+      });
+
+      expect(chunks).toHaveLength(1);
+      expect(chunks[0].html).toMatch(/<pre>Exception in rendering[.\s\S]*Sync Error[.\s\S]*<\/pre>/);
+      expect(chunks[0].consoleReplayScript).toBe('');
+      expect(chunks[0].hasErrors).toBe(true);
+      expect(chunks[0].isShellReady).toBe(false);
+    },
+  );
+
+  it.each(['asyncRenderFunction', 'renderFunction'])(
+    'handles async errors in the %s',
+    async (componentType) => {
+      const { renderResult, chunks } = setupStreamTest({ componentType, throwAsyncError: true });
+      await new Promise((resolve) => {
+        renderResult.once('end', resolve);
+      });
+
+      expect(chunks.length).toBeGreaterThanOrEqual(2);
+      expect(chunks[0].html).toContain('Header In The Shell');
+      expect(chunks[0].consoleReplayScript).toBe('');
+      expect(chunks[0].hasErrors).toBe(false);
+      expect(chunks[0].isShellReady).toBe(true);
+      expect(chunks[1].html).toMatch(/the server rendering errored:\\n\\nAsync Error/);
+      expect(chunks[1].consoleReplayScript).toBe('');
+      expect(chunks[1].hasErrors).toBe(true);
+      expect(chunks[1].isShellReady).toBe(true);
+    },
+  );
+
+  it.each(['erroneousRenderFunction', 'erroneousAsyncRenderFunction'])(
+    'handles error in the %s',
+    async (componentType) => {
+      const { renderResult, chunks } = setupStreamTest({ componentType });
+      await new Promise((resolve) => {
+        renderResult.once('end', resolve);
+      });
+
+      expect(chunks).toHaveLength(1);
+      const errorMessage =
+        componentType === 'erroneousRenderFunction'
+          ? 'Sync Error from render function'
+          : 'Async Error from render function';
+      expect(chunks[0].html).toMatch(
+        new RegExp(`<pre>Exception in rendering[.\\s\\S]*${errorMessage}[.\\s\\S]*<\\/pre>`),
+      );
+      expect(chunks[0].consoleReplayScript).toBe('');
+      expect(chunks[0].hasErrors).toBe(true);
+      expect(chunks[0].isShellReady).toBe(false);
+    },
+  );
+
+  it.each(['erroneousRenderFunction', 'erroneousAsyncRenderFunction'])(
+    'emits an error if there is an error in the %s',
+    async (componentType) => {
+      const { renderResult, chunks } = setupStreamTest({ componentType, throwJsErrors: true });
+      const onError = jest.fn();
+      renderResult.on('error', onError);
+      await new Promise((resolve) => {
+        renderResult.once('end', resolve);
+      });
+
+      expect(chunks).toHaveLength(1);
+      const errorMessage =
+        componentType === 'erroneousRenderFunction'
+          ? 'Sync Error from render function'
+          : 'Async Error from render function';
+      expect(chunks[0].html).toMatch(
+        new RegExp(`<pre>Exception in rendering[.\\s\\S]*${errorMessage}[.\\s\\S]*<\\/pre>`),
+      );
+      expect(chunks[0].consoleReplayScript).toBe('');
+      expect(chunks[0].hasErrors).toBe(true);
+      expect(chunks[0].isShellReady).toBe(false);
+      expect(onError).toHaveBeenCalled();
+    },
+  );
+
+  it('streams a string from a Promise that resolves to a string', async () => {
+    const StringPromiseComponent = () => Promise.resolve('<div>String from Promise</div>');
+    ComponentRegistry.register({ StringPromiseComponent });
+
+    const renderResult = streamServerRenderedReactComponent({
+      name: 'StringPromiseComponent',
+      domNodeId: 'stringPromiseId',
+      trace: false,
+      throwJsErrors: false,
+    });
+
+    const chunks = [];
+    renderResult.on('data', (chunk) => {
+      const decodedText = new TextDecoder().decode(chunk);
+      chunks.push(expectStreamChunk(decodedText));
+    });
+
+    await new Promise((resolve) => {
+      renderResult.once('end', resolve);
+    });
+
+    // Verify we have at least one chunk and it contains our string
+    expect(chunks.length).toBeGreaterThan(0);
+    expect(chunks[0].html).toContain('String from Promise');
+    expect(chunks[0].hasErrors).toBe(false);
+  });
 });