澳门在线威尼斯官方 > 威尼斯澳门在线 > 在京东网站前端监控平台的最佳实践

原标题:在京东网站前端监控平台的最佳实践

浏览次数:66 时间:2019-12-01

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

2016/11/21 · JavaScript · NodeJS, phantomjs

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

图片 1

何时出发报警?

报警主要分为了短信和邮件报警。邮件报警是在每条异常之后就会发给指定系统用户。短信则是根据异常次数来进行处理的,当异常次数过大,就会下发短信通知

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

需要监控系统解决的问题

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

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

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

phantomjs的生态圈

报警系统

报警系统我们目前使用的是京东内部自己的统一监控平台 UMP,通过调用平台提供的一些 API 来实现报警邮件与短信通知

UI测试包括网页元素的正确展现,网页交互之后的元素变化等,人工测试很是头疼,并且UI层面的测试用例也不好写。

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

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

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

主动错误上报

 

PhantomJS 服务

PhantomJS 服务是指将 PhantomJS 结合 HTTP 服务和子进程进行服务化的处理

首先、启动 HTTP 服务,然后将长时处理器下发的规则进行进一步转化,转化后启动子进程,HTTP 服务会监听子进程的处理结果,并在处理完毕之后返回

 相关连接

解决方案

 

总结与展望

其实我们现在开发的这套监控系统并不复杂,只是合理的运用了一些现有的技术框架。抽象出来我们自己需要的一些功能。但却有效的达到了我们的预期功能,并且节省了很多之前需要人肉测试的时间成本。系统本身还有很多问题在待解决状态,比如报警系统的规则处理与阀值设定,JavaScript 报错的准确过滤机制等,这些问题我们都会逐个解决,并且未来的前端监控系统会成为一个平台,核心服务在后端爬取页面服务,应用端可以有多种形式,比如监控、测试工具等

一些可以持续优化点:

  • 监控系统虽然在应用层面进行了垂直划分,但是由于机器资源等限制,并没有进行单独功能的部署。这点可能会在后期的使用中进行优化
  • PhantomJS 服务还需要进一步优化,以承载大并发,大处理量。提供稳定的服务
  • 报警由于依赖于公司内部的 UMP 系统,所以并不是特别灵活,后期可以考虑自己实现一套报警机制

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

1 赞 1 收藏 评论

var page = require('webpage').create(),
  system = require('system'),
  t, address;

if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
  phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
  if (status !== 'success') {
    console.log('FAIL to load the address');
  } else {
    t = Date.now() - t;
    console.log('Loading ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');
  }
  phantom.exit();
});

phantomjs loadspeed.js http://www.baidu.com 


输出 Loading http://www.baidu.com Loading time 3802msc

屏幕截图

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});

关于作者:keelii

图片 2

It’s not who you are underneath, it’s what you do that defines you 个人主页 · 我的文章 · 5 ·      

图片 3

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

类消息队列的实现

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

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

 

长时持续处理实现

在长时持续处理器的具体实现中,我们利用了 JavaScript 的 setInterval 方法来持续获取累消息队列的内容下发给规则转化器,然后转发给负载均衡调度器。之后再对返回的结果进行统一处理,比如邮件或者短信报警

  1. 屏幕捕捉

架构设计

注入JS文件

架构简述

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

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

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

  1. Headless的网站集成测试

高级监控

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

图片 4

和CI系统持续集成
例如Jenkins或者TeamCity,Travis CI已经内置了对PhantomJS的支持。

最好的实践
和测试框架CasperJS集成。

后端页面抓取服务

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

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

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

 确保在render之前

技术选型

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

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

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

测试页面加载速度

常规监控

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

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

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

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

图片 5

 

长时持续处理器

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

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

可用性监控

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

图片 6

前端页面监控

API

PhantomJS 服务可以做为公共 API 提供给客户端进行测试需求的处理, API 通过 HTTP 方式调用。在 API 的处理上需要提供 HTTP 数据到规则和 PhantomJS 的转换。从而又演化出了 HTTP 数据到规则转换器

官网: www.phantomjs.org

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:在京东网站前端监控平台的最佳实践

关键词:

上一篇:圣杯构造小结,等高分栏布局小结

下一篇:模块深入探究,cluster模块深入探究