nodejs抓取动态网页(为什么需要一个前端监控系统解决的问题和解决办法？)

　　nodejs抓取动态网页(为什么需要一个前端监控系统解决的问题和解决办法？)

　　本文首发于infoQ及“前端之巅”微信公众号，微信群直播记录

　　感谢infoQ前端最后的同学组织校对文章，以及微信群直播的组织策划

　　为什么需要前端监控系统

　　通常大型Web项目中的监控有很多，比如后端服务API监控，接口存活、调用、延迟等监控，这些一般用于监控后端接口数据层面的信息。而对于一个大型的网站系统来说，从后端服务到前端展示会有很多层：内网VIP、CDN等，但是这些监控并不能准确反映前端的状态——用户看到的最终页面，如：页面调用第三方系统数据失败、模块加载异常、数据不正确、天窗空白等，这时候就需要对用户真正看到的内容进行分析采集前端DOM展示的视角，从而检测页面是否有异常问题

　　监控系统需要解决的问题

　　一般当页面出现以下问题时，您需要通过邮件或短信通知相关人员解决问题

　　必须有触发报警时的场景快照，才能重现问题

　　技术选型

　　监控和回归测试的含义本质上是一样的。它们都对上线的功能进行回归测试，但不同的是监控需要长期的、可持续的、循环的回归测试，上线后只需要进行一次测试。返回

　　由于监控和测试的本质是一样的，我们可以将测试作为一个监控系统。在自动化测试技术遍地开花的时代，有很多有用的自动化工具，我们只需要整合这些自动化工具就可以使用了。

　　节点

　　NodeJS是一个JavaScript运行环境，非阻塞I/O和异步，事件驱动，这几点对于我们构建基于DOM元素的监控非常重要

　　PhantomJS

　　PhantomJS 是一个基于 webkit 的浏览器引擎，可以使用 JavaScript API 来模拟浏览器操作。它使用 QtWebKit 作为浏览器核心，使用 webkit 来编译、解释和执行 JavaScript 代码。换句话说，你可以在 webkit 浏览器中做的任何事情，它都能做

　　它不仅是一个隐形浏览器，还提供CSS选择器，支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，还提供处理文件I/O的操作。PhantomJS 用途广泛，如网络监控、网页截图、无浏览器网页测试、页面访问自动化等。

　　为什么不是硒

　　做自动化测试的同学一定知道Selenium。可以使用Selenium在浏览器中执行测试用例，Selenium对各种平台和常用浏览器的支持比较好，但是Selenium上手稍微难一些，需要在服务器端安装浏览器才能使用Selenium

　　考虑到监控的主要任务是监控而不是测试。系统不需要过多考虑兼容性，监控功能比较单一，主要是针对页面的功能回归测试，所以选择了PhantomJS

　　架构设计架构概述

　　架构简介

　　对于DOM监控服务，在应用层面垂直划分：

　　应用层面的垂直划分，实现了应用的分布式部署，提升了处理能力。后期做好表现也方便

　　改造、系统改造扩容等。

　　解决方案前端规则入口

　　这是一个独立的Web系统，系统主要用于采集用户输入的页面信息，页面对应的规则，显示错误信息。通过调用后端页面爬取服务完成页面检测任务，系统可以创建三种类型的检测页面：定期监控、高级监控、可用性监控

　　常规监测

　　输入一个页面地址和几个检测规则。注意这里的检测规则。我们将一些常用的检测点抽象为一个类似于测试用例的句子。每个规则用于匹配页面上的一个 DOM 元素，并使用 DOM 元素的属性来匹配期望。如果匹配失败，系统会产生错误信息，由报警系统处理。

　　一般有几种匹配类型：长度、文本、HTML、属性

　　处理器类似于编程语言中的运算符：大于、大于或等于、小于、小于或等于、等于、正则

　　这样做的重点是，进入规则的人只需要了解一点 DOM 选择器的知识即可上手。在我们内部，通常是交给测试工程师来完成规则的录入。

　　高级监控

　　主要用于提供高级的页面测试功能。通常，有经验的工程师会编写测试用例。这个测试用例写起来会有一定的学习成本，但是可以模拟网页操作，比如点击、鼠标移动等事件来准确捕获页面信息

　　可用性监控

　　可用性监控侧重于实时监控更严重的问题，例如页面可访问性和内容正确性。通常我们只需要在程序中启动一个Worker就可以获取页面的HTML来检查匹配结果，所以我们选择NodeJS来做异步页面爬取队列来高效快速的完成这种网络密度。任务

　　主动报错页面脚本执行错误监控

　　页面引入了监控脚本，采集页面产生的错误事件返回的错误信息，并自动上报给后端服务。在系统中，可以汇总所有错误信息，以及对应的客户端浏览器版本、操作系统、IP地址等。

　　主动举报页面

　　该功能需要相应的前端工程师调用代码中的报错API主动提交错误信息。使用的主要场景有：页面异步服务延迟无响应、模块降级主动通知等，监控脚本提供了几个简单的API来完成这个任务

　　// error 方法调用后立即上报错误信息并发出邮件、短信通知

errorTracker.error('错误描述')

// info 方法调用后立即上报信息，并在单位时间内仅产生一条邮件、短信通知

errorTracker.info('信息描述')

// log 方法调用后由报错检测是否达到设置阀值，最终确认是否报错

errorTracker.log('日志信息')

　　后端页面抓取服务

　　由于京东很多页面都是异步加载的，首页、单品等系统有很多第三方异步接口调用。后端程序抓取的页面数据是同步的，无法检索到动态JavaScript渲染内容。所以你必须使用像 PhantomJS 这样可以模拟浏览器的工具

　　对于日常监控，我们使用PhantomJS模拟浏览器打开页面进行抓取，然后将监控规则解析成JavaScript代码片段执行并采集结果

　　高级监控 我们使用 PhantomJS 打开页面，将 jasmine、mocha 等前端 JavaScript 测试框架注入页面，然后在页面上执行相应的输入测试用例并返回结果

　　常规队列*敏*感*词*

　　规则队列*敏*感*词*会将采集的规则转换成消息队列，然后交给长期连续处理器处理一次

　　为什么使用类似的消息队列处理方式？

　　这与 PhantomJS 的性能是分不开的。从很多实践中发现，PhantomJS 不能很好地进行并发处理。当并发过多时，会导致CPU过载，导致机器宕机。

　　本地环境下虚拟机并发测试，数据不理想，限制基本在ab -n 100 -c 50左右。 所以为了防止并发引起的问题，我们选择使用消息队列来避免高并发导致服务不可用

　　类消息队列的实现

　　这里我们通过调用内部的分布式缓存系统来生成消息队列。队列的产生其实可以参考数据结构-queue。最基本的模式是在缓存中创建一个KEY，然后按照队列数据结构的模式插入和读取数据

　　当然，类消息队列的中间介质可以根据自己的实际情况选择，也可以使用原生内存来实现。这可能会导致应用程序和类似消息的队列争夺内存

　　长时处理器

　　长期连续处理器是消费规则队列*敏*感*词*生成的消息队列。

　　长期连续加工实现

　　在长期持久化处理器的具体实现中，我们使用了JavaScript的setInterval方法，不断的获取累了的消息队列的内容发送给规则转换器，再转发给负载均衡调度器。然后对返回的结果进行统一处理，如邮件或短信报警

　　应用程序接口

　　PhantomJS服务可以作为公共API提供给客户端处理测试需求，通过HTTP调用API。在API处理中，需要提供HTTP数据到规则和PhantomJS的转换。从而将 HTTP 数据演化为规则转换器

　　PhantomJS 服务

　　PhantomJS 服务是指将 PhantomJS 与 HTTP 服务和子流程结合起来的服务处理