前端安全生产，其实就是围绕前端研发全链路高质量交付这个问题，通过一系列自动化流程机制，保障线上业务稳定运行
开发阶段
- 单元测试（通过率、覆盖率等）
- 静态代码扫描（eslint、csslint工具、或者基于webpack的一些插件）
- CI持续集成
发布阶段
- UI自动化回归，在发布时的卡口验证
- 灰度发布体系以及相应的监控指标
- 业务指标监控
在灰度发布期间，监控会重点关注前端灰度环境和线上环境对⽐后⻚⾯访问速度变化、JS 错误率变化、新出现的 JS 异常以及 API 成功率变化，⾃动⽣成灰度监控报告，同时也会通过灰度流量⻚⾯覆盖率、API 覆盖率来判定是否需要延⻓灰度时⻓或加⼤灰度流量⽐例。
线上阶段
- 线上巡检（发现关键链路的404、死链、天窗、截图比对ui异常等问题）
- 覆盖前后端的监控（页面运行时错误监控、业务打点监控、白屏监控……）
- 线上故障后的秒级回滚止血方案
以上这套基础设施，是目前相对比较完善的前端安全生产保障能力。
痛点：
- 覆盖率：用例的覆盖率无法通过人肉的方式去弥补
- 维护成本：当业务快速迭代时，我们如何保障低成本的方式去维护这些用例
- 小流量场景：有些小流量、高成功率的场景，我们无法在灰度阶段依赖线上流量发现问题
一句话解释流量回放：基于用户真实行为和接口数据的离线沙箱回放系统，用以在开发阶段验证代码正确性的工具
- 用户行为采集
- 用户数据采集
- 回放平台
- 回放沙箱
- 用例生成
- 回放验证
容器：整个沙箱的构建依赖于JWebDriver和mocha
资源代理：利用代理技术，高度控制沙箱容器的网络状态。
服务端的故障演练大致分为四个象限
- 单机分布式问题
- 软硬件问题
- 进程内外的问题
- 人为、流程不完善的问题
那么在做演练的过程中，我们如何设计一次演练？ 整个过程分为三部分：
- 演练前的准备,主要明确演练的场景，以及评估下该场景是否可被演练。如果可以被演练，那么它稳定的状态（你可以理解为正确运行的状态）是什么样的？演练时爆炸半径是否可控，是否会对线上造成资损等等。
- 演练中的执行,演练中主要考虑的问题就是整个演练如何被初始化，以及初始化后如何自动化执行，是否能一键启
- 演练后的复盘,故障发生后，需要能被复现，并且可恢复的操作。演练后我们要考虑的就是，这次演练有没有场景沉淀，复盘结果是怎么样的
总体说来：
依赖流量回放来做故障的自动化发现&预防。通过线上sdk接入，采集用户的行为、数据、执行环境后，在预发环境来检验新的代码是否符合我们的预期。
依赖攻防演练，用最少的资源，在整个开发的链路上，检验各基建的有效性、锻炼开发同学的故障应急能力。同时，也期望攻防演练，能够撬动更多业务侧的同学来一起做好具有自己业务特性的稳定性基建。
- “在标签栏上可以通过滚动来访问想要的标签页”实验性功能。此功能firefox早已支持。
- DevTools现在更好地支持CSS角度调试！
- 模拟不受支持的图像类型
- 在“存储”窗格中模拟存储配额大小
- 在“网络”面板中报告CORS错误
- 从“Service Worker”窗格中打开“网络”面板
- 网络面板中的新复制选项(复制网络请求的属性值,复制网络启动器的堆栈跟踪)
- Wasm调试更新(鼠标悬停时预览Wasm变量值,断点调试)
- 在“元素”面板中突出显示伪元素
增加路由优先级，在旧版的 Vue Router 中需要通过路由声明的顺序来保证这个行为，而新版则无论你怎样放置，都会按照得分系统来计算该匹配哪个路由。 甚至专门有 Path Ranker 这个网页来帮助你计算路由的优先级得分。
Vue Router 能够和浏览器进行以下更高级的整合。
支持async await
作为参数传递给 router.push() 时，不需要做任何编码，在你使用 $route 或 useRoute()去拿到参数的时候永远是解码（Decoded）的状态