带你读《2022技术人的百宝黑皮书》——前端质量之灰度监控的有效实践(1)

简介: 带你读《2022技术人的百宝黑皮书》——前端质量之灰度监控的有效实践(1)

作者:悠酱

出品:大淘宝技术


本文将介绍更聚焦灰度监控的报警配置。


背景


回顾过去3年,前端故障总量并不算太大,但背后的数据反映出经济体前端的安全生产,特别是高可用这个子域,正处于一个相对比较低的水位:

经济体故障监控发现率46.8%,但其中前端故障的监控发现率仅为22.7%,与期望的监控水平相去甚远!


因此我们开始专门起项治理前端质量,主要抓手通过监控报警,进行一段时间也取得了一定成效。


在分析遗漏的几个线上问题,尤其是报警没有报出来的,且较为严重(白屏、跳转故障等),都有以下共同点:


新变更导致的

非全量,只有部分流量 某些特定情况才会出问题

发布阶段本可发现,但遗留到线上一段时间


因此在报警已经配置的比较全面的下一阶段,我们更需要聚焦于灰度监控


灰度监控的重要性


image.png


从保稳定看

1. 预发测试的局限性:不能全面覆盖到线上用户场景(包括多样的用户行为,丰富的客户端设备,海量的业务数据等)

2. 发布时间节点时效性:技术同学对问题更为关注,更有积极性

3. 及时止损:小范围的试错阶段及时发现,避免到全量发布造成较大影响后


从提效看

1. 多端测试提效:某些多端导购页面,10%的时间就能cover掉80%以上的测试点,而剩下90%时间都可能在测多

端个别异常场景,这里可以尝试用灰度方式替代

2. 灰度验证:灰度发现的问题,修复后,除了预发测试外,某些非主流程场景可以继续小比例灰度测试


灰度监控的效果非常明显:

以我们detail详情页为例,接入监控4个月共发布27次,在灰度阶段共发现5个问题,遗漏1个问题但不影响主流程


灰度阶段如何监控


灰度阶段的日志监控过程


灰度监控主要从开始灰度到灰度99%阶段保持一定频率的监控发送报告


为什么是发送分析结果报告?

1. 现在报警太多且噪音太多,相关技术人员很容易下意识的忽略掉,

2. 发送监控分析报告的是增加一种仪式感,让大家能重视这个报告结果内容,

3. 部分问题通过报警发现比较难,而通过分析报告能明显发现

4. arms系统已具有成熟报警能力~已经配置上了相关告警,我们重点做分析报告




带你读《2022技术人的百宝黑皮书》——前端质量之灰度监控的有效实践(2) https://developer.aliyun.com/article/1242721?groupCode=taobaotech

相关文章
|
18天前
|
机器学习/深度学习 人工智能 前端开发
探索未来前端技术发展趋势
随着科技的不断进步,前端技术在不断演进。本文将探索未来前端技术的发展趋势,并讨论其对用户体验、开发效率和安全性的影响。
|
2天前
|
前端开发 JavaScript 数据管理
引领潮流:React框架在前端开发中的革新与实践
React,始于2013年,由Facebook驱动,以其组件化、Virtual DOM、单向数据流和Hooks改革前端。组件化拆分UI,提升代码复用;Virtual DOM优化渲染性能;Hooks简化无类组件的状态管理。庞大的生态系统,包括Redux、React Router等库,支持各种需求。例如,`useState` Hook在计数器应用中实现状态更新,展示React的实用性。React现已成为现代Web开发的首选框架。【6月更文挑战第24天】
23 2
|
7天前
|
缓存 监控 前端开发
前端性能监控:从Lighthouse到Real User Monitoring
**前端性能监控关乎用户体验。Lighthouse是自动化审计工具,评估网页性能、最佳实践、可访问性等,通过CLI或Chrome DevTools使用。RUM则实时监控用户与网站互动,收集性能数据。两者结合,从开发到生产环境,全面优化前端性能,包括资源加载、代码优化、网络性能和用户体验。使用Lighthouse和RUM数据,结合CI/CD,持续改进并设定性能预算,采用SSR、Service Worker、Code Splitting等高级策略,确保高性能和用户满意度。**
13 2
|
10天前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
17 3
|
1月前
|
缓存 资源调度 Rust
前端效率提升实践之路
在一个B端前端项目中,开发团队面临开发效率低、交付质量和可维护性差的问题。为了解决这些问题,他们以“提效”为主题,展开了项目治理。首先,他们优化了发布和编译过程,通过更换包管理工具、减少不必要的包、使用缓存策略等方法,显著缩短了发布和编译时间。其次,团队致力于沉淀可复用物料,创建了高度配置化的组件,通过VSCode插件助手自动化配置,提高了代码复用性和开发效率。此外,他们还改进了研发流程,制定了前端、后端和产品的规范,以减少沟通成本和提高接口质量。通过这些措施,团队成功提升了开发效率,并降低了代码维护成本。
55 3
前端效率提升实践之路
|
10天前
|
缓存 前端开发 JavaScript
前端性能优化实践与工程化
前端性能优化实践与工程化
|
14天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
24 2
|
16天前
|
前端开发 JavaScript Java
【前端技术】 ES6 介绍及常用语法说明
【前端技术】 ES6 介绍及常用语法说明
18 4
|
19天前
|
边缘计算 前端开发 Android开发
未来趋势下的前端开发:跨平台技术的崛起
随着技术的不断演进,前端开发领域也在迅速变化。本文探讨了未来趋势下前端开发的发展方向,着重分析了跨平台技术在前端开发中的崛起,并探讨了其对开发者和行业的影响。
|
19小时前
|
编解码 自然语言处理 算法
技术心得:前端学HTTP之字符集
技术心得:前端学HTTP之字符集