本文为8月31日，『前端之巅』群在线分享活动总结整理而成，转载请在文章开头处注明来自『前端之巅』公众号。加群学习请关注『前端之巅』公众号并发送“加群”。本文作者为周琪力、王备，策划为韩笑跃。
周琪力，京东网站前端工程师，主要负责京东商品详情页前端系统的架构和开发，网站监控系统的设计与开发。有丰富的前端开发经验，平时工作中主要写 JavaScript、NodeJS 偶尔写点Python。
王备，京东网站前端工程师。目前主要负责京东列表页前端和监控系统后端服务架构设计与接口开发，主要使用 JavaScript、Node.js 和 PHP、ngx_lua。
1. 为什么需要一个前端监控系统通常在一个大型的 Web 项目中有很多监控系统，比如后端的服务 API 监控，接口存活、调用、延迟等监控，这些一般都用来监控后台接口数据层面的信息。而且对于大型网站系统来说，从后端服务到前台展示会有很多层：内网 VIP、CDN 等。
但是这些监控并不能准确地反应用户看到的前端页面状态，比如：页面第三方系统数据调用失败，模块加载异常，数据不正确，空白开天窗等。
这时候就需要从前端 DOM 展示的角度去分析和收集用户真正看到的东西，从而检测出页面是否出现异常问题。
2. 需要监控系统解决的问题页面通常出现以下问题时需要及时邮件、短信上报通知相关人员修复问题。
返回错误（50x, 40x）无法打开
模块加载失败
页面乱码
数据正确性
现场快照，复现问题
3. 技术选型监控的意义和测试的意义在本质上是一致的，都是对已上线功能进行回归测试，但不同的是监控需要做长期的可持续可循环的回归测试，而测试仅仅需要在上线之后做一次回归测试。
既然监控和测试的本质一致，那我们是完全可以采用测试的方式来做监控系统的。在自动化测试技术遍地开花的时代，不乏很多好用的自动化工具，我们仅仅需要把这些自动化工具进行整合为我们所用即可。
• NodeJS - 特别适用于网络密集型任务 • PhantomJS - 模拟无界面的浏览器，提供丰富的内核交互 API
NodeJS
NodeJS 是一个 JavaScript 运行环境，非阻塞 I/O 和异步、事件驱动，这几点对于我们构建基于 DOM 元素的监控是非常重要的。并且 NodeJS 支持非组塞 I/O 和异步、事件驱动，这点对于我们构建基于 DOM 元素的监控是比较重要的。
PhantomJS
PhantomJS 是一个基于 webkit 的 JavaScript API。它使用 QtWebKit 作为它的核心浏览器，使用 webkit 来编译解释执行 JavaScript 代码。任何你可以在基于 webkit 浏览器做的事情，它都能做到。
它不仅是个隐形的浏览器，提供了诸如 CSS 选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG 等，同时也提供了处理文件 I/O 的操作，从而使你可以向操作系统读写文件等。PhantomJS 的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。
为什么不是Selenium
做自动化测试的同学肯定都知道 Selenium。可以使用 Selenium 将测试用例在浏览器中执行，而且 Selenium 对各种平台和常见浏览器支持比较好，但是 Selenium 上手难度系数略高，而且使用Selenium 需要在服务器端安装浏览器。
考虑到监控主要任务在监控不在测试。系统并不需要太多考虑兼容性，而且监控功能相对单一，主要对页面进行功能上的回归测试，所以选择了 PhantomJS。
4. 架构设计架构概览
架构如下图所示。
架构简述
对于 DOM 监控服务，在应用层面上进行了垂直划分：
• 规则管理系统。 • 规则队列生成器。 • 长时持续处理器。 • PhantomJS 服务。 • 服务化 API。
在应用层面上进行的垂直划分可以对应用做分布式部署，提高处理能力。后期再性能优化、系统改造扩展等方面也能提高简易性。
5. 解决方案（1）前台规则录入
这是一个独立的 Web 系统，系统主要用来收集用户录入的页面信息、页面对应的规则、展示错误信息。通过调用后端页面抓取服务来完成页面检测的任务，通过系统可以创建三种类型的检测页面：常规监控、高级监控、可用性监控。
常规监控
录入一个页面地址，和若干检测规则。注意这里的检测规则，我们把常用的一些检测点抽象成了一条类似测试用例的语句。每条规则用来匹配页面上的一个 DOM 元素，用 DOM 元素的属性来和预期做匹配，如果匹配失败系统就会产生一条错误信息，后续交由报警系统处理
匹配类型一般有这几种：长度、文本、HTML、属性 处理器 类似编程语言中的操作符：大于、大于等于、小于、小于等于、等于、正则。
这样做的好处就是，录入规则的人只要了解一点 DOM 选择器的知识就可以上手操作了，在我们内部通常是交由测试工程师统一完成规则的录入。
高级监控
主要用来提供高级页面测试的功能，一般由有经验的工程师来撰写测试用例。这个测试用例写起来会有一些学习成本，但是可以模拟 Web 页面操作，如：点击、鼠标移动等事件。从而做到精确捕捉页面信息。
可用性监控
可用性监控侧重于对页面的可访问性、内容正确性等比 严重的问题 的即时监控。通常这类页面我们只需要在程序里面启一个 Worker 不断的去获取页面 HTML 就可以对结果进行检测匹配了，所以我们选择了 NodeJS 来做异步的页面抓取队列，高效快速的完成这种网络密集型任务。
（2）主动错误上报
页面脚本执行错误监控
页面引入一段监控脚本来收集页面产成 error 事件的信息，自动上报给后端服务，在系统里面可以汇总所有报错信息，以及对应的客户端浏览器版本、操作系统、IP 地址等。
页面主动上报
这个功能需要对应的前端工程师在代码中调用错误上报 API，来主动提交错误信息。主要使用的场景有，页面异步服务延时无响应、模块降级兜底主动通知等。监控脚本提供几个简单的 API 来完成这项任务。
// error 方法调用后立即上报错误信息并发出邮件、短信通知
errorTracker.error('错误描述')
// info 方法调用后立即上报信息，并在单位时间内仅仅产生一条邮件、短信通知
errorTracker.info('信息描述')
// log 方法调用后由报错检测是否达到设置阀值，最终确认是否报错
errorTracker.log('日志信息')（3）后端页面抓取服务
由于京东很多页面内容是异步加载的，像首页、单品等系统有许多第三方异步接口调用，使用后端程序抓取到的页面数据是同步的，并不能取到动态的 JavaScript 渲染的数据，所以就必须使用像 PhantomJS 这种能模拟浏览器的工具。
常规监控我们使用 PhantomJS 模拟浏览器打开页面进行抓取，然后将监控规则解析成 JavaScript 代码片段执行收集结果。
高级监控我们使用 PhantomJS 打开页面后向页面注入像 jasmine, Mocha 等类似的前端 JavaScript 测试框架，然后在页面执行对应的录入测试用例并返回结果。
规则队列生成器
规则队列生成器会将规则系统采集的规则转化类成消息队列，然后交由长时持续处理器依次处理。
为什么采用类消息队列的处理方式？
这和 PhantomJS 的性能是密不可分的，由多次实践发现，PhantomJS 并不能很好地进行并发处理，当并发过多，会导致 CPU 过载，从而导致机器宕机 在本机环境下的虚拟机中进行并发测试，数据并不理想，极限基本在 ab -n 100 -c 50 左右。 所以为了防止并发导致的问题，就选择了使用类消息队列来避免因为并发过高导致的服务不可用。
类消息队列的实现
我们这里通过调用内部的分布式缓存系统生成类消息队列，队列的生成其实可以参考数据接口–队列。最基本的模型就是在缓存中创建一个 KEY ，然后根据队列数据结构的模式进行数据的插入和提取。
当然，类消息队列的中间介质可根据你实际的条件来选择，当然你也可以使用本机内存实现。这可能会导致应用和类消息队列竞争内存。
长时持续处理器
长时持续处理器是要功能就是消费规则队列生成器生成的类消息队列。
长时持续处理实现
在长时持续处理器的具体实现中，我们充分利用了 JavaScript 的 setInterval 方法来持续获取累消息队列的内容下发给规则转化器，然后转发给负载均衡调度器。之后再对返回的结果进行统一处理，比如邮件或者短信报警。
API
PhantomJS 服务可以做为公共 API 提供给客户端进行测试需求的处理， API 通过 HTTP 方式调用。在 API 的处理上需要提供 HTTP 数据到规则和 PhantomJS 的转换。从而又演化出了 HTTP 数据到规则转换器。
PhantomJS 服务
PhantomJS 服务是指将 PhantomJS 结合 HTTP 服务和子进程进行服务化的处理 首先、启动 HTTP 服务，然后将长时处理器下发的规则进行进一步转化，转化后启动子进程，HTTP 服务会监听子进程的处理结果，并在处理完毕之后返回。
(4)报警系统
报警系统我们目前使用的是京东内部自的统一监控平台 UMP，通过调用平台提供的一些 API 来实现报警邮件与短信通知。
如何根据报警到具体页面？
在用户通过监控管理系统录入规则后，监控系统会根据 UMP 规则针对用户录入的页面生成 UMP 使用的 key。当长时持续处理器发现 PhantomJS 服务返回的结果标示为异常后，就会使用 key 来进行日志记录。
何时出发报警？
报警主要分为了短信和邮件报警。邮件报警是在每条异常之后就会发给指定系统用户。短信则是根据异常次数来进行处理的，当异常次数过大，就会下发短信通知。
(5)部署
对于此系统部署是分为两大块进行的。因为机器资源数量有限，没有将所有部分都单独部署。
规则管理系统以及规则队列生成器和持续处理器整合部署在一台机器上，PhantomJS服务部署在了其他的机器上。进程管理使用了著名的PM2。这样就可以避免自己在开发类似的部署功能。PM2 是一个带有负载均衡功能的NodeJS应用的进程管理器。可充分利用CPU，并保证进程永远都存活。
PM2 特性：
• 内建负载均衡（使用 Node cluster 集群模块）。 • 无缝重启类似 nginx reload。 • 具有 Ubuntu 和 CentOS 的开机启动脚本。 • 控制台检测。
不过在此次部署中，并没有使用内建负载均衡的特性，没用通过集群的方式部署代理。仅仅使用了后台运行和 0 秒停机重载的特性
6. 总结与展望其实我们现在开发的这套监控系统并不复杂，只是合理的运用了一些现有的技术框架。抽象出来我们自己需要的一些功能。但却有效的达到了我们的预期功能，并且节省了很多之前需要人肉测试的时间成本。系统本身还有很多问题在待解决状态，比如报警系统的规则处理与阀值设定，JavaScript报错的准确过滤机制等，这些问题我们都会一一解决，并且未来的前端监控系统会成为一个平台，核心服务在后端爬取页面服务，应用端可以有多种形式，比如监控、测试工具等。
一些可以持续优化点：
监控系统虽然在应用层面进行了垂直划分，但是由于机器资源等限制，并没有进行单独功能的部署。这点可能会在后期的使用中进行优化。因为现在仅仅提供给本部门使用。
PhantomJS服务还需要进一步优化，以承载大并发，大处理量。提供成稳定的服务。协同开发业务线和测试业务线制定统一的规范，以达到优化的监控。
报警由于依赖于公司内部的UMP系统，所以并不是特别灵活，每次系统接入都需要用户去UMP系统接入。
QA环节
淀粉Q1：目前PhantomJS是后台运行，对于不同地区、不同网络环境、不同客户端环境的模拟是如何处理的？很多时候前端问题是在一些特定场景下出问题。
周琪力: 我们主要用来做监控，所以一般不考虑浏览器环境什么的。
淀粉Q2：对于前台dom的监控有在京东有比较成功的案例吗？
周琪力: 我们现在这套系统已经在线上了，像首页，单品，频道，全部分类这些都在用。一般来说。按页面接入三方系统数据的维度去添加监测规则即可
淀粉Q3：PhantomJS和Node之间的通信是通过buffer还是通过get post实现的
王备: 用http的话就是比较方便，如果任务时间过长可能就要考虑其它接口实现了。由于现在是将PhantomJS做为服务来部署，现在采用的post方式实现。
淀粉Q4：请问测试人员在后台配置规则的时候一个稍复杂带交互页面，需要配置多少规则才可实现合理监控。
周琪力: 这个规则主要看你页面里面的三方系统。一般三方系统多的规则相对多些。比如在单品页，像价格、促销、库存、推荐这些重要的数据源都会加一些规则。至少每个三方系统都有一个规则。
淀粉Q5：通过模拟浏览器像页面注入测试框架判定，请问注入动作是后端注入吗？假如是前端注入，前端脚本本身异常无法完成注入，如何判定？
王备: 测试框架是通过PhantomJS进行注入的，PhantomJS本身是可以检测是否成功注入所需要的脚本。也可通过监听控制台的error来进行一些其他的处理。
淀粉Q6：请问测试人员在后台配置规则的时候一个稍复杂带交互页面，需要配置多少规则才可实现合理监控。
周琪力:这个规则主要看你页面里面的三方系统。一般三方系统多的规则相对多些。比如在单品页，像价格、促销、库存、推荐这些重要的数据源都会加一些规则。至少每个三方系统都有一个规则。
淀粉Q7：在运行过程中监控平台有帮助到业务发现问题吗？主要是集中在那一块的问题？
王备： 有，像一些频道页上面开天窗，图片广告位空白。还有像一些页面状态码异常503之类的都有发现过问题
C淀粉Q8：请问可以简单描述一下一个数据源规则吗？检测数据是否正确是渲染在dom上之后的规则，还是对数据接口返回值直接做检测呢？这块实在没明白
王备：规则就是类似jQuery的选择器，然后通过注入的测试框架来处理，之后直接返回处理完毕的结果。
淀粉Q9：有关开源问题，请问这套系统未来会开源么？
周琪力:后台暂不会开源，因为一些功能还不是很完善。前台的规则录入系统可以考虑开源出来。
淀粉Q6：在实际使用中解决过哪些问题，能否举例说明？
王备:在实践中，我们针对异常需要保存现场，也就是网页快照，由于部门页面采用了滚动加载数据来展示页面，导致截图每次都不能截断完整的网页。经过实践我们修改了viewport的大小。来保证可以完整的获取页面。
淀粉Q7：现场快照是以什么方式保存的，如何通过现场快照定位bug？
王备:现场快照使用了PhantomJS的截图功能，保存了页面加载后的jpg图片。以便于通过报警邮件直接查看。快照属于定位bug的一种辅助。
淀粉Q7：感谢主讲人的精彩分享，那我想问一个问题，就是Node.js本身就是一个倾向于服务端的框架，那对纯前端的技术选型，能否讲解下纯前端的架构，比如说dojo，Angular, Angular2, ext等, 在页面展示端与Node这种倾向于服务端的区别？
周琪力:我们在这个系统里面并没有用到纯纯前端架构，这个并没有什么经验
B淀粉Q7：有没有监控首屏时间、白屏时间。以及如何定义首屏时间的？我了解的有通过截屏来对比截屏大小，首屏渲染程度来判断首屏渲染是否完成。我们这套监控系统是如何监控这些指标的。
周琪力:这些指标有点类似性能监控了，基本上我们只关心页面是否按期望加载完成。并没有细化到性能打开速度这个层面。
淀粉Q7：现场快照其实是在服务端来截图的，但是大部分时候用户的问题可能只是在用户的客户端会出现，监控系统能否解决这类很难复现的问题？
周琪力:快照是在 PhantomJS 里面做的，只有规则不匹配的时候才会生成页面截图，一般都是问题发生的那个时间点产生的。 PhantomJS 实际上也是一个实实在在的客户端。
查看图片长按二维码关注前 端 之 巅 紧 跟 前 端 发 展 共 享 一 线 技 术 不 断 学 习 进 步 攀 登 前 端 之 巅
