fix: remake server ssr logger msg (#4922)

web-infra-dev · Nov 7, 2023 · 96ede9e · 96ede9e
1 parent 2803118
commit 96ede9e
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 56 deletions.
diff --git a/.changeset/dirty-ligers-roll.md b/.changeset/dirty-ligers-roll.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/runtime': patch
+---
+
+fix: remake server ssr logger msg
+fix: 重写 ssr server 日志信息
diff --git a/packages/runtime/plugin-runtime/src/ssr/prefetch.tsx b/packages/runtime/plugin-runtime/src/ssr/prefetch.tsx
@@ -1,31 +1,48 @@
 import { renderToStaticMarkup } from 'react-dom/server';
 import { run } from '@modern-js/runtime-utils/node';
 import { ChunkExtractor } from '@loadable/server';
+import { time } from '@modern-js/runtime-utils/time';
 import { RuntimeContext } from '../core';
+import { LoaderResult } from '../core/loader/loaderManager';
 import { SSRPluginConfig } from './serverRender/types';
+import { SSRTracker, SSRTimings, SSRErrors } from './serverRender/tracker';
 
 // todo: SSRContext
 const prefetch = async (
   App: React.ComponentType<any>,
   context: RuntimeContext,
   config: SSRPluginConfig,
+  tracker: SSRTracker,
 ) =>
   run(context.ssrContext!.request.headers, async () => {
     const { ssrContext } = context;
     const { loadableStats } = ssrContext!;
 
     if (!config.disablePrerender) {
-      // disable renderToStaticMarkup when user configures disablePrerender
-      if (loadableStats) {
-        const extractor = new ChunkExtractor({
-          stats: loadableStats,
-          entrypoints: [ssrContext!.entryName].filter(Boolean),
-        });
-        renderToStaticMarkup(
-          extractor.collectChunks(<App context={context} />),
-        );
-      } else {
-        renderToStaticMarkup(<App context={context} />);
+      try {
+        const end = time();
+        // disable renderToStaticMarkup when user configures disablePrerender
+        if (loadableStats) {
+          const extractor = new ChunkExtractor({
+            stats: loadableStats,
+            entrypoints: [ssrContext!.entryName].filter(Boolean),
+          });
+          renderToStaticMarkup(
+            extractor.collectChunks(<App context={context} />),
+          );
+        } else {
+          renderToStaticMarkup(<App context={context} />);
+        }
+
+        const cost = end();
+
+        tracker.trackTiming(SSRTimings.PRERENDER, cost);
+      } catch (e) {
+        const error = e as Error;
+        tracker.trackError(SSRErrors.PRERENDER, error);
+
+        // re-throw the error
+        throw e;
       }
     }
 
@@ -36,7 +53,23 @@ const prefetch = async (
       };
     }
 
-    const loadersData = await context.loaderManager.awaitPendingLoaders();
+    let loadersData: Record<string, LoaderResult> = {};
+    try {
+      const end = time();
+
+      loadersData = await context.loaderManager.awaitPendingLoaders();
+
+      const cost = end();
+
+      tracker.trackTiming(SSRTimings.USE_LOADER, cost);
+    } catch (e) {
+      const error = e as Error;
+      tracker.trackError(SSRErrors.USE_LOADER, error);
+
+      // re-throw the error
+      throw e;
+    }
+
     Object.keys(loadersData).forEach(id => {
       const data = loadersData[id];
       if (data._error) {

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToStream/index.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToStream/index.ts
@@ -33,12 +33,12 @@ export const render = ({ App, context }: ServerRenderOptions) => {
         }
 
         const cost = end();
-        tracker.trackTiming(SSRTimings.SSR_RENDER_SHELL, cost);
+        tracker.trackTiming(SSRTimings.RENDER_SHELL, cost);
       },
       onAllReady() {
         // calculate streaming ssr cost
         const cost = end();
-        tracker.trackTiming(SSRTimings.SSR_RENDER_TOTAL, cost);
+        tracker.trackTiming(SSRTimings.RENDER_HTML, cost);
       },
       onShellError(e) {
         // Don't log error in `onShellError` callback, since it has been logged in `onError` callback

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/entry.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/entry.ts
@@ -162,17 +162,17 @@ export default class Entry {
 
   private async prefetch(context: RuntimeContext) {
     let prefetchData;
-    const end = time();
 
     try {
-      prefetchData = await prefetch(this.App, context, this.pluginConfig);
+      prefetchData = await prefetch(
+        this.App,
+        context,
+        this.pluginConfig,
+        this.tracker,
+      );
       this.result.renderLevel = RenderLevel.SERVER_PREFETCH;
-      const prefetchCost = end();
-
-      this.tracker.trackTiming(SSRTimings.SSR_PREFETCH, prefetchCost);
     } catch (e) {
       this.result.renderLevel = RenderLevel.CLIENT_RENDER;
-      this.tracker.trackError(SSRErrors.PREFETCH, e as Error);
     }
 
     return prefetchData || {};
@@ -204,7 +204,7 @@ export default class Entry {
         .finish();
 
       const cost = end();
-      this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
+      this.tracker.trackTiming(SSRTimings.RENDER_HTML, cost);
       this.result.renderLevel = RenderLevel.SERVER_RENDER;
     } catch (e) {
       this.tracker.trackError(SSRErrors.RENDER_HTML, e as Error);

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/index.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/index.ts
@@ -1,8 +1,6 @@
 import { run } from '@modern-js/runtime-utils/node';
-import { time } from '@modern-js/runtime-utils/time';
 import { ServerRenderOptions } from '../types';
 import { PreRender } from '../../react/prerender';
-import { SSRTimings } from '../tracker';
 import SSREntry from './entry';
 
 export const render = ({
@@ -20,11 +18,7 @@ export const render = ({
     });
     entry.metrics.emitCounter('app.visit.count', 1);
 
-    const end = time();
     const html = await entry.renderToHtml(context);
-    const cost = end();
-
-    entry.tracker.trackTiming(SSRTimings.SSR_RENDER_TOTAL, cost);
 
     const cacheConfig = PreRender.config();
     if (cacheConfig) {

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/tracker.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/tracker.ts
@@ -3,14 +3,15 @@ import type { BaseSSRServerContext } from '@modern-js/types';
 export type SSRTracker = ReturnType<typeof createSSRTracker>;
 
 export enum SSRTimings {
-  SSR_RENDER_TOTAL,
-  SSR_PREFETCH,
-  SSR_RENDER_HTML,
-  SSR_RENDER_SHELL,
+  PRERENDER,
+  RENDER_HTML,
+  RENDER_SHELL,
+  USE_LOADER,
 }
 
 export enum SSRErrors {
-  PREFETCH,
+  PRERENDER,
+  USE_LOADER,
   RENDER_HTML,
   RENDER_STREAM,
   RENDER_SHELL,
@@ -24,10 +25,15 @@ const errors: Record<
     logger?: string;
   }
 > = {
-  [SSRErrors.PREFETCH]: {
-    reporter: 'SSR Error - App Prefetch Render',
-    logger: 'App Prefetch Render',
-    metrics: 'app.prefetch.render.error',
+  [SSRErrors.PRERENDER]: {
+    reporter: 'SSR Error - App Prerender',
+    logger: 'App Prerender',
+    metrics: 'app.prerender.error',
+  },
+  [SSRErrors.USE_LOADER]: {
+    reporter: 'SSR Error - App run useLoader',
+    logger: 'App run useLoader',
+    metrics: 'app.useloader.error',
   },
   [SSRErrors.RENDER_HTML]: {
     reporter: 'SSR Error - App Render To HTML',
@@ -53,27 +59,26 @@ const timings: Record<
     logger?: string;
   }
 > = {
-  [SSRTimings.SSR_PREFETCH]: {
-    reporter: 'ssr-prefetch',
-    serverTiming: 'ssr-prefetch',
-    metrics: 'app.prefeth.cost',
-    logger: 'App Prefetch cost = %d ms',
+  [SSRTimings.PRERENDER]: {
+    reporter: 'ssr-prerender',
+    serverTiming: 'ssr-prerender',
+    metrics: 'app.prerender.cost',
+    logger: 'App Prerender cost = %d ms',
   },
-  [SSRTimings.SSR_RENDER_HTML]: {
+  [SSRTimings.RENDER_HTML]: {
     reporter: 'ssr-render-html',
     serverTiming: 'ssr-render-html',
     metrics: 'app.render.html.cost',
     logger: 'App Render To HTML cost = %d ms',
   },
-  [SSRTimings.SSR_RENDER_TOTAL]: {
-    reporter: 'ssr-render-total',
-    serverTiming: 'ssr-render-total',
-    metrics: 'app.render.cost',
-    logger: 'App Render Total cost = %d ms',
-  },
-  [SSRTimings.SSR_RENDER_SHELL]: {
+  [SSRTimings.RENDER_SHELL]: {
     reporter: 'ssr-render-shell',
   },
+  [SSRTimings.USE_LOADER]: {
+    reporter: 'use-loader',
+    serverTiming: 'use-loader',
+    logger: 'App run useLoader cost = %d ms',
+  },
 };
 
 export function createSSRTracker({

diff --git a/packages/runtime/plugin-runtime/tests/ssr/serverRender/tracker.test.ts b/packages/runtime/plugin-runtime/tests/ssr/serverRender/tracker.test.ts
@@ -60,18 +60,16 @@ describe('tracker', () => {
 
   it('track ssr error', () => {
     const error = new Error('mock error');
-    tracker.trackError(SSRErrors.PREFETCH, error);
+    tracker.trackError(SSRErrors.PRERENDER, error);
 
-    expect(reporter.errors).toEqual([
-      ['SSR Error - App Prefetch Render', error],
-    ]);
-    expect(logger.errors).toEqual([['App Prefetch Render', error]]);
-    expect(metrics.errors.get('app.prefetch.render.error')).toEqual(1);
+    expect(reporter.errors).toEqual([['SSR Error - App Prerender', error]]);
+    expect(logger.errors).toEqual([['App Prerender', error]]);
+    expect(metrics.errors.get('app.prerender.error')).toEqual(1);
   });
 
   it('track ssr timing', () => {
     const cost = 13;
-    tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
+    tracker.trackTiming(SSRTimings.RENDER_HTML, cost);
 
     expect(serverTiming.serverTimings).toEqual([['ssr-render-html', cost]]);
     expect(logger.timings).toEqual([['App Render To HTML cost = %d ms', cost]]);