logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 开始
      介绍
      快速上手
      版本升级
      名词解释
      技术栈
      核心概念
      页面入口
      构建工具
      Web 服务器
      基础功能
      路由
      路由基础
      配置式路由
      数据管理
      数据获取
      数据写入
      数据缓存
      渲染
      服务端渲染(SSR)
      服务端流式渲染(Streaming SSR)
      渲染缓存
      静态站点生成(SSG)
      渲染预处理 (Render Preprocessing)
      样式开发
      引入 CSS
      使用 CSS Modules
      使用 CSS-in-JS
      使用 Tailwind CSS
      HTML 模板
      引用静态资源
      引用 JSON 文件
      引用 SVG 资源
      引用 Wasm 资源
      调试
      数据模拟(Mock)
      网络代理
      使用 Rsdoctor
      使用 Storybook
      测试
      Playwright
      Vitest
      Jest
      Cypress
      路径别名
      环境变量
      构建产物目录
      部署应用
      进阶功能
      使用 Rspack
      使用 BFF
      基础用法
      运行时框架
      扩展 BFF Server
      扩展一体化调用 SDK
      文件上传
      跨项目调用
      优化页面性能
      代码分割
      静态资源内联
      产物体积优化
      React Compiler
      提升构建性能
      浏览器兼容性
      配置底层工具
      源码构建模式
      服务端监控
      Monitors
      日志事件
      指标事件
      国际化
      基础概念
      快速开始
      配置说明
      语言检测
      资源加载
      路由集成
      API 参考
      高级用法
      最佳实践
      自定义 Web Server
      专题详解
      模块联邦
      简介
      开始使用
      应用级别模块
      服务端渲染
      部署
      集成国际化能力
      常见问题
      依赖安装问题
      命令行问题
      构建相关问题
      热更新问题
      已下线功能
      📝 编辑此页面
      上一页日志事件下一页国际化

      #指标事件

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

      #内置事件

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

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

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

      Modenr.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);