nodejs抓取动态网页(1.为什么需要一个前端监控系统？技术选型监控的意义)

　　nodejs抓取动态网页(1.为什么需要一个前端监控系统？技术选型监控的意义)

　　1. 为什么需要前端监控系统

　　通常大型web项目中的监控系统很多，比如后端服务API监控、接口存活、调用、延迟等监控，一般用于监控后端接口数据层面的信息。而对于一个大型的网站系统，从后端服务到前端展示会有很多层：内网VIP、CDN等。

　　但是，这些监控并不能准确反映用户看到的前端页面的状态，例如：页面调用第三方系统数据失败、模块加载异常、数据错误、天窗空白等。

　　这时候就需要从前端DOM展示的角度分析采集用户真正看到的东西，从而检测页面是否有异常问题。

　　2. 监控系统需要解决的问题

　　一般页面出现以下问题时，您需要及时通过邮件或短信报告，通知相关人员修复问题。

　　3. 技术选型

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

　　既然监控和测试的本质是一样的，我们就可以用测试来制作监控系统。在自动化测试技术遍地开花的时代，有很多有用的自动化工具。我们只需要集成这些自动化工具供我们使用。

　　节点

　　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 的用途非常广泛，比如网络监控、网页截图、无需浏览器的网页测试、页面访问自动化等。

　　为什么不是硒

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

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

　　4. 架构设计架构概述

　　架构如下图所示。

　　（点击放大图片）

　　架构简介

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

　　应用层面的垂直划分，实现了应用的分布式部署，提升了处理能力。在后期，性能优化、系统改造和扩展等也可以提高简单性。

　　5. 解决方案（1）前台规则条目

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

　　常规监测

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

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

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

　　这样做的好处是，输入规则的人只需要了解一点DOM选择器的知识就可以上手，而我们通常把它交给测试工程师来完成规则的输入。

　　高级监控

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

　　可用性监控

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

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

　　页面引入了监控脚本，用于采集页面产生的错误事件信息，并自动上报给后端服务。在系统中，可以汇总所有错误信息，以及对应的客户端浏览器版本、操作系统、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左右。 所以为了防止并发引起的问题，我们选择使用消息队列来避免高并发导致服务不可用。

　　类消息队列的实现

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

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

　　长时处理器

　　长期持久化处理器是作为消费规则队列*敏*感*词*生成的消息队列。

　　长期连续加工实现

　　在长期持久化处理器的具体实现中，我们充分利用了JavaScript的setInterval方法，不断的获取疲惫的消息队列的内容发送给规则转换器，再转发给负载均衡调度器。之后，返回的结果将被统一处理，例如电子邮件或短信报警。

　　应用程序接口

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

　　PhantomJS 服务

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