vite-plugin-react-server 1.1.7 → 1.1.8

package/plugin/metrics/formatMetrics.ts

@@ -0,0 +1,37 @@
+import type { RenderMetrics } from "../types.js";
+
+export function formatMetrics(metrics: RenderMetrics): string {
+  const {
+    route,
+    rscSize,
+    chunks,
+    chunkRate,
+    processingTime,
+    memoryUsage,
+    streamMetrics,
+  } = metrics;
+
+  // Format memory usage in MB
+  const formatMemory = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(2)}MB`;
+
+  return `
+Route: ${route}
+Size: ${(rscSize / 1024).toFixed(2)}KB
+Chunks: ${chunks} (${chunkRate.toFixed(2)} chunks/s)
+Processing Time: ${processingTime.toFixed(2)}ms
+Memory:
+  RSS: ${formatMemory(memoryUsage.rss)}
+  Heap Total: ${formatMemory(memoryUsage.heapTotal)}
+  Heap Used: ${formatMemory(memoryUsage.heapUsed)}
+  External: ${formatMemory(memoryUsage.external)}
+Stream:
+  Duration: ${streamMetrics.duration.toFixed(2)}ms
+  Backpressure: ${streamMetrics.backpressureCount}
+  Drain: ${streamMetrics.drainCount}
+  Errors: ${streamMetrics.errorCount}
+`.trim();
+}
+
+export function logMetrics(metrics: RenderMetrics) {
+  console.log(formatMetrics(metrics));
+} 

package/plugin/metrics/index.ts

@@ -0,0 +1,2 @@
+export * from "./formatMetrics.js";
+export type { RenderMetrics, StreamMetrics } from "../types.js";

package/plugin/react-client/createWorkerStream.ts

@@ -0,0 +1,107 @@
+import type { Logger } from "vite";
+import type { RscRenderMessage, RscWorkerOutputMessage } from "../worker/types.js";
+import type { StreamMetrics } from "../../types.js";
+import { Worker } from "node:worker_threads";
+/**
+ * Creates an async generator that yields RSC chunks from the worker.
+ * Handles both module requests and RSC streaming.
+ *
+ * @param worker - The worker thread
+ * @param server - The Vite dev server
+ * @param message - The RSC render message
+ * @param rscWorkerLoaderPort - Optional loader port for module loading
+ * @returns An async generator that yields RSC chunks
+ */
+export async function* createWorkerStream(
+    worker: Worker,
+    message: Omit<RscRenderMessage, "type" | "id">,
+    logger: Logger,
+    onMetrics?: (metrics: StreamMetrics) => void
+  ): AsyncGenerator<Uint8Array, void, unknown> {
+    let messageHandler: (message: RscWorkerOutputMessage) => void;
+    let cleanup: () => void = () => {};
+    let onError = (error: any) => {
+      let err;
+      if (typeof error === "string") {
+        err = new Error(error);
+      } else if (typeof error === "object" && error != null) {
+        const stackTrace = "stack" in error ? String(error.stack) : "";
+        const msg = "message" in error ? String(error.message) : "";
+        err = {
+          message: msg,
+          stack: stackTrace,
+        }
+      } else {
+        err = new Error("Failed to load page content");
+      }
+      // Format the error using the worker's error details
+      return new TextEncoder().encode(`0:E{"digest":"","name":"Error","message":"${
+        err.message
+      }","stack":${JSON.stringify(err.stack)},"env":"Server"}`);
+    };
+    // First yield: wait for initial message and handle module requests
+    yield await new Promise<Uint8Array>((resolve) => {
+      messageHandler = (message: RscWorkerOutputMessage) => {
+        switch (message.type) {
+          case "RSC_CHUNK":
+            resolve(message.chunk);
+            break;
+          case "RSC_END":
+            resolve(new Uint8Array());
+            break;
+          case "ERROR":
+            const errorResponse = onError(message.error);
+            resolve(errorResponse);
+            break;
+          default:
+            logger.warn(`Unknown initial message type: ${message.type}`);
+            resolve(new Uint8Array());
+            break;
+        }
+      };
+  
+      cleanup = () => {
+        worker.off("message", messageHandler);
+      };
+  
+      worker.on("message", messageHandler);
+  
+      // Send the render message to start the RSC stream
+      worker.postMessage({
+        type: "RSC_RENDER",
+        id: message.route,
+        ...message,
+      });
+    });
+  
+    // Subsequent yields: handle RSC chunks until stream ends
+    while (true) {
+      const chunk = await new Promise<Uint8Array>((resolve) => {
+        messageHandler = (message: RscWorkerOutputMessage) => {
+          switch (message.type) {
+            case "RSC_END":
+              cleanup();
+              resolve(new Uint8Array());
+              return;
+            case "RSC_CHUNK":
+              resolve(message.chunk);
+              return;
+            case "RSC_METRICS":
+              onMetrics?.(message.metrics);
+              break;
+            case "ERROR":
+              cleanup();
+              const errorResponse = onError(message.error);
+              resolve(errorResponse);
+              return;
+          }
+        };
+        worker.once("message", messageHandler);
+      });
+  
+      if (chunk.length === 0) {
+        break;
+      }
+      yield chunk;
+    }
+  }

package/plugin/react-client/plugin.ts

@@ -82,6 +82,9 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
         autoDiscoveredFiles,
         userOptions,
         hmrChannel,
+        onMetrics: userOptions.onMetrics ? (metrics) => {
+          userOptions.onMetrics?.(metrics);
+        } : undefined,
       });
     },
 

package/plugin/react-client/restartWorker.ts

@@ -0,0 +1,65 @@
+import type { ResolvedUserOptions } from "../../types.js";
+
+import type { ViteDevServer } from "vite";
+import type { AutoDiscoveredFiles } from "../../types.js";
+import { createWorker } from "../worker/createWorker.js";
+import { serializedDevServerConfig } from "../helpers/serializeUserOptions.js";
+import { serializedOptions } from "../helpers/serializeUserOptions.js";
+import type { MessageChannel, Worker } from "node:worker_threads";
+
+let currentWorker: Worker | null = null;
+let isRestarting = false;
+
+export async function restartWorker(
+    server: ViteDevServer,
+    autoDiscoveredFiles: AutoDiscoveredFiles,
+    userOptions: ResolvedUserOptions,
+    hmrChannel: MessageChannel
+  ) {
+    if (isRestarting) return;
+    isRestarting = true;
+  
+    try {
+      // Terminate the current worker if it exists
+      if (currentWorker) {
+        currentWorker.terminate();
+        currentWorker = null;
+      }
+      const routeCount = autoDiscoveredFiles.urlMap.size;
+      const hmrBuffer = 20; // Buffer for HMR and other operations
+      const maxListeners = routeCount + hmrBuffer;
+      const workerResult = await createWorker({
+        projectRoot: server.config.root,
+        workerPath: userOptions.rscWorkerPath,
+        reverseCondition: "react-server",
+        currentCondition: "react-client",
+        maxListeners: maxListeners,
+        envPrefix:
+          typeof server.config.envPrefix === "string"
+            ? server.config.envPrefix
+            : Array.isArray(server.config.envPrefix)
+            ? server.config.envPrefix[0]
+            : "VITE_",
+        workerData: {
+          hmrPort: hmrChannel.port2,
+          resolvedConfig: serializedDevServerConfig(server.config),
+          userOptions: serializedOptions(userOptions, autoDiscoveredFiles),
+        },
+        transferList: [hmrChannel.port2],
+      });
+  
+      if (workerResult.type === "success") {
+        currentWorker = workerResult.worker;
+        server.config.logger.info(
+          `[react-client] Set max listeners to ${maxListeners} for ${routeCount} routes`
+        );
+      } else if (workerResult.type === "error") {
+        server.config.logger.error("Failed to start rsc-worker", {
+          error: workerResult.error,
+        });
+      }
+    } finally {
+      isRestarting = false;
+    }
+    return currentWorker;
+  }

package/plugin/react-client/server.ts

@@ -1,136 +1,25 @@
-import type { ViteDevServer } from "vite";
+import type { Logger, ViteDevServer } from "vite";
 import type {
   AutoDiscoveredFiles,
+  RenderMetrics,
   RequestHandler,
   ResolvedUserOptions,
+  StreamMetrics,
 } from "../types.js";
 import type {
-  RscWorkerOutputMessage,
   RscRenderMessage,
 } from "../worker/types.js";
 import type { Worker as NodeWorker } from "node:worker_threads";
 import { MessageChannel } from "node:worker_threads";
 import {
-  serializedDevServerConfig,
   serializedOptions,
 } from "../helpers/serializeUserOptions.js";
-import { createWorker } from "../worker/createWorker.js";
 import { getRouteFiles } from "../helpers/getRouteFiles.js";
 import { requestToRoute } from "../helpers/requestToRoute.js";
+import { performance } from "node:perf_hooks";
+import { createWorkerStream } from "./createWorkerStream.js";
+import { restartWorker } from "./restartWorker.js";
 
-let currentWorker: NodeWorker | null = null;
-let isRestarting = false;
-
-async function restartWorker(
-  server: ViteDevServer,
-  autoDiscoveredFiles: AutoDiscoveredFiles,
-  userOptions: ResolvedUserOptions,
-  hmrChannel: MessageChannel
-) {
-  if (isRestarting) return;
-  isRestarting = true;
-
-  try {
-    // Terminate the current worker if it exists
-    if (currentWorker) {
-      currentWorker.terminate();
-      currentWorker = null;
-    }
-
-    const workerResult = await createWorker({
-      projectRoot: server.config.root,
-      workerPath: userOptions.rscWorkerPath,
-      reverseCondition: "react-server",
-      currentCondition: "react-client",
-      workerData: {
-        hmrPort: hmrChannel.port2,
-        resolvedConfig: serializedDevServerConfig(server.config),
-        userOptions: serializedOptions(userOptions, autoDiscoveredFiles),
-      },
-      transferList: [hmrChannel.port2],
-    });
-
-    if (workerResult.type === "success") {
-      currentWorker = workerResult.worker;
-    } else if (workerResult.type === "error") {
-      server.config.logger.error("Failed to start rsc-worker", {
-        error: workerResult.error,
-      });
-    }
-  } finally {
-    isRestarting = false;
-  }
-}
-
-/**
- * Creates an async generator that yields RSC chunks from the worker.
- * Handles both module requests and RSC streaming.
- *
- * @param worker - The worker thread
- * @param server - The Vite dev server
- * @param message - The RSC render message
- * @param rscWorkerLoaderPort - Optional loader port for module loading
- * @returns An async generator that yields RSC chunks
- */
-async function* createWorkerStream(
-  worker: NodeWorker,
-  message: Omit<RscRenderMessage, "type" | "id">
-): AsyncGenerator<Uint8Array, void, unknown> {
-  let messageHandler: (message: RscWorkerOutputMessage) => void;
-  let cleanup: () => void = () => {};
-
-  // First yield: wait for initial message and handle module requests
-  yield await new Promise<Uint8Array>((resolve) => {
-    messageHandler = (message: RscWorkerOutputMessage) => {
-      if (message.type === "RSC_CHUNK") {
-        resolve(message.chunk);
-      }
-      if (message.type === "ERROR") {
-        resolve(new Uint8Array());
-      }
-    };
-
-    cleanup = () => {
-      worker.off("message", messageHandler);
-    };
-
-    worker.on("message", messageHandler);
-
-    // Send the render message to start the RSC stream
-    worker.postMessage({
-      type: "RSC_RENDER",
-      id: message.route,
-      ...message,
-    });
-  });
-
-  // Subsequent yields: handle RSC chunks until stream ends
-  while (true) {
-    const chunk = await new Promise<Uint8Array>((resolve) => {
-      messageHandler = (message: RscWorkerOutputMessage) => {
-        if (message.type === "RSC_END") {
-          cleanup();
-          resolve(new Uint8Array());
-          return;
-        }
-        if (message.type === "RSC_CHUNK") {
-          resolve(message.chunk);
-        }
-        if (message.type === "ERROR") {
-          cleanup();
-          resolve(new Uint8Array());
-          return;
-        }
-      };
-      worker.once("message", messageHandler);
-    });
-
-    if (chunk.length === 0) {
-      break;
-    }
-    yield chunk;
-  }
-}
 
 /**
  * Handles the RSC stream from the worker.
@@ -142,17 +31,44 @@ async function* createWorkerStream(
  */
 export function handleWorkerRscStream(
   worker: NodeWorker,
-  message: Omit<RscRenderMessage, "type" | "id">
+  message: Omit<RscRenderMessage, "type" | "id">,
+  logger: Logger,
+  onMetrics?: (metrics: StreamMetrics) => void
 ): ReadableStream<Uint8Array> {
   // Create a ReadableStream from the async generator
   return new ReadableStream<Uint8Array>({
     async start(controller) {
       try {
-        for await (const chunk of createWorkerStream(worker, message)) {
+        for await (const chunk of createWorkerStream(
+          worker,
+          message,
+          logger,
+          onMetrics
+        )) {
           controller.enqueue(chunk);
         }
       } catch (error) {
-        controller.error(error);
+        const err =
+          error instanceof Error
+            ? error
+            : typeof error === "string"
+            ? new Error(error)
+            : typeof error === "object" && error != null
+            ? {
+                message:
+                  "message" in error ? String(error.message) : "Unknown error",
+                stack: "stack" in error ? String(error.stack) : "",
+                name: "name" in error ? String(error.name) : "Error",
+              }
+            : {
+                message: "Unknown error",
+                stack: "",
+                name: "Error",
+              };
+        logger.error(err.message, {
+          error: err,
+        });
+        controller.error(err);
       } finally {
         controller.close();
       }
@@ -171,16 +87,19 @@ export async function configureWorkerRequestHandler({
   autoDiscoveredFiles,
   userOptions: _userOptions,
   hmrChannel,
+  onMetrics,
 }: {
   server: ViteDevServer;
   autoDiscoveredFiles: AutoDiscoveredFiles;
   userOptions: ResolvedUserOptions;
   hmrChannel: MessageChannel;
+  onMetrics?: (metrics: RenderMetrics) => void;
 }) {
   let {
     // remove these
-    moduleBaseURL: _moduleBaseURL,
     projectRoot: _projectRoot,
+    moduleBaseURL: _moduleBaseURL,
+    moduleBasePath: _moduleBasePath,
     ...handlerUserOptions
   } = _userOptions;
   const handlerOptions = Object.assign({}, handlerUserOptions, {
@@ -189,7 +108,7 @@ export async function configureWorkerRequestHandler({
         ? `${server.config.server.https ? "https" : "http"}://${
             server.config.server.host
           }:${server.config.server.port}`
-        : "",
+        : _moduleBaseURL,
     moduleBasePath:
       server.config.base === "/"
         ? ""
@@ -200,7 +119,7 @@ export async function configureWorkerRequestHandler({
   });
 
   // Start the worker
-  await restartWorker(server, autoDiscoveredFiles, handlerOptions, hmrChannel);
+  const currentWorker = await restartWorker(server, autoDiscoveredFiles, handlerOptions, hmrChannel);
 
   // Create the request handler
   const handler: RequestHandler = async (req, res, next) => {
@@ -214,7 +133,7 @@ export async function configureWorkerRequestHandler({
       // Get the route from the request
       let route = requestToRoute(req, {
         moduleBasePath: handlerOptions.moduleBasePath,
-        build: handlerOptions.build
+        build: handlerOptions.build,
       });
       if (!route) {
         return next();
@@ -227,10 +146,14 @@ export async function configureWorkerRequestHandler({
         handlerOptions
       );
       if (routeFiles.type === "error") {
-        server.config.logger.error(routeFiles.error.message, {
-          error: routeFiles.error,
-          timestamp: true,
-        });
+        server.config.logger.error(
+          `[react-client] Error fetching route files for ${route}`,
+          {
+            error: routeFiles.error,
+            timestamp: true,
+            environment: "server",
+          }
+        );
         return next();
       }
       const { page, props } = routeFiles;
@@ -243,19 +166,45 @@ export async function configureWorkerRequestHandler({
         handlerOptions,
         autoDiscoveredFiles
       );
-      const stream = handleWorkerRscStream(currentWorker, {
-        ...serializedUserOptions,
-        // we make the worker stream aware of the route, pagePath, propsPath
-        route,
-        pagePath: page,
-        propsPath: props,
-        // override these at all times to ensure the settings will work for the dev server
-        projectRoot: server.config.root,
-        build: serializedUserOptions.build,
-        manifest: autoDiscoveredFiles.staticManifest,
-        cssFiles: new Map(),
-        globalCss: new Map(),
-      });
+      const startTime = performance.now();
+      const stream = handleWorkerRscStream(
+        currentWorker,
+        {
+          ...serializedUserOptions,
+          // we make the worker stream aware of the route, pagePath, propsPath
+          route,
+          pagePath: page,
+          propsPath: props,
+          // override these at all times to ensure the settings will work for the dev server
+          projectRoot: server.config.root,
+          build: serializedUserOptions.build,
+          manifest: autoDiscoveredFiles.staticManifest,
+          cssFiles: new Map(),
+          globalCss: new Map(),
+        },
+        server.config.logger,
+        typeof onMetrics === "function"
+          ? (metrics) => {
+              const elapsedTime = performance.now() - startTime;
+              const formattedMetrics = {
+                route,
+                htmlSize: 0,
+                rscSize: metrics.bytes,
+                processingTime: elapsedTime,
+                chunks: metrics.chunks,
+                chunkRate: metrics.chunks / (elapsedTime / 1000),
+                memoryUsage: process.memoryUsage(),
+                streamMetrics: {
+                  ...metrics,
+                  duration: elapsedTime
+                },
+                htmlSizes: new Map(),
+                rscSizes: new Map([[route, metrics.bytes]]),
+              } satisfies RenderMetrics;
+              onMetrics(formattedMetrics);
+            }
+          : undefined
+      );
       const writeStream = new WritableStream({
         write(chunk) {
           res.write(chunk);
@@ -276,14 +225,16 @@ export async function configureWorkerRequestHandler({
           );
           res.end();
         },
-      })
-      let timeout = setTimeout(() => {
-        server.config.logger.error("[react-client] RSC render timeout");
-        res.end();
-      }, 5000);
+      });
+      let timeout: NodeJS.Timeout;
 
       // Pipe the stream to the response
       stream.pipeTo(writeStream);
+      // wait for timeout
+      timeout = setTimeout(() => {
+        server.config.logger.error("RSC render timeout");
+        res.end();
+      }, 5000);
     } catch (error) {
       if (error instanceof Error) {
         server.config.logger.error(error.message, {

package/plugin/react-server/server.ts

@@ -36,7 +36,7 @@ export async function configureReactServer({
         ? `${server.config.server.https ? "https" : "http"}://${
             server.config.server.host
           }:${server.config.server.port}`
-        : "",
+        : _moduleBaseURL,
     moduleBasePath:
       server.config.base === "/"
         ? ""
@@ -47,7 +47,7 @@ export async function configureReactServer({
   });
   // Handle Vite server restarts
   server.ws.on("restart", (path) => {
-    console.log(
+    server.config.logger.info(
       "[vite-plugin-react-server] 🔧 Plugin changed, preparing for restart:",
       path
     );
@@ -58,7 +58,7 @@ export async function configureReactServer({
         "Content-Type": "text/x-component",
         "Retry-After": "1",
       });
-      res.end('{"error":"Server restarting..."}');
+      res.end(`0:E{"digest":"","name":"Error","message":"Server restarting...","stack":"","env":"Server"}`);
     }
     activeStreams.clear();
   });
@@ -67,14 +67,11 @@ export async function configureReactServer({
     try {
       if (req.headers.accept !== "text/x-component") return next();
       let route = req.url?.replace("/" + handlerOptions.build.rscOutputPath, "");
-      if(!route?.startsWith(handlerOptions.moduleBasePath)) {
+      if(handlerOptions.moduleBasePath !== '' && !route?.startsWith(handlerOptions.moduleBasePath)) {
         next();
-      } else {
+      } else if(route && handlerOptions.moduleBasePath.length) {
         route  = route.slice(handlerOptions.moduleBasePath.length);
       }
-      if(typeof route !== "string" ) {
-        throw new Error("req.url is not a string");
-      }
       if (!route || route === "") {
         route = "/";
       }
@@ -88,27 +85,7 @@ export async function configureReactServer({
       const pagePath = routeFiles.page;
       const propsPath = routeFiles.props;
 
-      // Create a unified event handler
-      await server.warmupRequest(pagePath);
-      const eventHandler = createEventHandler(onEvent);
-      const cssFilesResult = await collectViteModuleGraphCss({
-        moduleGraph: server.moduleGraph,
-        pagePath,
-        loader: (i) => server.ssrLoadModule(i, { fixStacktrace: true }),
-        // explicitly set for development server
-        moduleBaseURL: handlerOptions.moduleBaseURL,
-        moduleBasePath: handlerOptions.moduleBasePath,
-        moduleRootPath: handlerOptions.moduleRootPath,
-        projectRoot: handlerOptions.projectRoot,
-        css: handlerOptions.css,
-        parentUrl: pagePath,
-      });
-      if (cssFilesResult.type === "skip") {
-        return next();
-      }
-      if (cssFilesResult.type === "error") {
-        throw cssFilesResult.error;
-      }
+      // first load the page and props
       const pageAndPropsResult = await resolvePageAndProps({
         pagePath,
         propsPath,
@@ -123,6 +100,24 @@ export async function configureReactServer({
       if (pageAndPropsResult.type === "skip") {
         return next();
       }
+
+      const eventHandler = createEventHandler(onEvent);
+      const cssFilesResult = await collectViteModuleGraphCss({
+        moduleGraph: server.moduleGraph, // by having loaded the page and props, we can get them from the module graph
+        parentUrl: pagePath,
+        handlerOptions: {
+          pagePath,
+          loader: server.ssrLoadModule,
+          // explicitly set for development server
+          ...handlerOptions,
+        },
+      });
+      if (cssFilesResult.type === "skip") {
+        return next();
+      }
+      if (cssFilesResult.type === "error") {
+        throw cssFilesResult.error;
+      }
       const { PageComponent, pageProps } = pageAndPropsResult;
       // Create the headless RSC stream directly;
       const rscResult = await createHandler({

package/plugin/react-static/collectHtmlWorkerContent.ts

@@ -47,7 +47,7 @@ export async function collectHtmlWorkerContent(
       callback(null, chunk);
     },
     flush(callback) {
-      metrics.duration = Date.now() - startTime;
+      metrics.duration = performance.now() - startTime;
       callback();
     },
   });

package/plugin/react-static/collectRscContent.ts

@@ -28,7 +28,7 @@ export async function collectRscContent(
   handlerOptions: CreateHandlerOptions
 ): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
   const metrics = createStreamMetrics();
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   const outputPath = join(
     handlerOptions.build.outDir,
@@ -49,7 +49,7 @@ export async function collectRscContent(
       callback(null, chunk);
     },
     flush(callback) {
-      metrics.duration = Date.now() - startTime;
+      metrics.duration = performance.now() - startTime;
       callback();
     }
   });