1、大促亿级流量下京东H5应用的可观测性保障实践沈 亚 京东资深技术专家l负责京东客户端及跨端技术的可观测平台建设与实践l主导设计并完成Hybrid/H5监控能力从0到1的落地l经历多次618,双11以及春晚核心活动亿级别流量的考验京东H5观测体系的背景及介绍深度探索主动观测自动化被动观测带来的降本提效全链路观测及质量保障的实践与思考京东H5观测体系背景及介绍移动端开发现状+=跨平台开发效率高更新迭代方便兼顾部分原生体验用户体验不如原生工程质量难以把控NativeH5Hybrid优势劣势H5观测的背景H5页面多业务团队广活动搭建率高H5业务特性这个活动打开太慢啦页面打开无内容！这个活动已经过期失效

2、了这个页面打开出错！线上用户反馈研发测试痛点不清楚业务性能现状，没有统一标准本地正常，线上偶现异常难以追踪想做技改优化，但是没发力方向线上用户体验问题不及时发现和处理，将会造成用户流失，单量减少业界现状l 与公司内部数据贴合性不够，数据安全性也不可控。l 定制功能实现复杂，需要修改探针源码等。现有商业化或开源监控方案自建监控平台l 没有体系化的指标以及衡量标准。l 覆盖不到全链路，缺少webview/接口/CDN资源等监控。l 对业务影响力较小，推动辅助不了一些优化工作。治标不治本痛点仍存在我们是如何解决的？方案价值场景全覆盖降本提效l打通搭建平台l自动化工具介入lWebviewlH5l接口/

3、CDN资源助力业务l快速排障l支撑技改优化l发布质量保障深入主动观测主动观测基建日志格式服务端架构日志服务端建设方案价值体现观测平台探针指标建设衡量标准质量保障H5探针-指标建设指标建设永远服务于度量标准统一度量标准提升综合性能评分降低事故异常率12采集标准中指标因子3H5探针-综合性能评分算法单指标评分算法综合评分标准根据不同场景，结合现状设置对应评分标准良好阈值较差阈值单指标分数实际数值总分权重单指标分值H5探针-评分标准指标讲解LCP-最大内容绘制最开始变动最终最开始变动最终更代表真实用户体验业界标准H5探针-质量保障保障探针发布标准及质量的前提下，选择权交给业务SOSO速度(speed

4、)可选择的(optional)稳定(stability)监控(observable)Tree ShakingHybrid 离线包工具方法抽离包大小管控发布流程标准化多重降级NPM包/CDN接入插拔式配置内部异常加载性能日志服务端-服务端架构关注点u高并发，服务稳定性qps，技术选型以及集群部署需要关注，尤其促期间，防服务被打穿。u存储端的设计与容灾数据量巨，尤其促期间会有翻倍的可能性，数据容灾需要保障u不同纬度查询统计需求异常数据要尽可能实时，满足不同时间，不同筛选粒度的聚合需求。日志服务端-sourcemap反解析本地/CICD打包业务研发自研Webpack/rollup打包插件上传Sour

5、cemap文件Nodejs反解析服务云存储OSS映射拉取对应版本Sourcemap文件进行反解析业务研发观测平台第1步第2步第3步第4步第5步请求吐回异常定位信息排障触发研发侧排障链路提效，避免手动上传Sourcemap文件日志服务端-异常告警分钟级阈值告警配置首次异常告警异常信息综合生成event id作为Redis Key计数event id 触发告警产品运营观念不够闭门造车：不深入贴合业务，不做工具平台打通独断专行：我定标准，只有我能做，你们都听我的。价值导向：重视接入率，忽视问题解决率问题为后期运营带来风险缺乏对研发的共情，造成不必要冲突，为后期维护埋下不信任种子缺乏长期优化动力没有核

6、心度量指标意识将在工具运行中后期缺乏优化动力和方向缺乏业务主人翁意识业务好坏和我无关，我只是观测，有了衡量标准，可以躺平了，业务自己摸索技改排障重功能，轻运营功能迭代更新随意，平台运营推广不充分，直接决定了工具的存亡观测平台-建设误区观测平台-正确思路贴合业务制定计划业务技改平台完善渐进式目标建设统一，自循环的可观测平台体系平台共同设定内部用户体验标准，建立指标体系前端委员会QA度量CMS工单告警目标深入业务，主动辅助，实现最终价值 接入率工单解决率推动技改落地数用户反馈观测平台-工单案例案例：用户反馈Plus页面加载慢，生成工单进行跟踪优化，提升用户体验。多用户反馈该页面加载慢，形成工单，追

7、踪推进优化12拉齐QA/业务研发，协同治理加载慢，页面卡顿现象。观测平台p 用户反馈体验工单p 综合性能评分差排查优化p 单指标具体分析p 结合优化案例价值产出p 优化效果提升31分p 社区输出优化实践骨架屏提升FCP/CLS预置头部高度提升CLS楼层懒渲染提升TTI/TBT观测平台-技改案例案例：赋能CDN容灾，提升资源加载成功率观测平台在打通CMS后，发现页面CDN节点异常，陡增触发告警12拉齐运维，研发，协同治理CDN资源容灾，增加重试机制3观测平台数据收集优化效果业务技改产出的体现加载成功率提升重试成功率达70%以上整体成功率提升0.3%自动化被动观测带来的降本提效为什么需要被动观测侵

8、入式接入探针成本大！线上有些非异常的业务问题如何感知？如果网络出问题探针加载失败业务研发反馈业务迭代快，开发测试验证时间有限线上如何及时发现问题，及时止损H5页面的质量管控建设测试反馈主动观测的延伸，增强观测覆盖面积，提升人效被动观测-落地方案用户群体：运营、开发、运维、测试模拟平台：APP、PC、M站、微信手QLighthouse选择检测引擎01打通主动观测02平台可配置化落地03业务标示/页面资源池性能检测能力监控业务看板检测方式：定时批量巡检、立即执行统一看板平台可以查看主动/被动观测数据无需额外配置可配置探针上报的URL统一采集指标统一评分标准被动观测-核心能力自动扫描检测，通过工具化

9、能力提升人效，保障质量性能评分安全检测专项检测1项1项2项50项功能问题33项性能问题12项检测项合规检测2项功能问题检测性能问题检测被动观测-技术架构技术架构运行环境基础组件层服务层应用层接口层前端Chrome（Headless 模式）PuppeteerLighthouse登录鉴权机型模拟用户行为仿真请求劫持JS注入任务资源调度自定义检测配置性能评分模型微信/邮件告警分析生成报告HTTP 接口前端发布/CICD 流水线原子H5观测平台被动观测-检测流程资源池隔离根据检测能力隔离CPU敏感型性能业务问题检测重保业务隔离脚本机健康度任务分发算法健康度决策树1.每5s收集脚本机CPU/内存均值。2

10、.判断最新机器的负载/内存是否小于阈值。3.当前机器任务数是否小于X个任务。分发任务给脚本机1.获取所有相关资源池类型健康的机器列表，组成平衡叉搜索树。2.选取第个节点机器，进下发任务。3.经过固定权重/负载增 进预估增，如不符合进剔除。研发/测试第1步第2步配置cronjob任务分发机脚本机第3步第4步下发任务触发写数据/告警检测平台被动观测-检测效率保障少资源，多执行压榨机器性能，减少资源浪费多Chrome进程复用，多Page架构单机可同时承载的页面检测更多了。减少进程数，IPC通信消耗1.Chrome是多进程架构，有些在服务端不必拉起，可以通过调参优化。2.Lighthouse默认也会自

11、动启动一个Chrome进程，通过WS服务进行串联同一个chrome进程精细调控1.业务问题检测：低规格2.性能问题检测：中规格（CPU敏感，模拟中端机）3.大促期间：重保业务资源倾斜+Serverless自动扩缩容被动观测-性能问题检测案例案例：针对页面性能，加载慢、加载超时等问题进行检测，通过综合评分评估页面性能健康度，设置指标阈值监控告警。自动化扫描采取权威的性能指标体系及综合评分标准，度量页面性能健康度12页面加载时间超过阈值告警周知通过注入探针JS，获取用户体验数据，计算评分通过Lighthouse性能分析，获取优化建议方案3通过lighthouse性能分析能力，获取优化建议，推送给用

12、户全链路观测及质量保障实践与思考全链路观测-单用户单会话纬度应用场景观察用户/会话级别，客户端全链路的真实表现，帮助业务方快速排障分析粒度细包括客户端基础信息，用户反馈，崩溃，网络，Webview组件，异常，性能数据，部分接口请求信息排障方便按照时间线纬度，观测发生异常前后，用户客户端的操作路径以及现场情况全链路观测-页面URL性能纬度应用场景以性能优化为导向，立体观测某个页面在性能涉及到的全链路的实际情况，缺少哪一环节，进行查缺补漏。聚焦质量包括Hybrid离线包，基础Webview组件性能，H5页面性能情况，CDN资源加载情况，以及是否接入了质量门禁以及线上巡检能力。H5全链路质量保障页面

13、上线前的质量门禁检测 合规检测-文字页面上线后的日常巡检检测通过n发布系统门禁检测：接入各个前端发布系统，进行质量门禁nCICD 原子：以jenkins流水线原子能力形式，集成到发布前检测赋能场景检测能力全方位检测 性能检测 安全检测 合规检测-图片爬取检测埋点监控功能问题检测性能问题检测多维度精准告警多指标性能报告页面接入检测模块监控告警静态配置接口配置MQ配置页面接入性能SDK异常SDK配置管理性能基线性能评分标准异常码配置监控告警多维度监控展示异常监控告警爬取检测与埋点监控相结合n大促会场池质量综合日报：大促期间持续发布质量日报n监控质量综合日报：通过H5扫描监控、用户反馈工单等能力每天持续跟进业务质量n违禁药品检测：图片自定义敏感词检测进行违禁药品检测nH5/小程序封禁检测：模拟用户使用场景，通过文字识别关键词进行扫描检测，并告警通知H5页面上线前后全链路质量保障总结主动观测被动观测统一标准辅助业务全链路观测及质量保障以全链路观测为目标，实现H5应用质量保障Thanks开放运维联盟高效运维社区DevOps 时代荣誉出品