前端异常监控系统建设

1. 前端异常监控系统建设美团基础技术部

2. 个人介绍干⻩标美团-基础技术部-前端技术中心前端监控系统前端故障运营

3. CONTENTS 目录美团前端监控平台介绍前端异常采集与定位告警系统建设与实践

4. 业务现状与痛点无法下单⻚面白屏用户 xxxx 业务快速迭代开发者 • 很难第一时间发现问题 • 故障影响范围难以评估 • 缺少异常相关报错日志 • 本地排查异常不易复现运行环境多样化应用无监控

5. 前端异常监控核心能力分析异常采集及可视分析 Logs Traces Metrics 故障告警及定位处理发现核心目标流转主动发现定位跟踪快速定位归档

6. 前端异常监控系统建设的挑战全面监控前端各种异常类型适配前端多样化的运行环境支持业务多样化监控需求提升告警业务覆盖率和准确率提供快速定位故障工具

7. 美团前端监控产品架构业务线解决方案美团平台点评基础研发优选业务解决方案静态资源容灾方案到家到店快驴买菜链路追查方案全链路分析方案灰度监控解决方案金融 …. 指标运营方案 CDN可用性方案秒开率运营方案故障运营方案异常监控与故障处理系统能力采集发现流转定位性能日志请求日志阈值告警智能告警趋势分析分布分析对比分析多维报表分析慢访问分析工单中心异常日志业务日志周期报告组织分析代码反解上下文日志链路分析多维根因定位异常知识事故流转环境浏览器动态容器小程序(美团/微信) 开放能力服务接入 Open API 数仓开放信息处理监控探针(agent) 实时/离线数仓数据预清洗

8. 前端监控产品运营情况活跃前端项目数前端项目总数 ~10k ~3k 个消息总量 ~1000B /天个异常上报数 ~500M 监控粒度告警时延分钟级 <10 秒 /天

9. CONTENTS 目录美团前端监控平台介绍 • 前端异常类型前端异常采集与定位 • 请求异常采集方法告警系统建设与实践 • KPI 多维根因定位 • JS 异常采集方法 • Sourcemap JS 代码反解

10. 前端异常采集与定位-前端异常类型请求异常类别采集静态资源异常 JS运行时异常 API 异常 XMLHttpRequest Fetch PerformanceEntrites 定位 CDN 域名分析 MTraceId 链路追踪分析 JS 异常自定义异常 onerror console.error unhandlerejection 代码反解多维报表分析多维根因分析上下文日志业务异常环境异常小程序框架环境异常同步容器框架业务指标异常自定义指标

11. 前端异常采集与定位-请求异常采集方法请求异常细分 Fetch 静态资源 API Ajax 1. 静态资源异常采集成功加载采样 10%，触发异常自定义采样率静态资源异常细分： IMAGE_SIZE_EXCEED IMAGE_DURATION_EXCEED RESOURCE_ERROR: target.nodeName + URL

12. 前端异常采集与定位-请求异常采集方法 2. Ajax 请求异常采集原理 Open setStartTime setMtraceId Send Parse Report addEventListener load/error/abort/timeout onreadystatechange readyState: 4 Ajax异常细分： TIMEOUT_AJAX INVALID_AJAX AJAX_ERROR: URL 请求信息统一数据模型

13. 前端异常采集与定位-请求常⻅分析方法分析目标: 哪个时间? 哪个⻚面? 的哪个请求? 在 xx 容器/ xx 运营商/ xx 省份… 出现了 xx 状态码异常 1. 趋势分析 2. 分布分析 3. 多维报表分析

14. 前端异常采集与定位-KPI 多维根因定位网络成功率异常 KPI 指标单一维度分析两维组合分析 N 维组合分析地区运营商容器北京上海电信联通 chrome safari 地区,运营商地区,容器运营商,容器北京,电信北京,联通上海,电信上海,联通北京,chrome 北京,safari 上海,chrome 上海,safari 电信,chrome 电信,safari 联通,chrome 联通,chrome ……. 结论：多维下钻分析实际上是寻找导致总量突变的根因元素集合，可归结为以搜索问题下钻分析

15. 前端异常采集与定位-KPI 多维根因定位 Adtributor 算法计算所有元素的 S 值按S值降序排列每个维度的元素 Adtributor 原理计算EP值筛选可疑元素加入维度根因集合计算维度S值及EP值筛选可疑维度加入根因集合 S 值：Surprise，惊奇性，描述所有维度下所有元素的真实值和预测值的差异 EP 值：Explanatory power，解释力，元素在 KPI 变化总量中的占比 TEEP 阈值：每个元素的 EP 阈值，小于 TEEP 则忽略根因集合按照S值降序排列输出Top3 TEP 阈值：每个维度的 EP 阈值，小于 TEEP 则忽略

16. 前端异常采集与定位-KPI 多维根因定位 Recursive Adtributor 算法多维根因定位示例 Recursive Adtributor 原理

17. 前端异常采集与定位-JS 异常采集方法 JS 异常采集原理 JS 异常数据模型 JS 异常监听方法

18. 前端异常采集与定位-Sourcemap JS 代码反解 JS 异常定位 Case 分析异常详情⻚异常原始堆栈

19. 前端异常采集与定位-Sourcemap JS 代码反解 JS 堆栈反解工具设计微信代码服务器 1 上传代码 2 拉取SourceMap文件 CI/CD 微信小程序 Web RN JS 堆栈反解示例 3 存储SourceMap文件 S3 前端监控系统 4 请求反解监控平台 S3 Bucket 其它 S3 Bucket 5 拉取SourceMap文件 JS 堆栈反解流程 6 返回反解结果代码反解服务异常详情分析⻚面

20. CONTENTS 目录美团前端监控平台介绍前端异常采集与分析告警系统建设与实践 • 前端故障告警问题分析 • 异常清洗去除告警噪声 • 灰度小流量故障监控 • 如何提升告警覆盖率

21. 告警系统建设与实践-前端告警问题分析 • 异常噪声大，影响告警准确性由于前端技术特点，JS相对而言容易执行错误，但大部分错误并不会导致⻚面出现问题，甚至对用户无感知。但这些异常同样会被探针捕获上报，导致真正影响用户体验的重要异常被淹没。 • 小流量难监控，易出故障不同版本不同渠道，前端应用的代码和运行环境，甚至业务逻辑会存在较大差异。小流量小的异常容易被整体异常淹没，导致小流量出现故障时，很难被告警系统发现。 • 告警阈值配置难决策对初次使用告警的用户而言，最大问题是不知如何配置告警策略的阈值。特别是对于需要使用计算函数的告警，如环比、连续波动百分比等函数进行二次加工。 • 前端告警覆盖率低提升告警覆盖率是进行前端应用稳定性监控的前提，提升前端应用开发者的监控意识，以及监控平台的可靠性和易用性是关键。

22. 告警系统建设与实践-异常清洗去除告警噪声 Case 分享：脚本资源加载失败导致告警频繁告警消息异常详情

23. 告警系统建设与实践-异常清洗去除告警噪声异常清洗方案 1. 配置探针重新发布默认清洗规则自定义清洗列表探针 Agent 3. 落库前置清洗 2. 动态下发白名单异常上报钩子动态下发白名单默认清洗规则自定义清洗列表异常上报钩子告警探针 Agent 异常清洗可视分析探针 Agent • 发布成本高 • API 请求影响性能 • 生效不及时 • 下发之前异常无法清洗 • 系统集成，管理方便，生效及时

24. 告警系统建设与实践-异常清洗去除告警噪声异常清洗产品异常清洗产品

25. 告警系统建设与实践-灰度小流量故障监控在今年已经发生多起小流量故障没有及时发现引起的资损事故小流量为什么难以监控，且容易出故障？ • 异常噪声无法完全去除，存在是必然 • 灰度流量重要异常被整体异常淹没灰度异常淹没示意图全流量灰度流量普通异常重要异常

26. 告警系统建设与实践-灰度小流量故障监控常⻅小流量客户端灰度发版前端应用灰度发布 v11.14.400 90% 前端应用 v1.0.0 10% v1.0.1 业务渠道灰度投放 90% 前端应用 90% 优选微信小程序渠道 10% 美团微信小程序渠道 v1.0.0 前端应用 v11.14.401 灰度10% 10% v1.0.0

27. 告警系统建设与实践-灰度小流量故障监控如何解决灰度小流量故障监控告警策略细化丰富告警方式 • 按应用灰度版本监控告警 • 常规阈值告警 • 按客户端灰度版本告警 • 48小时首现异常告警 • 按渠道维度灰度告警 hook 更新灰度版本自动注入 Version 更新告警策略(版本) 采集更新灰度版本监控分析&告警灰度版本监控原理

28. 告警系统建设与实践-灰度小流量故障监控灰度版本监控 V1.0.0 S3 version 3 应用客户端 Logs-Version 7 1 5 V1.0.0 6 告警 V1.0.1 4 2 灰度网关 Nginx 监控平台 V1.0.0 version V1.0.1 V1.0.1 灰度版本监控技术架构分析

29. 告警系统建设与实践-灰度小流量故障监控 48小时异常首现 Timestamp 1637843373994 故障大部分都是由变更导致，变更引发的故障往往会引入新异常！ error_name_3 error_name_4 error_name_5 error_name_1 error_name_6 ……. Timestamp 1637843673994 error_name_1 error_name_1 error_name_3 error_name_4 48小时异常首现示意图 error_name_2 原理：对比过去48小时的异常，如果不存在则定义该异常为增量异常 error_name_5 ……. Timestamp 1637843673994 error_name_1 error_name_2 error_name_3 error_name_4 ……. 48小时异常首现分析

30. 告警系统建设与实践-灰度小流量故障监控 48小时异常首现告警示例告警条件建议 • 高级别告警，通过其它（且）告警条件，提升告警准确率，避免误告和告警频繁 • 低级别告警，利用异常工单能力，治理常⻅异常，降低异常噪声告警消息

31. 告警系统建设与实践-如何提升告警覆盖率问题方案项目众多告警配置成本高分层级告警&告警模板告警策略阈值配置难决策告警水位线&告警模拟缺少告警意识或实践经验故障运营&最佳实践

32. 告警系统建设与实践-如何提升告警覆盖率分层级告警&模板告警 • 统一上报前端指标（如RN容器）组织-1 组织-1-1 组织-1-2 • 统一设置告警策略项目A • 允许业务自定义告警策略组织-1-3 组织-1-3-1 项目 B 模板组织-1-3-2 分层级告警策略下发项目 C 告警模板复制

33. 告警系统建设与实践-如何提升告警覆盖率告警水位线&告警模拟

34. Q&A

35. 更多技术干货欢迎关注“美团技术团队”