基于React实现应用模块耗时统计方案及后端API设计咨询

1. 页面计时核心逻辑 #

• 给每个页面/子模块分配唯一标识（比如customer-info/basic、customer-info/address/current），明确层级归属（比如address/current归属于address，address归属于customer-info）
• 维护一个全局计时状态池，每条记录包含：页面标识id、首次开始时间戳startTime、累计耗时elapsedTime（毫秒）、状态status（active/paused/finished）、父模块标识parentId
• 页面进入时：
  • 首次进入：初始化startTime为当前时间，elapsedTime设为0，status改为active
  • 返回进入（之前暂停过）：更新startTime为当前时间，status切回active
• 页面离开时（返回上一页、关闭页面）：
  • 计算本次停留时长：当前时间戳 - startTime，累加到elapsedTime
  • status设为paused；如果是关闭整个模块/应用，标记为finished并立即上报

2. 层级耗时自动汇总 #

• 实时维护模块层级的累计耗时：子页面的elapsedTime更新时，自动向上遍历父模块，把新增耗时加到父模块的totalElapsed字段里
• 举个例子：address/current耗时增加10秒，address的总耗时加10秒，customer-info的总耗时也同步加10秒

3. 异常场景处理 #

• 页面关闭：监听beforeunload事件，触发时计算当前页面累计耗时，标记为finished并立即上报
• 页面返回：监听路由跳转事件（比如Vue的beforeRouteLeave、React的useEffect cleanup），离开前暂停当前页面计时并更新累计耗时
• 应用后台切换：监听visibilitychange事件，应用切后台时暂停所有active状态的计时，切回前台时恢复计时

1. 耗时数据上报接口 #

接口地址：POST /api/user-time/record #

请求参数（JSON）： #

{
  "userId": "user_123456",
  "appVersion": "1.2.0",
  "timeRecords": [
    {
      "moduleId": "customer-info",
      "pageId": "customer-info/basic",
      "parentPageId": "customer-info",
      "totalElapsed": 15000,
      "status": "finished",
      "startTime": 1690000000000,
      "lastUpdateTime": 1690000150000
    }
  ]
}

逻辑说明： #

• 支持批量上报多个页面/模块的耗时数据
• 后端先校验userId和参数合法性
• 遇到已存在的记录（相同userId+pageId），按lastUpdateTime做增量更新：用最新的totalElapsed覆盖旧值，或者累加增量（根据业务需求选择）
• 存储时保留每个页面的独立记录，同时可通过定时任务或实时计算维护模块层级的汇总数据

2. 用户模块耗时查询接口 #

接口地址：GET /api/user-time/stats #

请求参数（URL查询参数）： #

• userId: 必填，用户ID
• moduleId: 可选，指定查询某模块（不填返回所有模块）
• startTime: 可选，查询起始时间戳
• endTime: 可选，查询结束时间戳

响应参数（JSON）： #

{
  "userId": "user_123456",
  "stats": [
    {
      "moduleId": "customer-info",
      "totalElapsed": 45000,
      "children": [
        {
          "pageId": "customer-info/basic",
          "totalElapsed": 15000,
          "children": []
        },
        {
          "pageId": "customer-info/address",
          "totalElapsed": 20000,
          "children": [
            {
              "pageId": "customer-info/address/current",
              "totalElapsed": 12000,
              "children": []
            },
            {
              "pageId": "customer-info/address/permanent",
              "totalElapsed": 8000,
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

逻辑说明： #

• 根据查询参数过滤用户的耗时记录
• 按模块层级结构聚合数据，返回每个页面/模块的累计耗时
• 支持时间范围过滤，统计指定时间段内的用户耗时

3. 数据存储建议 #

• 基础记录表user_time_records：存储每个页面的独立耗时，字段包括id, user_id, module_id, page_id, parent_page_id, total_elapsed, status, start_time, last_update_time, created_at, updated_at
• 汇总统计表user_time_summary（可选）：用定时任务或实时计算模块层级的汇总耗时，优化查询性能，字段包括id, user_id, module_id, total_elapsed, time_range, updated_at

内容的提问来源于stack exchange，提问作者Mohit Chauhan