跳转到主要内容
Clinford Jordano Valencia
全部项目
平台Web移动端

实时前端遥测平台

一个带类型的前端 SDK 与事件管道,让多步骤用户流程具备实时可见性,把故障发现时间从数天缩短到几分钟。

技术栈
TypeScript · BFF · Event streaming · Columnar storage · Dashboards

问题

一部分用户在冗长的多步骤流程中悄悄流失。第三方集成出问题时没有人察觉:排查靠手工翻阅零散的服务器日志,一查就是几天。这些天里,每一天都是真实用户无法完成流程。

方案

  • 小而带类型的 SDK。 一个 TypeScript 采集器在每个页面和平台上收集相同的用户行为数据,所以同一个事件在任何地方含义一致。
  • 带安全阀的节流。 SDK 把事件批量缓存,在短定时器或数量上限先到时发送。每次点击一个请求会耗尽浏览器的网络线程;缓存太久则可能在标签页关闭时丢失,因此页面卸载时使用 navigator.sendBeacon。
  • 负责校验的 BFF。 批量事件进入 Backend for Frontend,它对照 TypeScript 定义检查 schema、校验时间戳是否合理、剔除意外字段和个人数据,并附上会话元数据。把后端的判定与界面显示的结果相比较,暴露出两者之间的状态不一致。
  • 流式管道接入列式存储。 流式处理吸收流量高峰;列式存储能在毫秒内完成超大规模、高基数事件集的聚合,而行式存储则慢得多。
  • 安静的故障处理。 管道不可用时,SDK 在本地保留一个小缓冲区,被动式熔断器暂停发送。它不会向服务器探测健康状态,而是等待下一次成功响应。

结果

发现故障的时间从数天缩短到 5 分钟以内。当一个出问题的步骤意味着大量失败尝试时,这就是“事后复盘里的一条记录”与“当天上午就修好”之间的差别。