作者：Rui
背景
页面稳定性在前端开发中非常重要，为此我们内部研发了一套前端异常监控系统，它能监听绝大部分的异常。前端异常监听系统的实现可以在网上搜到非常多实现方案，其基本原理就是在网页中注入一段 JavaScript 代码，通过各种异常事件监听钩子捕获异常，然后上报到服务器，进行相关告警。
虽然前端异常监控能捕获大部分的异常，但是当发生非代码引起的故障时，我们是察觉不到的，例如：
- 域名过期无法访问
- 服务器故障无法访问
- 资源超时
- 页面被微信封禁
- 代码逻辑错误，页面中没报错，但是白屏或者UI错乱
前四种都是因为网页（包括异常监控脚本）都运行不起来，所以就捕获不到异常。所以需要有“一双眼”帮我们盯着页面，以用户视角来看页面是否有问题。
需求分析
配置 + 监控 + 告警：
- 能配置需要监控的网页信息。
- 监听非代码引起的故障，如访问错误、白屏、页面UI错乱等；可扩展其他的检测项目，如微信封禁检测、慢请求检测、资源大小检测等。
- 发生异常时告警通知相关开发人员。
整体技术方案
初步想法
配置
开发后台配置页面。
监控
作为用户，判断页面是否有问题最直观的就是页面是否加载成功、页面是否布局错乱（页面的交互逻辑是否有问题暂且不讨论）。
根据这些，我们对需求有初步的想法：
- 定时对页面进行巡查，巡查时对页面进行全屏截图
- 将截图与一张正确的图（我们称它为预期图片）进行对比，得到它们的差异值
- 设置一个阈值，当差异值大于该值时，可以认为页面有问题
告警
利用企微通知、钉钉、电话或短信等方式进行通知。
技术调研
在项目动工前，先调研下市面上的巡检平台的案例，我们参考了两个项目：得物前端巡检平台的建设和应用、web-see 。
根据上一步的“初步想法”，“配置”和“告警”都是比较容易实现的，我们主要需要实现“监控”的“定时巡检”、“页面截图”和“图像对比”功能。
- 定时巡检
采用 Egg.js 作为服务的框架，定时任务即可完美解决需求。
- 页面截图
对于页面截图，我们可以使用“Web应用程序自动化测试工具”来实现。
市面上的Web应用程序自动化测试工具百花齐放，但这里只对比分析目前比较流行的两种自动化解决方案：
| 功能对比 | Puppeteer | Selenium WebDriver |
|---|---|---|
| 截图 | 页面截图和PDF导出 | 页面截图 |
| 请求 | 可拦截、可捕获 | 使用 Selenium Wire，但它只有python版本 |
| 开发语言 | JavaScript | 多语言：Python、Java、Ruby、JavaScript等，但有些插件没有 JavaScript 版本 |
| 性能检测 | 需要使用谷歌提供的性能检测插件 Lighthouse | 官方不建议使用Selenium和WebDriver进行性能检测 |
| 执行效率 | 无头模式运行效率快 | 相对较慢 |
| 浏览器支持 | Chrome | 跨平台，支持Chrome、Mozilla、Safari、IE、Opera 等浏览器 |
| 使用成本 | 使用成本较低，更贴近日常开发调试，对前端开发人员比较友好 | 官方文档写得不好，上手比较难 |
Puppeteer 和 Selenium 是两种流行的浏览器自动化解决方案，它们有各自的特点和功能。
Puppeteer 的主要特点和功能包括：
- Puppeteer 是一个 Node.js 库，提供了高级 API 通过 DevTools 协议控制 Chrome 或 Chromium
- Puppeteer 只专注于 Chrome、Chromium 和 Javascript
- Puppeteer 提供了更多的对于 Chrome 浏览器的控制能力
- Puppeteer 的无头模式运行效率快
- 可以实现 web 爬虫、Web 页面截图并导出 PDF、Web 页面性能抓取、分析
Selenium 的主要特点和功能包括：
- Selenium 是目前使用最广泛的 Web 应用程序自动化测试的开源框架
- Selenium 支持多种浏览器和语言，包括 IE（7, 8, 9, 10, 11），Edge，Mozilla Firefox，Safari，Google Chrome，Opera 等
- Selenium 提供了跨浏览器自动化支持
- Selenium 和 Appium 提供移动自动化
- 使用 Selenium Grid 可以并行运行测试
综合使用成本、执行效率等因素，我们决定采用 Puppeteer 作为本次需求的方案。
- 图像对比
图像对比的工具库也有很多，根据“必应”提供的方案，做以下对比分析：
| 库名 | 描述 | 其他说明 | 大小（未压缩） | github star |
|---|---|---|---|---|
| pixelmatch | 这是一个最小、简单、高效的 JavaScript 库，用于像素级图像对比。它被广泛用于回归测试和对比不同的图像算法。 | 无依赖，可生成差异图像，对比的图像尺寸必须相等；得到的结果是二者的差异像素的总数 | 16.2k | 5.5k |
| Looks-same | 这是一个 Node.js 库，用于比较 PNG 图像，考虑到人类的颜色感知。它特别为 gemini 实用程序的视觉回归测试的需求创建，但也可以用于其他目的。 | 专门的图像对比库，支持丰富的对比规则：多图片格式、严格对比、宽松对比、设置像素比、插入符、抗锯齿、差异边界、生成差异图像、对比颜色；直接得到结果为二者是否相同；制定对比标准比较困难 | 55k | 560 |
| Resemble.js | 这个库可以分析和比较图像，生成两张图像之间差异的可视化表示。 | node 环境依赖 node-canvas，它的基本实现思路可以理解为，首先将图片转为canvas，然后获取其图像像素点，之后对每个像素点进行一次比对 | 50.8k | 4.4k |
| gm | 这是一个 GraphicsMagick 和 ImageMagick 的 Node.js 封装。这两个工具都是强大的图像处理工具，可以进行各种图像操作，包括对比。 | 有其他依赖，图像处理功能丰富，包括对比、组合、拼接 | 121k | 6.9k |
| sharp | 这是一个高性能的 Node.js 库，用于调整 JPEG、PNG、WebP 和 TIFF 图像的大小。虽然它主要用于调整图像大小，但它也提供了一些基本的图像处理功能，包括提取颜色信息，这可能对图像对比有所帮助。 | 提供比较丰富的图像处理功能 | 610k | 26.4k |
我们分别对它们进行了上手体验，从测试结果、包体大小和使用难度综合考虑，pixelmatch 比较合适，因为它的对比结果是差异像素的总数，是最直观的数据。
技术选型
- 前端框架
- Egg.js
- 主要扩展工具/库
- Puppeteer：运行页面并截图
- pixelmatch：图像对比工具
- 前端构建工具
- docker
功能拆解
根据前面的调研与分析，我们继续对系统进行功能上的丰富，梳理出整个系统的主要流程，如下：
将系统按功能模块拆分：
| 功能模块 | 功能子项 |
|---|---|
| 管理后台 | 1. 巡检页面列表页 2. 巡检日志列表页 |
| 巡检器（巡检服务） | 1. 访问不通检测白屏检测 2. UI错乱检测 3. 其他检测（如微信封禁检测、慢请求检测、资源大小检测等） 4. 收集网页信息（如：错误信息、请求信息、日志打印等） |
| 消息通知 | 1. 异常问题告警 2. 定期推送巡检报告 |
| 数据报表 | 1. 巡检汇总数据报表 2. 每日巡检趋势图 3. 每日任务趋势图 4. 每日异常趋势图 |
兼容降级方案
服务独立部署，崩溃和排队都不影响其他服务运行。
技术实现
由于篇幅原因，技术实现将在下篇展示。
