通过预先汇总，解决了分析页面的超时问题
VODA 是一款分析服务，收集网站访客的页面浏览、点击和滚动，并以流量图表和热力图呈现。随着使用的网站增多，原有架构难以支撑，于是由 4 人组成的 TFT 重新设计了架构。我负责事件采集、消息处理、数据汇总和页面截图。
- 5项亲自解决的采集与汇总问题
- 4 个负责开发的组件
- 4 人架构重新设计 TFT 的人数
将访客鼠标长时间停留的位置叠加显示在页面上。坐标采集和汇总为该页面生成数据。截图来自服务介绍资料，公司名称已遮挡。
本地化参考图 · 查看韩语原图- 已分配角色
- 我修正了点击坐标的采集，并开发了将 SQS 消息转换为 Elasticsearch 文档的处理程序、预先生成汇总结果的数据整理器，以及截取整页的爬虫。
- 成果
- 我纠正了因设备不同而偏移的点击坐标，并防止了消息丢失和重复。分析页面不再每次都在 Elasticsearch 中汇总，而是读取数据整理器预先生成的结果，从而解决了超时问题。
- 1坐标采集以鼠标下方最上层元素为基准记录坐标
- 2消息处理将 SQS 消息加工为 Elasticsearch 文档格式
- 3数据整理器定期汇总并存入 RDS 表
- 4页面爬虫即使是整页滚动的网站也能截取整页
旧架构与新架构
Web Agent采集访客的页面浏览、点击和滚动
voda-server由一台服务器将采集数据存入 MySQL，并负责整理和页面响应
分析界面流量图表和热力图
采集
- Web Agent采集访客的页面浏览、点击和滚动改进坐标记录方式
- API Gateway, SQS将鼠标和滚动事件存放在队列中
- pv-recorder, mouse-recorder将消息存为 Elasticsearch 文档消息加工、并行采集、去重
- page-crawler采集页面截图和元素位置整页截图
存储
- Elasticsearch事件日志和汇总结果
- MySQL客户、页面信息、报告
整理
- 汇总整理器定期汇总鼠标和滚动数据搭建数据整理器
- forecast预测访问趋势
可视化
- presenter向分析页面提供数据的 API返回汇总结果
- voda-analytics面向管理员的分析界面
此技术预期带来的变更
不遗漏事件的采集
将采集器拆分到多个容器中，及时取走队列中堆积的消息；同一条消息即使到达两次，也只保留一条记录。
不受设备影响的准确热力图
以网页元素为基准记录坐标，即使屏幕尺寸不同，同一按钮的点击也会集中在同一位置。
无需等待的分析页面
繁重的汇总提前完成，管理员打开页面时即可看到图表和热力图，不会超时。
问题及解决方案
问题由于按页面绝对坐标记录，即使点击同一个按钮，也会因屏幕尺寸不同而记录到不同位置。
已解决。找到鼠标下方最上层的网页元素，并以该元素内的坐标进行记录。
问题每次打开分析页面都用 Elasticsearch Aggregation 汇总，响应缓慢导致超时。
已解决。新开发了定期汇总并存入 RDS 表的数据整理器，页面只需读取汇总结果。
问题政府机关网站常用按区块切换的整页滚动，普通截图只能截到第一个区块。
已解决。不使用 Selenium API，而是直接向 Chrome 发送请求，将截图高度扩展到整个滚动长度，并以移动端方式截图。
问题如果 1 分钟内没有取走 SQS 消息，就会超出队列上限，导致数据丢失。
已解决。通过异步任务队列把采集命令分发到多个 Docker 容器，让消息并行获取。
问题改为并行获取后，同一条消息会被取两次，导致日志重复。
已解决。用消息时间和用户 ID 生成文档 ID，使相同的消息会被覆盖。
分析服务界面
显示按时段和星期的访问趋势及预测值。截图来自服务介绍资料，公司名称已遮挡。
本地化参考图 · 查看韩语原图