未经作者许可

PhantomJS 和 NodeJS 在京东网址前端监察和控制平台的最棒实践

2016/11/21 · JavaScript
· NodeJS,
phantomjs

本文笔者: 伯乐在线 –
keelii
。未经作者许可,禁绝转发!
接待加入伯乐在线 专栏审核人。

干什么须要三个前端监察和控制系统

日常在八个特大型的 Web 项目中有广大督察,比方后端的劳务 API
监控,接口存活、调用、延迟等监督,那些相近都用来监控后台接口数据层面的音讯。并且对于大型网址体系来讲,从后端服务到前台显示会有好些个层:内网
VIP、CDN
等。但是这一个监察和控制并无法正确地反应顾客观察的前端页面状态,例如:页面第三方系统数据调用战败,模块加载十分,数据不精确,空白开天窗等。当时就供给早前端
DOM
显示的角度去解析和征集客户真正见到的东西,从而检查实验出页面是不是现身相当难题

急需监察和控制系统解决的标题

页面平日现身以下难点时须要接纳邮件、短信通告有关人士修复难点

  • 状态码再次来到错误(50x, 40x)无法开荒
  • 模块加载败北
  • 页面乱码
  • 数据科学

接触报告急察方时要有实地快速照相,以便复现难题

手艺选型

监理的含义和回归测量试验的在精气神儿上是平等的,都以对已上线效能进行回归测量检验,但差异的是监督供给做持久的可不断可循环的回归测量检验,而测量检验只有需求在上线之后做一遍回归

既然监控和测验的本质大器晚成致,那大家一同能够运用测量试验的格局来做监察和控制种类。在自动化测量试验本事闻一知十的时日,不乏超级多好用的自动化工具,我们只须求把那几个自动化学工业具进行整合为大家所用就可以

  • NodeJS – 特别适用于网络密集型职责
  • PhantomJS – 模拟无分界面包车型地铁浏览器,提供丰盛的水源人机联作 API

NodeJS

NodeJS 是二个 JavaScript 运市场价格况,非拥塞 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

结构设计

结构大概浏览

图片 1

布局简述

对此 DOM 监察和控制服务,在采纳规模上进行了僵直细分:

  • 平整管理连串
  • 法则队列生成器
  • 长时持续微处理器
  • PhantomJS 服务
  • 服务化 API

在利用规模上进展的垂直细分能够对利用做布满式铺排,升高管理技艺。前期也造福做质量优化、系统改动扩展等

减轻方案

前台法则录入

那是二个独门的 Web
系统,系统第后生可畏用以采撷客商录入的页面音讯、页面临应的平整、展现错误音信。通过调用后端页面抓取服务来完结页面检查评定的职务,系统能够成立三种档案的次序的检查评定页面:常规监察和控制、高端督察、可用性监察和控制

正规监察和控制

录入多个页面地址,和若干检查实验准则。注意这里的检验法规,大家把常用的局部检查实验点抽象成了一条看似测量试验用例的话语。每条法则用来协作页面上的一个DOM 成分,用 DOM
成分的属性来和预期做同盟,要是相称退步系统就能够发生一条错误消息,后续交由报告急察方系统管理

同盟类型 日常宛如此三种:长度、文本、HTML、属性

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

如此那般做的处正是,录入准绳的人风度翩翩旦领会一些 DOM
选拔器的学问就足以上手操作了,在大家内部日常是交由测验程序员统意气风发实现法规的录入

图片 2

高级督察

第风流浪漫用于提供高级页面测量检验的功力,日常由有阅世的工程师来创作测量试验用例。那几个测量试验用例写起来会有局地读书花销,可是能够效仿
Web 页面操作,如:点击、鼠标移动等事件就此做到标准捕捉页面消息

图片 3

可用性监察和控制

可用性监察和控制侧重于对页面包车型客车可采访性、内容科学等比较 严重的难题
做即时监察和控制。平日那类页面我们只要求在程序里面启一个 Worker
不断的去赢得页面 HTML 就足以对结果开展检查评定相称了,所以大家筛选了 NodeJS
来做异步的页面抓取队列,高效神速的做到这种网络密集型职务

图片 4

主动错误反馈

页面脚本试行错误监察和控制

页面引进生机勃勃段监察和控制脚本来收罗页面产成 error
事件重临的错误新闻,自动上报给后端服务,在系统里面能够聚焦全体报错信息,以致相应的客户端浏览器版本、操作系统、IP
地址等

页面主动申报

以此效果须求相应的前端程序员在代码中调用错误上报
API,来积极提交错误音讯。首要使用的场景有,页面异步服务延时无响应、模块降级兜底主动通报等。监察和控制脚本提供多少个大致的
API 来实现这项职分

// error 方法调用后及时反馈错误音信并爆发邮件、短信布告errorTracker.error(‘错误描述’卡塔尔 // info
方法调用后立马反馈音信,并在单位时间内仅发生一条邮件、短信通知errorTracker.info(‘新闻描述’State of Qatar // log
方法调用后由报错检查测量试验是或不是到达设置阀值,最后认可是或不是报错
errorTracker.log(‘日志音讯’卡塔尔

1
2
3
4
5
6
7
// 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 左右。
所以为了卫戍现身以致的主题材料,就接受了接纳类音信队列来制止因为并发过高导致的劳务不可用

类消息队列的落实

咱俩那边经过调用内部的布满式缓存系统生成类音讯队列,队列的生成其实能够参见数据构造–队列。最大旨的模子正是在缓存中开创一个KEY ,然后依据队列数据构造的情势展开数据的插入和读取

当然,类信息队列的高级中学级介质媒质可依据你实际的标准化来抉择,你也能够动用本机内部存款和储蓄器达成。那可能会形成应用和类音讯队列角逐内部存款和储蓄器

长时持续微处理机

长时持续微电脑是要效果与利益正是成本准绳队列生成器生成的类新闻队列

长时持续管理完成

在长时持续微电脑的实际得以实现中,大家运用了 JavaScript 的 setInterval
方法来持续拿到累新闻队列的开始和结果下发给法规转变器,然后转载给负载均衡调节器。之后再对回到的结果开展统生机勃勃处理,譬如邮件可能短信报告急察方

API

PhantomJS 服务能够做为公共 API 提须要顾客端举行测量检验要求的管理, API 通过
HTTP 方式调用。在 API 的拍卖上供给提供 HTTP 数据到法则和 PhantomJS
的转移。进而又演变出了 HTTP 数据到法则转变器

PhantomJS 服务

PhantomJS 服务是指将 PhantomJS 结合 HTTP 服务和子进度张开服务化的管理

首先、运转 HTTP
服务,然后将长时Computer下发的平整举行更进一层转变,转变后运维子进程,HTTP
服务会监听子进程的管理结果,并在管理完成之后重回

报告急方系统

报告急察方系统大家当前利用的是京东里面团结的统一监督平台
UMP,通过调用平台提供的部分 API 来促成报告急察方邮件与短信布告

什么依据报告警察方定位到实际页面?

客商通过监督检查管理种类录入法规后,监察和控制连串会根据 UMP
法则针对客户录入的页面生成 UMP 使用的 key。当长时连连微处理器发现PhantomJS 服务重返的结果标示为极其后,就能够采纳 key 来开展日志记录

哪天出发报告急察方?

报警首要分为了短信和邮件报告急方。邮件报告急方是在每条特别之后就能够发放钦点系统顾客。短信则是凭仗非常次数来开展拍卖的,当万分次数过大,就能够发出短信通知

部署

对于系统构造能够分为两大块举行。因为机器能源数量有限,未有将享有片段都单身布置

平整管理种类以至准则队列生成器和不断微机整合安顿在生龙活虎台机械上,PhantomJS
服务配置在了别的的机器上。进度管理接纳了著名的 NPM 模块 —— PM2

PM2 是一个包蕴负载均衡功效的 NodeJS 应用的历程微处理器。可充裕利用
CPU,并确定保障进程平稳存活

PM2 特性:

  • 内建负载均衡(使用 Node cluster 集群模块)
  • 无缝重启雷同 nginx reload
  • 持有 Ubuntu 和 CentOS 的开机运行脚本
  • 调整台检验

只是在当前布署职分中,并不曾接收内建负载均衡的特色,没用经过集群的形式布署代理。仅使用了后台运转和无缝重启的表征

小结与瞭望

其实大家现在付出的那套监督连串并不复杂,只是合理的利用了一部分现存的才具框架。抽象出来大家本人要求的片段作用。但却使得的完成了大家的料想功能,何况节省了数不尽事情发生此前要求人肉测量检验的年华人资金产。系统自身还应该有相当多主题材料在待解决情形,举例报告警察方系统的平整管理与阀值设定,JavaScript
报错的高精迈过滤机制等,那么些主题材料我们都会每一种减轻,何况未来的前端监察和控制类别会造成一个阳台,宗旨服务在后端爬取页面服务,应用端能够有多样格局,举个例子监察和控制、测验工具等

一些方可不断优化点:

  • 监察系统就算在使用范围进行了僵直细分,但是出于机械资源等节制,并不曾开展单独效能的安顿。那点可能会在末尾时代的选拔中进行优化
  • PhantomJS
    服务还索要更进一层优化,以承载大产出,大管理量。提供牢固的劳务
  • 报警是因为信任于集团里面包车型地铁 UMP
    系统,所以并非特意灵巧,后期能够酌量自身达成后生可畏套报告急方机制

博客原作同步:https://keelii.github.io

1 赞 1 收藏
评论

关于我:keelii

图片 5

It’s not who you are underneath,
it’s what you do that defines you
个人主页 ·
小编的小说 ·
5 ·
     

图片 6

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图