关键词：
1. 为什么需要一个前端监控系统
通常在一个大型的 Web 项目中有很多监控系统，比如后端的服务 API 监控，接口存活、调用、延迟等监控，这些一般都用来监控后台接口数据层面的信息。而且对于大型网站系统来说，从后端服务到前台展示会有很多层：内网 VIP、CDN 等。
但是这些监控并不能准确地反应用户看到的前端页面状态，比如：页面第三方系统数据调用失败，模块加载异常，数据不正确，空白开天窗等。
这时候就需要从前端 DOM 展示的角度去分析和收集用户真正看到的东西，从而检测出页面是否出现异常问题。
2. 需要监控系统解决的问题
页面通常出现以下问题时需要及时邮件、短信上报通知相关人员修复问题。
- 返回错误（50x, 40x）无法打开
- 模块加载失败
- 页面乱码
- 数据正确性
- 现场快照，复现问题
3. 技术选型
监控的意义和测试的意义在本质上是一致的，都是对已上线功能进行回归测试，但不同的是监控需要做长期的可持续可循环的回归测试，而测试仅仅需要在上线之后做一次回归测试。
既然监控和测试的本质一致，那我们是完全可以采用测试的方式来做监控系统的。在自动化测试技术遍地开花的时代，不乏很多好用的自动化工具，我们仅仅需要把这些自动化工具进行整合为我们所用即可。
- NodeJS - 特别适用于网络密集型任务
- PhantomJS - 模拟无界面的浏览器，提供丰富的内核交互 API
NodeJS
NodeJS 是一个 JavaScript 运行环境，并且 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系统接入。
感谢韩婷对本文的审校。
如何使用 NodeJS 在 AWS Lambda 上运行 PhantomJS
】如何使用NodeJS在AWSLambda上运行PhantomJS【英文标题】：HowdoIrunPhantomJSonAWSLambdawithNodeJS【发布时间】：2016-04-1106:02:56【问题描述】：在互联网上其他任何地方都没有找到有效的答案后，我提交了这个自问自答教程如何从AWSLambda上的... 查看详情
如何避免在 Puppeteer 和 Phantomjs 上被检测为机器人？
】如何避免在Puppeteer和Phantomjs上被检测为机器人？【英文标题】：HowtoavoidbeingdetectedasbotonPuppeteerandPhantomjs?【发布时间】：2019-01-1420:13:53【问题描述】：Puppeteer和PhantomJS很相似。我遇到的问题都发生在两者上，代码也相似。我想... 查看详情
京东个人中心——nodejs/ajax/html5/mysql爬坑之功能与数据分析
...ch服务器（php）和Web服务器（Node.js）。在前面我做过一个京东账户项目，那个是完全使用php和Ajax以及mysql数据库做到的前后端交互，现在我也要用Node.js和Ajax以及mysql数据库完成一个京东个人中心的项目练习 查看详情
phantomjs+nodejs+mysql数据抓取（2.抓取图片）
概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取（1.抓取数据）http://blog.csdn.net/jokerkon/article/details/50868880后进行的第二部分，请各位读者在看这篇博客之前先浏览上一篇，因为这里面有部分代码会沿用到上一部分的抓... 查看详情
京东云部署javaweb项目和搭建个人博客(代码片段)
...f1a;前端知识交流社区🧡多种源码领取：福利社区京东云部署Javaweb项目和京东云搭建个人博客引言（京东云部署Javaweb项目）安装jdk8安装MySQL数据库安装Tomact上传Javaweb项目引言（京东云搭建个人博客）准备... 查看详情
淘宝，天猫，京东都是谁创立的？
京东、淘宝都是购物网站，天猫是淘宝的一个平台。淘宝：淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。京东：是中国最大的自营式电商企业，2015年第一季度在中国自营式b2c电商市场的占有率为56.... 查看详情
前端和后端的作品
物业系统前台物业系统后台（PHP+Mysql+ajax全站开发） 京东首页个人网站 查看详情
使用 nodejs 和 mqtt 在网站上的实时内容
】使用nodejs和mqtt在网站上的实时内容【英文标题】：realtimecontentonwebsiteusingnodejsandmqtt【发布时间】：2017-01-1617:39:39【问题描述】：我正在使用nodeJs和express、express-handlebars和mqtt包。我最近正在尝试更新一个表格，该表格显示当前... 查看详情
nodejs之svg转图片下载方案
...svg转为png并下载的功能。所需Webkit和nodemodule简单介绍：phantomjs:一个基于WebKit的server端JavaScriptAPI，它基于BSD开源协议公布。PhantomJS无需浏览器的支持就可以实现对Web的支持。且原生支持各种Web标准，如DOM处理、JavaScript、CSS选择... 查看详情
这才是自学前端的正确姿势！（本人亲身经历，9个月拿到拼多多美团京东校招offer）
前言本人自2020年2月开始自学前端，本科是数学专业的，在此之前只接触过C语言，因此对于前端可谓是零基础，由于网上的学习路径鱼龙混杂，因此在中间自己也踩了一些坑。经过九个月的学习，最终在今... 查看详情
如果请求来自 VueJS，NodeJs Passport 执行 CORS 飞行前
...gy的NodeJS/Express后端。我使用外部身份提供程序和VueJs作为前端。如果我从浏览器（Chrome+I 查看详情
nodejs前端接口调试(代码片段)
和UI无关的逻辑用browser调有时不太方便，配置node命令行调试环境方法如下：cnpminstall@babel/core@babel/cli@babel/register@babel/polyfillcross-fetch/polyfill因为node作为commonjs的环境缺少一些browser的全局变量（如fetch等），因此需要装一些polyfill... 查看详情
在 AngularJS 和 Nodejs 之间共享代码
...布时间】：2014-09-2400:57:51【问题描述】：使用javascript在前端和后端之间共享代码的最佳方式是什么，特别是在nodejs和angularjs之间？问题是我们在后端和前端都使用了相同的enums和constantvalues，例如errorcodes。现在我们只是将每个更... 查看详情
如何在nodejs中前端js调用后台的对象
前端通常作为模板，后端负责数据。 前后端合作的主要目的，就是把后端产生的数据丢到前端的模板中。通常这一步有两种方式： 1.前端的模板交给后端处理，直接写到后端逻辑中，或者通过MVC框架整合成后端的相对... 查看详情
python怎么调用phantomjs程序
简单总结下一般来说有两种方式：一种像大家说的模拟浏览器环境用一些库来执行这些js相关的库大家都提到了但是这些库安装起来好像都很麻烦而且对内存和cpu的消耗比较大基本上不推荐还有一种就是手动分析这种我觉得是比... 查看详情
PhantomJS 主机文件更改或主机头
】PhantomJS主机文件更改或主机头【英文标题】：PhantomJShostfilechangeorhostheader【发布时间】：2016-04-1604:50:42【问题描述】：我想编写PhantomJS脚本，允许在网站的localhost版本和生产版本上进行测试（localhost需要解析主机名，不能在ip... 查看详情
前端用nodejs能做啥
Node.js到底是什么？Node.js是一个JavaScript的编译环境，当前端语言JavaScript在写完之后可以交给Node.js进行编译和解释，它的存在对于JavaScript有了质的飞跃。下面就是一个简单的Node.js命令#nodehello.js目前，Node.js在大部分领域都占有一... 查看详情
认识phantomjs
PhantomJS是一款webkit内核的headelsss的浏览器，使用QtWebkit,支持DOM操作、CSS选择器、JSON、Canvas和SVG，可以模拟浏览器的服务。 安装mac同学使用brewinstallcasperjs 可以做什么？1.Headless的网站集成测试可以和单元测试框架如Jasmine... 查看详情