For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/guides/advanced-features/server-monitor/metrics.md.
  • 简体中文
  • 指标事件

    指标事件是由 Monitors 分发,类型为 timing 或 counter 的事件。

    内置事件

    当项目开启 SSR 时,我们需要关注 Server 端各阶段耗时,并且有能力对 Server 端的问题进行定位。

    基于服务端运行逻辑,Modern.js 在内部提供了以下指标事件:

    Key描述
    server-handle-requestModern.js Server 处理请求单次耗时
    ssr-render-shell[SSR]在使用 Streaming SSR 时, React 将渲染一个套壳(shell)优先传输。这里表明套壳渲染完成时间
    ssr-render-html[SSR] React 将组件树渲染成 html 所消耗的时间,通常不会超过 50ms
    server-middlewareModern.js 自定义 Server Middleware 执行总时
    server-loaderServer 端整体 Data Loader 耗时
    server-loader-#idServer 端各个 Data Loader 耗时
    server-loader-navigation前端导航时,服务端 Data Loader 的整体耗时

    Modern.js 服务端流程如图所示:

    server

    内置 Monitor

    在 Modern.js 中,指标事件也由 LoggerMonitor 处理,它会将指标按照一定格式输出到控制台。

    Info

    内置的 LoggerMonitor 依赖了 rslog 库。

    在 Modern.js 中初始化的 rslog 实例默认在开发环境下会输出 debug 级别及以上的日志,在生产环境下会输出所有日志。而在内置的 LoggerMonitor 中,所有的指标事件都被输出为 Debug 日志。因此如果希望在开发环境查看指标事件的信息,需要添加额外的环境变量。

    开发者可以在运行 dev 命令时添加环境变量 DEBUG=true,如果运行正常,访问后可以在控制台看到如下输出:

    > Local:    http://localhost:8080/
    > press h + enter to show shortcuts
    
    debug   SSR Debug - server-loader, cost: 2.000094, req.url = /
    debug   SSR Debug - ssr-prerender, cost: 6.99997, req.url = /
    debug   SSR Debug - ssr-render-html, cost: 0.999927, req.url = /
    debug   Debug - server-handle-request, cost: 19.999981, req.url = /
    debug     --> GET / 200 90ms

    Server-Timing

    在 Modern.js 中,服务端还会额外将各阶段指标作为 Server-Timing 注入到 HTML 响应头中。

    在浏览器中,开发者可以通过 Performance API 获取:

    const navigation = performance.getEntriesByType('navigation')[0];
    const serverTiming = navigation.serverTiming;
    console.log(serverTiming);