⚗️ add Promise.race for timing out the SSR promises

src/app/(components)/cache/cache.client.tsx

@@ -6,6 +6,7 @@ import * as RSDW from "react-server-dom-webpack/client";
 import { getSSRManifest } from "~/app/(components)/cache/manifest";
 import { ErrorBoundary } from "react-error-boundary";
 import { useRSCCacheContext } from "~/app/(components)/cache/cache-context";
+import { wait } from "~/lib/shared/utils.shared";
 
 function transformStringToStream(input: string) {
   // Using Flight to deserialize the args from the string.
@@ -30,11 +31,9 @@ export function CacheClient({
   cacheKey: string;
 }) {
   if (typeof window === "undefined") {
-    console.time("running cache client for SSR...");
     console.log("[SSR] before `use`");
   } else {
     console.log("[CSR] before `use`");
-    console.time("running cache client for CSR...");
   }
 
   let rscPromise: Promise<React.JSX.Element> | null = null;
@@ -47,34 +46,37 @@ export function CacheClient({
     if (typeof window === "undefined") {
       // the SSR manifest contains all the client components that will be SSR'ed
       // And also how to import them
-      rscPromise = RSDWSSr.createFromReadableStream(
-        rscStream,
-        getSSRManifest()
-      );
+      rscPromise = Promise.race([
+        RSDWSSr.createFromReadableStream(rscStream, getSSRManifest()),
+        wait(2000).then(() => {
+          throw new Error("[SSR] RSC CLIENT RENDERER timeout");
+        })
+      ]);
     } else {
       // Hydrate or CSR
-      rscPromise = RSDW.createFromReadableStream(rscStream, {});
+      rscPromise = Promise.race([
+        RSDW.createFromReadableStream(rscStream, {}),
+        wait(2000).then(() => {
+          throw new Error("[CSR] RSC CLIENT RENDERER timeout");
+        })
+      ]);
     }
     rscCache.set(cacheKey, rscPromise);
   }
 
   const element = React.use(rscPromise);
   if (typeof window === "undefined") {
     console.log("[SSR] after `use`");
-    console.timeEnd("running cache client for SSR...");
   } else {
     console.log("[CSR] after `use`");
-    console.timeEnd("running cache client for CSR...");
   }
   return element;
 }
 
 export function CacheErrorBoundary({
-  children,
-  fallback
+  children
 }: {
   children: React.ReactNode;
-  fallback: React.ReactNode;
 }) {
   return (
     <ErrorBoundary
@@ -84,7 +86,16 @@ export function CacheErrorBoundary({
         } else {
           console.error(`Error client rendering the cached component :`, error);
         }
-        return fallback;
+        return (
+          <div className="flex flex-wrap gap-2">
+            <span className="text-xl font-semibold">
+              Error rendering the cached component :
+            </span>
+            <code className="rounded-md bg-neutral text-red-400 px-1.5 py-1">
+              {error.toString()}
+            </code>
+          </div>
+        );
       }}
     >
       {children}

src/app/(components)/cache/cache.server.tsx

@@ -100,7 +100,7 @@ export async function Cache({
     }
 
     return (
-      <CacheErrorBoundary fallback={ssrErrorFallback ?? <></>}>
+      <CacheErrorBoundary>
         <CacheClient payload={cachedPayload.rsc} cacheKey={fullKey} />
       </CacheErrorBoundary>
     );