@modern-js/runtime 2.28.0 → 2.30.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @modern-js/runtime
 
+## 2.30.0
+
+### Minor Changes
+
+- 855a61e: feat(plugin-runtime): add ssr tracker
+  feat(plugin-runtime): 新增 ssr tracker
+
+### Patch Changes
+
+- a8a4fd3: fix: ssr plugin use wrong config params
+  fix: ssr 插件使用了错误的 config 参数
+- 276ace3: chore: remove noscript tag in html template
+  chore: 移除 HTML 模板中的 noscript 标签
+- c731bf3: fix(plugin-runtime): the output maybe undefined;
+  fix(plugin-runtime): output 可能是个 undefined
+- 8219d55: fix(plugin-runtime): ssg need use String SSR, so we should inject loadable-component babel plugin when enable ssg
+  fix(plugin-runtime): ssg 需要使用 String SSR, 我们需要在开启 SSG 得时候注入 loadbale-compnent babel 插件
+- Updated dependencies [a5ee81a]
+- Updated dependencies [b6ab299]
+  - @modern-js/types@2.30.0
+  - @modern-js/utils@2.30.0
+  - @modern-js/plugin@2.30.0
+
+## 2.29.0
+
+### Minor Changes
+
+- cba7675: feat: add a server reporter that report server cost, logger about error, info etc.
+  feat: 添加一个 server 端 reporter，来报告 server 端耗时，报错等
+
+### Patch Changes
+
+- 600bb0a: fix: fix remixRouter not existed in conventional routes
+  fix: 修复 remixRouter 在约定式路由下不存在问题
+- fd3e71c: fix: if a route dont has component, should be as a no-layout route
+  fix: 如果路由对象没有组件属性，应该被看做无布局路由
+- 9a81e31: fix(plugin-runtime): ssr reporter some problems
+  fix(plugin-runtime): ssr reporter 小问题
+- Updated dependencies [e6b5355]
+- Updated dependencies [93db783]
+- Updated dependencies [cba7675]
+- Updated dependencies [99052ea]
+- Updated dependencies [1d71d2e]
+  - @modern-js/utils@2.29.0
+  - @modern-js/types@2.29.0
+  - @modern-js/plugin@2.29.0
+
 ## 2.28.0
 
 ### Patch Changes

package/dist/cjs/document/cli/index.js

@@ -175,6 +175,7 @@ const documentPlugin = () => ({
               );
               const documentHtmlOptions = templateContent ? {
                 templateContent,
+                // Note: the behavior of inject/modify tags in afterTemplateExecution hook will not take effect
                 inject: false
               } : {};
               return {

package/dist/cjs/document/constants.js

@@ -40,9 +40,6 @@ _export(exports, {
   DOCUMENT_LINKS_PLACEHOLDER: function() {
     return DOCUMENT_LINKS_PLACEHOLDER;
   },
-  DOCUMENT_NO_SCRIPTE_PLACEHOLDER: function() {
-    return DOCUMENT_NO_SCRIPTE_PLACEHOLDER;
-  },
   DOCUMENT_SCRIPT_PLACEHOLDER_START: function() {
     return DOCUMENT_SCRIPT_PLACEHOLDER_START;
   },
@@ -81,7 +78,6 @@ const DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDATASCRIPT
 const DOCUMENT_FILE_NAME = "Document";
 const DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent("<!-- chunk scripts placeholder -->");
 const DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links placeholder -->");
-const DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
 const DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
@@ -89,7 +85,6 @@ const DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end -->");
 const DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 const DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 const PLACEHOLDER_REPLACER_MAP = {
-  [DOCUMENT_NO_SCRIPTE_PLACEHOLDER]: `We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.`,
   [DOCUMENT_SSR_PLACEHOLDER]: HTML_SEPARATOR,
   [DOCUMENT_CHUNKSMAP_PLACEHOLDER]: _constants.HTML_CHUNKSMAP_SEPARATOR,
   [DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]: HTML_SSRDATASCRIPT_SEPARATOR

package/dist/cjs/router/runtime/plugin.js

@@ -148,6 +148,12 @@ const routerPlugin = ({ serverBase = [], supportHtml5History = true, basename =
         },
         pickContext: ({ context, pickedContext }, next) => {
           const { remixRouter } = context;
+          if (!remixRouter) {
+            return next({
+              context,
+              pickedContext
+            });
+          }
           const router = {
             navigate: remixRouter.navigate,
             get location() {

package/dist/cjs/ssr/cli/index.js

@@ -24,8 +24,8 @@ const PLUGIN_IDENTIFIER = "ssr";
 const hasStringSSREntry = (userConfig) => {
   var _server, _server1;
   const isStreaming = (ssr) => ssr && typeof ssr === "object" && ssr.mode === "stream";
-  const { server } = userConfig;
-  if (((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) && !isStreaming(server.ssr)) {
+  const { server, output } = userConfig;
+  if ((((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) || output.ssg) && !isStreaming(server.ssr)) {
     return true;
   }
   if (((_server1 = server) === null || _server1 === void 0 ? void 0 : _server1.ssrByEntries) && typeof server.ssrByEntries === "object") {
@@ -37,6 +37,11 @@ const hasStringSSREntry = (userConfig) => {
   }
   return false;
 };
+const checkUseStringSSR = (config) => {
+  var _output;
+  const { output } = config;
+  return Boolean((_output = output) === null || _output === void 0 ? void 0 : _output.ssg) || hasStringSSREntry(config);
+};
 const ssrPlugin = () => ({
   name: "@modern-js/plugin-ssr",
   required: [
@@ -49,29 +54,30 @@ const ssrPlugin = () => ({
       config() {
         const appContext = api.useAppContext();
         pluginsExportsUtils = (0, _utils.createRuntimeExportsUtils)(appContext.internalDirectory, "plugins");
-        const userConfig = api.useConfigContext();
         const { bundlerType = "webpack" } = api.useAppContext();
-        const babelConfig = (() => {
+        const babelHandler = (() => {
           if (bundlerType === "webpack") {
             return (config) => {
               var _config_plugins;
+              const userConfig = api.useResolvedConfigContext();
               (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(_path.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
-              if ((0, _utils.isUseSSRBundle)(userConfig) && hasStringSSREntry(userConfig)) {
+              if ((0, _utils.isUseSSRBundle)(userConfig) && checkUseStringSSR(userConfig)) {
                 var _config_plugins1;
                 (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
               }
             };
           } else if (bundlerType === "rspack") {
-            if ((0, _utils.isUseSSRBundle)(userConfig)) {
-              return (config) => {
+            return (config) => {
+              const userConfig = api.useResolvedConfigContext();
+              if ((0, _utils.isUseSSRBundle)(userConfig)) {
                 var _config_plugins;
                 (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(_path.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
-                if (hasStringSSREntry(userConfig)) {
+                if (checkUseStringSSR(userConfig)) {
                   var _config_plugins1;
                   (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
                 }
-              };
-            }
+              }
+            };
           }
         })();
         return {
@@ -87,8 +93,8 @@ const ssrPlugin = () => ({
           },
           tools: {
             bundlerChain(chain, { isServer, isServiceWorker, CHAIN_ID }) {
-              const userConfig2 = api.useResolvedConfigContext();
-              if ((0, _utils.isUseSSRBundle)(userConfig2) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig2)) {
+              const userConfig = api.useResolvedConfigContext();
+              if ((0, _utils.isUseSSRBundle)(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
                 const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
                 chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
                   {
@@ -97,7 +103,7 @@ const ssrPlugin = () => ({
                 ]);
               }
             },
-            babel: babelConfig
+            babel: babelHandler
           }
         };
       },

package/dist/cjs/ssr/serverRender/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ServerTimingNames", {
+  enumerable: true,
+  get: function() {
+    return ServerTimingNames;
+  }
+});
+var ServerTimingNames;
+(function(ServerTimingNames2) {
+  ServerTimingNames2["SSR_RENDER_TOTAL"] = "ssr-render-total";
+  ServerTimingNames2["SSR_PREFETCH"] = "ssr-prefetch";
+  ServerTimingNames2["SSR_RENDER_HTML"] = "ssr-render-html";
+})(ServerTimingNames || (ServerTimingNames = {}));

package/dist/cjs/ssr/serverRender/renderToStream/index.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, "render", {
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _react = require("react");
 const _runtimenode = require("@modern-js/utils/runtime-node");
+const _time = require("@modern-js/utils/universal/time");
 const _prerender = require("../../react/prerender");
-const _time = require("../time");
 const _renderToPipe = /* @__PURE__ */ _interop_require_default._(require("./renderToPipe"));
 const render = ({ App, context }) => {
   const { ssrContext } = context;

package/dist/cjs/ssr/serverRender/renderToString/entry.js

@@ -15,17 +15,18 @@ const _react = /* @__PURE__ */ _interop_require_default._(require("react"));
 const _server = /* @__PURE__ */ _interop_require_default._(require("react-dom/server"));
 const _runtimenode = require("@modern-js/utils/runtime-node");
 const _reacthelmet = /* @__PURE__ */ _interop_require_default._(require("react-helmet"));
+const _time = require("@modern-js/utils/universal/time");
 const _utils = require("../../../router/runtime/utils");
 const _helmet = /* @__PURE__ */ _interop_require_default._(require("../helmet"));
 const _types = require("../types");
-const _time = require("../time");
 const _prefetch = /* @__PURE__ */ _interop_require_default._(require("../../prefetch"));
 const _utils1 = require("../utils");
+const _tracker = require("../tracker");
 const _template = require("./template");
 const _reduce = require("./reduce");
 const _loadable = /* @__PURE__ */ _interop_require_wildcard._(require("./loadable"));
 const _styledComponent = /* @__PURE__ */ _interop_require_wildcard._(require("./styledComponent"));
-const buildTemplateData = (context, data, renderLevel) => {
+const buildTemplateData = (context, data, renderLevel, tracker) => {
   const { request, enableUnsafeCtx } = context;
   const unsafeContext = {
     headers: request.headers
@@ -40,6 +41,9 @@ const buildTemplateData = (context, data, renderLevel) => {
         host: request.host,
         url: request.url,
         ...enableUnsafeCtx ? unsafeContext : {}
+      },
+      reporter: {
+        sessionId: tracker.sessionId
       }
     },
     renderLevel
@@ -68,7 +72,7 @@ class Entry {
       errors: (0, _utils.serializeErrors)(routerContext.errors)
     } : void 0;
     let html = "";
-    const templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel);
+    const templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel, this.tracker);
     const SSRData = this.getSSRDataScript(templateData, routerData);
     for (const fragment of this.fragments) {
       if (fragment.isVariable && fragment.content === "SSRDataScript") {
@@ -87,12 +91,10 @@ class Entry {
       prefetchData = await (0, _prefetch.default)(this.App, context);
       this.result.renderLevel = _types.RenderLevel.SERVER_PREFETCH;
       const prefetchCost = end();
-      this.logger.debug(`App Prefetch cost = %d ms`, prefetchCost);
-      this.metrics.emitTimer("app.prefetch.cost", prefetchCost);
+      this.tracker.trackTiming(_tracker.SSRTimings.SSR_PREFETCH, prefetchCost);
     } catch (e) {
       this.result.renderLevel = _types.RenderLevel.CLIENT_RENDER;
-      this.logger.error("App Prefetch Render", e);
-      this.metrics.emitCounter("app.prefetch.render.error", 1);
+      this.tracker.trackError(_tracker.SSRErrors.PREFETCH, e);
     }
     return prefetchData || {};
   }
@@ -121,12 +123,10 @@ class Entry {
         (jsx) => _server.default.renderToString(jsx)
       ]);
       const cost = end();
-      this.logger.debug("App Render To HTML cost = %d ms", cost);
-      this.metrics.emitTimer("app.render.html.cost", cost);
+      this.tracker.trackTiming(_tracker.SSRTimings.SSR_RENDER_HTML, cost);
       this.result.renderLevel = _types.RenderLevel.SERVER_RENDER;
     } catch (e) {
-      this.logger.error("App Render To HTML", e);
-      this.metrics.emitCounter("app.render.html.error", 1);
+      this.tracker.trackError(_tracker.SSRErrors.RENDER_HTML, e);
     }
     return html;
   }
@@ -151,7 +151,7 @@ class Entry {
     _define_property._(this, "entryName", void 0);
     _define_property._(this, "result", void 0);
     _define_property._(this, "metrics", void 0);
-    _define_property._(this, "logger", void 0);
+    _define_property._(this, "tracker", void 0);
     _define_property._(this, "template", void 0);
     _define_property._(this, "App", void 0);
     _define_property._(this, "fragments", void 0);
@@ -166,8 +166,8 @@ class Entry {
     this.host = host;
     this.App = options.App;
     this.pluginConfig = config;
+    this.tracker = (0, _tracker.createSSRTracker)(ctx);
     this.metrics = ctx.metrics;
-    this.logger = ctx.logger;
     this.nonce = nonce;
     this.result = {
       renderLevel: _types.RenderLevel.CLIENT_RENDER,

package/dist/cjs/ssr/serverRender/renderToString/index.js

@@ -10,8 +10,9 @@ Object.defineProperty(exports, "render", {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _runtimenode = require("@modern-js/utils/runtime-node");
+const _time = require("@modern-js/utils/universal/time");
 const _prerender = require("../../react/prerender");
-const _time = require("../time");
+const _tracker = require("../tracker");
 const _entry = /* @__PURE__ */ _interop_require_default._(require("./entry"));
 const render = ({ App, context, config }) => {
   const ssrContext = context.ssrContext;
@@ -25,8 +26,7 @@ const render = ({ App, context, config }) => {
     const end = (0, _time.time)();
     const html = await entry.renderToHtml(context);
     const cost = end();
-    entry.logger.info("App Render Total cost = %d ms", cost);
-    entry.metrics.emitTimer("app.render.cost", cost);
+    entry.tracker.trackTiming(_tracker.SSRTimings.SSR_RENDER_TOTAL, cost);
     const cacheConfig = _prerender.PreRender.config();
     if (cacheConfig) {
       context.ssrContext.cacheConfig = cacheConfig;

package/dist/cjs/ssr/serverRender/tracker.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  SSRTimings: function() {
+    return SSRTimings;
+  },
+  SSRErrors: function() {
+    return SSRErrors;
+  },
+  createSSRTracker: function() {
+    return createSSRTracker;
+  }
+});
+var SSRTimings;
+(function(SSRTimings2) {
+  SSRTimings2[SSRTimings2["SSR_RENDER_TOTAL"] = 0] = "SSR_RENDER_TOTAL";
+  SSRTimings2[SSRTimings2["SSR_PREFETCH"] = 1] = "SSR_PREFETCH";
+  SSRTimings2[SSRTimings2["SSR_RENDER_HTML"] = 2] = "SSR_RENDER_HTML";
+})(SSRTimings || (SSRTimings = {}));
+var SSRErrors;
+(function(SSRErrors2) {
+  SSRErrors2[SSRErrors2["PREFETCH"] = 0] = "PREFETCH";
+  SSRErrors2[SSRErrors2["RENDER_HTML"] = 1] = "RENDER_HTML";
+})(SSRErrors || (SSRErrors = {}));
+const errors = {
+  [SSRErrors.PREFETCH]: {
+    reporter: "SSR Error - App Prefetch Render",
+    logger: "App Prefetch Render",
+    metrics: "app.prefetch.render.error"
+  },
+  [SSRErrors.RENDER_HTML]: {
+    reporter: "SSR Error - App Render To HTML",
+    logger: "App Render To HTML",
+    metrics: "app.render.html.error"
+  }
+};
+const timings = {
+  [SSRTimings.SSR_PREFETCH]: {
+    reporter: "ssr-prefetch",
+    serverTiming: "ssr-prefetch",
+    metrics: "app.prefeth.cost",
+    logger: "App Prefetch cost = %d ms"
+  },
+  [SSRTimings.SSR_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"
+  }
+};
+function createSSRTracker({ reporter, serverTiming, metrics, logger }) {
+  const tracker = {
+    get sessionId() {
+      return reporter.sessionId;
+    },
+    trackError(key, e) {
+      const { reporter: reporterContent, metrics: metricsContent, logger: loggerContent } = errors[key];
+      reporterContent && reporter.reportError(reporterContent, e);
+      metricsContent && metrics.emitCounter(metricsContent, 1);
+      loggerContent && logger.error(loggerContent, e);
+    },
+    trackTiming(key, cost) {
+      const { reporter: reporterName, serverTiming: serverTimingName, logger: loggerName, metrics: metricsName } = timings[key];
+      reporterName && reporter.reportTiming(reporterName, cost);
+      serverTimingName && serverTiming.addServeTiming(serverTimingName, cost);
+      metricsName && metrics.emitTimer(metricsName, cost);
+      loggerName && logger.debug(loggerName, cost);
+    }
+  };
+  return tracker;
+}

package/dist/esm/document/cli/index.js

@@ -219,6 +219,7 @@ export var documentPlugin = function() {
                       );
                       var documentHtmlOptions = templateContent ? {
                         templateContent: templateContent,
+                        // Note: the behavior of inject/modify tags in afterTemplateExecution hook will not take effect
                         inject: false
                       } : {};
                       return _object_spread({}, options, documentHtmlOptions);

package/dist/esm/document/constants.js

@@ -15,7 +15,6 @@ export var DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDATAS
 export var DOCUMENT_FILE_NAME = "Document";
 export var DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent("<!-- chunk scripts placeholder -->");
 export var DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links placeholder -->");
-export var DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 export var DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 export var DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
 export var DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
@@ -23,4 +22,4 @@ export var DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end -
 export var DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 export var DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 var _obj;
-export var PLACEHOLDER_REPLACER_MAP = (_obj = {}, _define_property(_obj, DOCUMENT_NO_SCRIPTE_PLACEHOLDER, "We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue."), _define_property(_obj, DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR), _define_property(_obj, DOCUMENT_CHUNKSMAP_PLACEHOLDER, HTML_CHUNKSMAP_SEPARATOR), _define_property(_obj, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SSRDATASCRIPT_SEPARATOR), _obj);
+export var PLACEHOLDER_REPLACER_MAP = (_obj = {}, _define_property(_obj, DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR), _define_property(_obj, DOCUMENT_CHUNKSMAP_PLACEHOLDER, HTML_CHUNKSMAP_SEPARATOR), _define_property(_obj, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SSRDATASCRIPT_SEPARATOR), _obj);

package/dist/esm/router/runtime/plugin.js

@@ -133,6 +133,12 @@ export var routerPlugin = function(param) {
         pickContext: function(param2, next) {
           var context = param2.context, pickedContext = param2.pickedContext;
           var remixRouter = context.remixRouter;
+          if (!remixRouter) {
+            return next({
+              context: context,
+              pickedContext: pickedContext
+            });
+          }
           var router = {
             navigate: remixRouter.navigate,
             get location() {

package/dist/esm/ssr/cli/index.js

@@ -8,8 +8,8 @@ var hasStringSSREntry = function(userConfig) {
   var isStreaming = function(ssr) {
     return ssr && typeof ssr === "object" && ssr.mode === "stream";
   };
-  var server = userConfig.server;
-  if (((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) && !isStreaming(server.ssr)) {
+  var server = userConfig.server, output = userConfig.output;
+  if ((((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) || output.ssg) && !isStreaming(server.ssr)) {
     return true;
   }
   if (((_server1 = server) === null || _server1 === void 0 ? void 0 : _server1.ssrByEntries) && typeof server.ssrByEntries === "object") {
@@ -38,6 +38,11 @@ var hasStringSSREntry = function(userConfig) {
   }
   return false;
 };
+var checkUseStringSSR = function(config) {
+  var _output;
+  var output = config.output;
+  return Boolean((_output = output) === null || _output === void 0 ? void 0 : _output.ssg) || hasStringSSREntry(config);
+};
 export var ssrPlugin = function() {
   return {
     name: "@modern-js/plugin-ssr",
@@ -51,29 +56,30 @@ export var ssrPlugin = function() {
         config: function config() {
           var appContext = api.useAppContext();
           pluginsExportsUtils = createRuntimeExportsUtils(appContext.internalDirectory, "plugins");
-          var userConfig = api.useConfigContext();
           var _api_useAppContext = api.useAppContext(), _api_useAppContext_bundlerType = _api_useAppContext.bundlerType, bundlerType = _api_useAppContext_bundlerType === void 0 ? "webpack" : _api_useAppContext_bundlerType;
-          var babelConfig = function() {
+          var babelHandler = function() {
             if (bundlerType === "webpack") {
               return function(config2) {
                 var _config_plugins;
+                var userConfig = api.useResolvedConfigContext();
                 (_config_plugins = config2.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(path.join(__dirname, "./babel-plugin-ssr-loader-id"));
-                if (isUseSSRBundle(userConfig) && hasStringSSREntry(userConfig)) {
+                if (isUseSSRBundle(userConfig) && checkUseStringSSR(userConfig)) {
                   var _config_plugins1;
                   (_config_plugins1 = config2.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
                 }
               };
             } else if (bundlerType === "rspack") {
-              if (isUseSSRBundle(userConfig)) {
-                return function(config2) {
+              return function(config2) {
+                var userConfig = api.useResolvedConfigContext();
+                if (isUseSSRBundle(userConfig)) {
                   var _config_plugins;
                   (_config_plugins = config2.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(path.join(__dirname, "./babel-plugin-ssr-loader-id"));
-                  if (hasStringSSREntry(userConfig)) {
+                  if (checkUseStringSSR(userConfig)) {
                     var _config_plugins1;
                     (_config_plugins1 = config2.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
                   }
-                };
-              }
+                }
+              };
             }
           }();
           return {
@@ -91,8 +97,8 @@ export var ssrPlugin = function() {
             tools: {
               bundlerChain: function bundlerChain(chain, param) {
                 var isServer = param.isServer, isServiceWorker = param.isServiceWorker, CHAIN_ID = param.CHAIN_ID;
-                var userConfig2 = api.useResolvedConfigContext();
-                if (isUseSSRBundle(userConfig2) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig2)) {
+                var userConfig = api.useResolvedConfigContext();
+                if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
                   var LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
                   chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
                     {
@@ -101,7 +107,7 @@ export var ssrPlugin = function() {
                   ]);
                 }
               },
-              babel: babelConfig
+              babel: babelHandler
             }
           };
         },

package/dist/esm/ssr/serverRender/constants.js

@@ -0,0 +1,6 @@
+export var ServerTimingNames;
+(function(ServerTimingNames2) {
+  ServerTimingNames2["SSR_RENDER_TOTAL"] = "ssr-render-total";
+  ServerTimingNames2["SSR_PREFETCH"] = "ssr-prefetch";
+  ServerTimingNames2["SSR_RENDER_HTML"] = "ssr-render-html";
+})(ServerTimingNames || (ServerTimingNames = {}));

package/dist/esm/ssr/serverRender/renderToStream/index.js

@@ -2,8 +2,8 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { createElement } from "react";
 import { run } from "@modern-js/utils/runtime-node";
+import { time } from "@modern-js/utils/universal/time";
 import { PreRender } from "../../react/prerender";
-import { time } from "../time";
 import renderToPipe from "./renderToPipe";
 export var render = function(param) {
   var App = param.App, context = param.context;

package/dist/esm/ssr/serverRender/renderToString/entry.js

@@ -8,17 +8,18 @@ import React from "react";
 import ReactDomServer from "react-dom/server";
 import { serializeJson } from "@modern-js/utils/runtime-node";
 import ReactHelmet from "react-helmet";
+import { time } from "@modern-js/utils/universal/time";
 import { serializeErrors } from "../../../router/runtime/utils";
 import helmetReplace from "../helmet";
 import { RenderLevel } from "../types";
-import { time } from "../time";
 import prefetch from "../../prefetch";
 import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
+import { SSRErrors, SSRTimings, createSSRTracker } from "../tracker";
 import { toFragments } from "./template";
 import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
 import * as styledComponentRenderer from "./styledComponent";
-var buildTemplateData = function(context, data, renderLevel) {
+var buildTemplateData = function(context, data, renderLevel, tracker) {
   var request = context.request, enableUnsafeCtx = context.enableUnsafeCtx;
   var unsafeContext = {
     headers: request.headers
@@ -32,7 +33,10 @@ var buildTemplateData = function(context, data, renderLevel) {
         pathname: request.pathname,
         host: request.host,
         url: request.url
-      }, enableUnsafeCtx ? unsafeContext : {})
+      }, enableUnsafeCtx ? unsafeContext : {}),
+      reporter: {
+        sessionId: tracker.sessionId
+      }
     },
     renderLevel: renderLevel
   };
@@ -44,7 +48,7 @@ var Entry = /* @__PURE__ */ function() {
     _define_property(this, "entryName", void 0);
     _define_property(this, "result", void 0);
     _define_property(this, "metrics", void 0);
-    _define_property(this, "logger", void 0);
+    _define_property(this, "tracker", void 0);
     _define_property(this, "template", void 0);
     _define_property(this, "App", void 0);
     _define_property(this, "fragments", void 0);
@@ -59,8 +63,8 @@ var Entry = /* @__PURE__ */ function() {
     this.host = host;
     this.App = options.App;
     this.pluginConfig = config;
+    this.tracker = createSSRTracker(ctx);
     this.metrics = ctx.metrics;
-    this.logger = ctx.logger;
     this.nonce = nonce;
     this.result = {
       renderLevel: RenderLevel.CLIENT_RENDER,
@@ -115,7 +119,7 @@ var Entry = /* @__PURE__ */ function() {
                   errors: serializeErrors(routerContext.errors)
                 } : void 0;
                 html = "";
-                templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel);
+                templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.tracker);
                 SSRData = _this.getSSRDataScript(templateData, routerData);
                 _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
                 try {
@@ -177,8 +181,7 @@ var Entry = /* @__PURE__ */ function() {
                 prefetchData = _state.sent();
                 _this.result.renderLevel = RenderLevel.SERVER_PREFETCH;
                 prefetchCost = end();
-                _this.logger.debug("App Prefetch cost = %d ms", prefetchCost);
-                _this.metrics.emitTimer("app.prefetch.cost", prefetchCost);
+                _this.tracker.trackTiming(SSRTimings.SSR_PREFETCH, prefetchCost);
                 return [
                   3,
                   4
@@ -186,8 +189,7 @@ var Entry = /* @__PURE__ */ function() {
               case 3:
                 e = _state.sent();
                 _this.result.renderLevel = RenderLevel.CLIENT_RENDER;
-                _this.logger.error("App Prefetch Render", e);
-                _this.metrics.emitCounter("app.prefetch.render.error", 1);
+                _this.tracker.trackError(SSRErrors.PREFETCH, e);
                 return [
                   3,
                   4
@@ -231,12 +233,10 @@ var Entry = /* @__PURE__ */ function() {
             }
           ]);
           var cost = end();
-          this.logger.debug("App Render To HTML cost = %d ms", cost);
-          this.metrics.emitTimer("app.render.html.cost", cost);
+          this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
           this.result.renderLevel = RenderLevel.SERVER_RENDER;
         } catch (e) {
-          this.logger.error("App Render To HTML", e);
-          this.metrics.emitCounter("app.render.html.error", 1);
+          this.tracker.trackError(SSRErrors.RENDER_HTML, e);
         }
         return html;
       }