来自 前端知识 2019-11-14 17:53 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

在京东网址前端监察和控制平台的最好实施

PhantomJS 和 NodeJS 在京东网站前端监控平台的最佳实践

2016/11/21 · JavaScript澳门金莎娱乐手机版 , · NodeJS, phantomjs

本文作者: 伯乐在线 - keelii 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

澳门金莎娱乐手机版 1

为什么需要一个前端监控系统

通常在一个大型的 Web 项目中有很多监控,比如后端的服务 API 监控,接口存活、调用、延迟等监控,这些一般都用来监控后台接口数据层面的信息。而且对于大型网站系统来说,从后端服务到前台展示会有很多层:内网 VIP、CDN 等。但是这些监控并不能准确地反应用户看到的前端页面状态,比如:页面第三方系统数据调用失败,模块加载异常,数据不正确,空白开天窗等。这时候就需要从前端 DOM 展示的角度去分析和收集用户真正看到的东西,从而检测出页面是否出现异常问题

PhantomJS是一款webkit内核的headelsss的浏览器,使用QtWebkit, 支持DOM操作、CSS选择器、JSON、Canvas和SVG,可以模拟浏览器的服务。

需要监控系统解决的问题

页面通常出现以下问题时需要使用邮件、短信通知相关人员修复问题

  • 状态码返回错误(50x, 40x)无法打开
  • 模块加载失败
  • 页面乱码
  • 数据正确性

触发报警时要有现场快照,以便复现问题

 

技术选型

监控的意义和回归测试的在本质上是一致的,都是对已上线功能进行回归测试,但不同的是监控需要做长期的可持续可循环的回归测试,而测试仅仅需要在上线之后做一次回归

既然监控和测试的本质一致,那我们完全可以采用测试的方式来做监控系统。在自动化测试技术遍地开花的时代,不乏很多好用的自动化工具,我们只需要把这些自动化工具进行整合为我们所用即可

  • NodeJS – 特别适用于网络密集型任务
  • PhantomJS – 模拟无界面的浏览器,提供丰富的内核交互 API

安装

NodeJS

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

mac同学使用 brew install casperjs

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

 

架构设计

可以做什么?

架构概览

澳门金莎娱乐手机版 2

  1. Headless的网站集成测试

架构简述

对于 DOM 监控服务,在应用层面上进行了垂直划分:

  • 规则管理系统
  • 规则队列生成器
  • 长时持续处理器
  • PhantomJS 服务
  • 服务化 API

在应用层面上进行的垂直划分可以对应用做分布式部署,提高处理能力。后期也方便做性能优化、系统改造扩展等

可以和单元测试框架如Jasmine、Mocha和WebDriver集成

解决方案

  1. 屏幕捕捉

前台规则录入

这是一个独立的 Web 系统,系统主要用来收集用户录入的页面信息、页面对应的规则、展示错误信息。通过调用后端页面抓取服务来完成页面检测的任务,系统可以创建三种类型的检测页面:常规监控、高级监控、可用性监控

可以捕捉的web页面

常规监控

录入一个页面地址,和若干检测规则。注意这里的检测规则,我们把常用的一些检测点抽象成了一条类似测试用例的语句。每条规则用来匹配页面上的一个 DOM 元素,用 DOM 元素的属性来和预期做匹配,如果匹配失败系统就会产生一条错误信息,后续交由报警系统处理

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

处理器 类似编程语言中的操作符:大于、大于等于、小于、小于等于、等于、正则

这样做的处就是,录入规则的人只要了解一点 DOM 选择器的知识就可以上手操作了,在我们内部通常是交由测试工程师统一完成规则的录入

澳门金莎娱乐手机版 3

3.网络监控 性能分析

高级监控

主要用来提供高级页面测试的功能,一般由有经验的工程师来撰写测试用例。这个测试用例写起来会有一些学习成本,但是可以模拟 Web 页面操作,如:点击、鼠标移动等事件从而做到精确捕捉页面信息

澳门金莎娱乐手机版 4

监控page loading支持输出HAR标准文件,支持使用YSlow和Jenkins进行全自动的性能分析。

可用性监控

可用性监控侧重于对页面的可访问性、内容正确性等比较 严重的问题 做即时监控。通常这类页面我们只需要在程序里面启一个 Worker 不断的去获取页面 HTML 就可以对结果进行检测匹配了,所以我们选择了 NodeJS 来做异步的页面抓取队列,高效快速的完成这种网络密集型任务

澳门金莎娱乐手机版 5

  1. 爬虫

  2. 运行自动化测试QA 

主动错误上报

 

页面脚本执行错误监控

页面引入一段监控脚本来收集页面产成 error 事件返回的错误信息,自动上报给后端服务,在系统里面可以汇总所有报错信息,以及对应的客户端浏览器版本、操作系统、IP 地址等

phantomjs的生态圈

页面主动上报

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

// error 方法调用后立即上报错误信息并发出邮件、短信通知 errorTracker.error('错误描述') // info 方法调用后立即上报信息,并在单位时间内仅产生一条邮件、短信通知 errorTracker.info('信息描述') // log 方法调用后由报错检测是否达到设置阀值,最终确认是否报错 errorTracker.log('日志信息')

1
2
3
4
5
6
7
// error 方法调用后立即上报错误信息并发出邮件、短信通知
errorTracker.error('错误描述')
// info 方法调用后立即上报信息,并在单位时间内仅产生一条邮件、短信通知
errorTracker.info('信息描述')
// log 方法调用后由报错检测是否达到设置阀值,最终确认是否报错
errorTracker.log('日志信息')
 

1. CasperJS:一个开源的导航脚本处理和高级测试工具

后端页面抓取服务

由于京东很多页面内容是异步加载的,像首页、单品等系统有许多第三方异步接口调用,使用后端程序抓取到的页面数据是同步的,并不能取到动态的 JavaScript 渲染的内容,所以就必须使用像 PhantomJS 这种能模拟浏览器的工具

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

高级监控我们使用 PhantomJS 打开页面后向页面注入像 jasmine, mocha 等类似的前端 JavaScript 测试框架,然后在页面执行对应的录入测试用例并返回结果

2. Mocha-PhantomJS:JavaScript测试框架Mocha的客户端

规则队列生成器

规则队列生成器会将采集的规则转化类成消息队列,然后交由长时持续处理器一次处理

为什么采用类消息队列的处理方式?

这和 PhantomJS 的性能是密不可分的,由多次实践发现,PhantomJS 并不能很好地进行并发处理,当并发过多,会导致 CPU 过载,从而导致机器宕机

在本机环境下的虚拟机中进行并发测试,数据并不理想,极限基本在 ab -n 100 -c 50 左右。 所以为了防止并发导致的问题,就选择了使用类消息队列来避免因为并发过高导致的服务不可用

 

类消息队列的实现

我们这里通过调用内部的分布式缓存系统生成类消息队列,队列的生成其实可以参考数据结构–队列。最基本的模型就是在缓存中创建一个 KEY ,然后根据队列数据结构的模式进行数据的插入和读取

当然,类消息队列的中间介质可根据你实际的条件来选择,你也可以使用本机内存实现。这可能会导致应用和类消息队列竞争内存

前端页面监控

长时持续处理器

长时持续处理器是要功能就是消费规则队列生成器生成的类消息队列

前端页面监控:比如,页面第三方系统数据调用失败,模块加载异常、用户白屏、数据不正确。这时候就需要从前端DOM展示的角度来分析。并且出现问题,需要使用邮件、短信通知相关人员修复bug。并且触发报警是要有现场快照,以便复现问题。

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:在京东网址前端监察和控制平台的最好实施

关键词: