北斗监控平台项目实践

1. 【第5期】线上体验保障专题

2. 【第5讲】北斗监控平台项目实践分享嘉宾：邹鹏-58同城前端工程师

3. 北斗监控平台简介 58前端技术委员会主导的协同项目它的目标是为集团提供： • • • • 一站式前端线上质量监控系统支持多技术栈包括Web、RN和小程序支持多维度实时分析海量数据提升解决问题的效率

4. CONTENTS 目录 01 02 03 趋势监控特例监控大前端监控

5. 趋势监控 01 特例监控大前端监控

6. ⻚面白屏了！怎么解决？

7. 我们想知道是哪个⻚面？ Where 发生了什么错？ What 什么时候开始的？ When 谁那里可以复现？ Who 哪个接口跟它有关系？ Which

8. 北斗监控系统解决痛点 1. 准确收集到问题，以及相关的全面信息 2. 实时的趋势分析，监控项目的运行状态 What When Who Where Which 3. 主动的告警通知，及时应对，避免被动

9. 核心阶段采集第一阶段准确全面的采集数据分析第二阶段支持海量数据的实时分析告警第三阶段及时准确的告警通知

10. 采集哪些数据采集语法异常性能打点⻚面流量接口异常性能异常通用信息接口资源异常行为接口染色客户端日志接口采样路由信息分析告警

11. 通用信息内容性能通用信息异常采集分析告警

12. 异常采集采集普通异常分析 window.onerror 未处理的异步异常 JS异常异常 window.addEventListener(‘unhandledrejection’, ···); 跨域异常报错 “Script error” <script crossorigin src=“” > CDN响应头 Access-Control-Allow-Origin:* j1.58cdn.com✅ 资源异常接口异常 Image, script, css… window.addEventListener(‘error’, …) fetch 重写 XMLHttpRequest 重写 jsonp 资源报错 && src非js文件告警

13. 数据分析基本需求采集分析告警支撑10亿PV 按维度实时查询聚合数据按关键字搜索日志详情高性能的实时分析型数据库预聚合，列式存储基于Lucene搜索引擎数据库实时性、全文搜索、分布式架构

14. 数据分析的流程采集 1 数据接收由JavaWeb提供对外接口，负责接收数据 2 数据存储通过Kafka消息队列将数据存储到Druid和ES 3 数据查询 4 数据可视化聚合数据查询Druid, 详情检索查询ES 使用UI组件、图表库提供数据可视化能力分析告警

15. 北斗数据流的分层架构数据采集 DBConnection Auth Manage

16. 数据可视化功能采集分析告警

17. 数据概览 35 388 6 亿 100+ DEPARTMENT PROJECTS PEAK VOLUME WEEKLY USER 独立团队项目总数日峰值上报量周活

18. 数据量增多导致查询Druid变慢查询速度数据存储 Druid按时间(天)进行数据分片; 在不扩容的情况下，要提速只能想办法减少每日数据上报量

19. 哪种数据维度有优化空间？性能异常平均值重要，总数没有异常总数重要通用信息接口性能行为上报量大，每次pv上报一次

20. 使用采样的统计方式优点 SDK全量采集，采样率由服务端控制 1. 不影响性能平均值计算✅ 2. 采样率动态可配 ✅ 3. 按上报比例节省存储空间✅ 大于阈值(100W)应用采样率，阈值可以动态配置动态采样率 = 阈值 /项目性能数据上报总量（过去24小时）

21. 动态采样率流程图 6 5.4亿 4.5 3 1.2亿 1.5 0 优化前优化后

22. 采集分析告警在同事@你之前发现问题

23. 告警实现思路采集定时任务 N 阈值判断 Y 告警通知分析告警

24. 告警功能诉求快不能延迟，晚了就没意义了稳不能挂，告警服务本身要可靠准不能多报，错报采集分析告警

25. “稳” 分布式集群告警服务短信、微信、邮件 Druid MySQL 查询阈值配置抢锁 Redis redlock 分析任务频次判断查询监控数据阈值判断

26. “快” 分钟级告警经过优化，查询Druid和运算的平均时间是秒级的，最多的用时是Druid数据落盘时间，经过测试最多用时小于60s, 所以北斗可以达到分钟级的及时告警

27. “准” 阈值判断算法错误PV比没有明显变化 PV 错误PV比超出阈值错误/PV 错误错误/PV 阈值

28. 告警配置展示 5个维度，18个指标环比上升环比下降最近 N 分钟的平均值大于上一个 N 分钟最近 N 分钟的平均值小于上一个 N 的平均值分钟的平均值连续大于连续小于最近 N 分钟的原始值连续大于阈值最近 N 分钟的原始值连续小于阈值

29. 趋势监控采集 • • • • • 语法异常接口异常资源异常性能表现通用信息分析 • • • • • 支持海量数据实时聚合查询全文搜索详情数据可视化多维度筛选告警 • • • • • 准确稳定分钟级自定义阈值短信邮件

30. 趋势监控 02 特例监控大前端监控

31. 快来看，老板的手机出问题了这个问题我这里不复现啊？！

32. 特例用户问题排查痛点针对这种特例问题，通过反馈，无法了解错误之外的信息，比如：从哪些⻚面进来的？先后点了哪些按钮？

33. 如何收集“行为轨迹” 采集的区别 • 接口、资源要收集所有正常和异常的请求 • 尽力通过日志还原用户的实际操作过程，所以体积较大，不能实时性收集环境和维度 • 环境：web环境和Native环境 • 维度：JS错误、性能、接口、资源、⻚面交互、hybrid调用现有系统 • Native方面：APP工厂利用wlog上报客户端日志 • Web方面：WMDA系统收集了web的⻚面交互日志

34. 行为轨迹实现流程客户端日志保存 Native 手动上报 WLOG系统手动上报北斗监控系统推送 Web 保存行为轨迹关联ID WMDA 日志 WMDA系统

35. 行为轨迹功能展示 58北斗监控平台

36. 特例监控-接口追踪兄弟, 你的接口报错了俺的代码怎么可能有问题注：图中数据为模拟数据

37. 与服务端监控系统连接 58微服务监控平台前端北斗 WTrace 服务端

38. 连接服务端监控

39. 连接服务端监控-功能展示注：图中数据为模拟数据

40. Web领域航行的北斗监控护卫舰：接口追踪护卫舰：行为轨迹海域：web 航⺟：北斗监控

41. 趋势监控 03 特例监控大前端监控

42. 58大前端技术栈

43. 北斗RN监控北斗监控系统采集分析告警

44. 58RN热更新流程载体⻚启动首次渲染获取热更新配置执行业务包代码解析热更新配置 58 React Native 解析业务包代码获取业务包代码

45. RN采集-性能指标热更新周期时间节点参考Web规范 getResourceStart FP首次渲染 bundleStart LCP最大绘制 rootMount LOAD完全加载 …

46. RN LCP 计算方案

47. 58北斗监控平台 RN性能数据可视化

48. 其他技术栈 9月初上线了小程序监控，目前房产业务线正在试点，计划在9月正式推广其他业务线。实现了web分析的绝大部分功能，比如：语法异常，接口异常，性能分析等。接入了内存溢出监控，实现了按设备分段监控内存溢出监控趋势变化，查看内存快照，堆栈信息 58本地版、58同城app已经接入，平台可视化部分预计9 月中旬上线

49. 北斗监控系统未来规划 58北斗监控平台能力扩展 RN、小程序、iOS接入各个业务深度服务数据报表，归因分析，体验优化协同共建可维护性，可扩展性，技术文档

50. 北斗美事交流群谢谢大家！《北斗监控平台项目实践》 58同城邹鹏

51.