serialize error during rsc payload generation at the RSC payload

Author: AbanoubGhadban

packages/react-on-rails-pro/src/RSCRoute.tsx

@@ -77,7 +77,15 @@ export type RSCRouteProps = {
 
 const PromiseWrapper = ({ promise }: { promise: Promise<React.ReactNode> }) => {
   // React.use is available in React 18.3+
-  return React.use(promise);
+  const promiseResult = React.use(promise);
+
+  // In case that an error happened during the rendering of the RSC payload before the rendering of the component itself starts
+  // RSC bundle will return an error object serilaized inside the RSC payload
+  if (promiseResult instanceof Error) {
+    throw promiseResult;
+  }
+
+  return promiseResult;
 };
 
 const RSCRoute = ({ componentName, componentProps }: RSCRouteProps): React.ReactNode => {

packages/react-on-rails-pro/src/handleErrorRSC.ts

@@ -1,12 +1,10 @@
-import * as React from 'react';
 import { ErrorOptions } from 'react-on-rails/types';
 import { renderToPipeableStream } from 'react-on-rails-rsc/server.node';
 import generateRenderingErrorMessage from 'react-on-rails/generateRenderingErrorMessage';
 
 const handleError = (options: ErrorOptions) => {
   const msg = generateRenderingErrorMessage(options);
-  const reactElement = React.createElement('pre', null, msg);
-  return renderToPipeableStream(reactElement, {
+  return renderToPipeableStream(new Error(msg), {
     filePathToModuleMetadata: {},
     moduleLoading: { prefix: '', crossOrigin: null },
   });