交代背景
通过不到半年努力,我司前端开发已经完全转向 CI/CD了,在转型的道路上, 对于前端代码的异常监控(听云/senTry部分页面有用),没有一个自己 主动触发的定时巡检系统,为了进一步提升质量,我们进行了 前端巡检系统的开发
系统现状
- 系统是从8月初开发,中旬上线的。运行了1个月,通过不同组前端小伙伴之间的努力,线上已经没有标红报错,且在 请求数/大文件请求/白屏时间都有明显提升。
- 对接测试/部署系统后,每次代码发布都会执行巡检,为前端代码部署提供了保障
项目主要npm依赖
-
puppeteer,googleChrome出品的无头浏览器,你可以像 控制木偶一样,控制浏览器帮你打开页面/填写表单/在控制台执行脚本等等,所以他的名字叫
puppeteer
- node-schedule,nodeJs执行定时任务/脚本的工具,详细介绍
- pm2,大名鼎鼎的PM2,不管在win/mac/linux都能帮你守护nodeJs程序
-
koa,出接口对接 测试系统/对接系统用的,当然还有什么
koa-XXX/axios
一堆 - log4js,解决生产环境无法调试多记录日志的工具
- mongodb,持久化数据使用,无论是巡检记录/log信息
- mongoose,优雅的使用nodeJs链接mongodb
- shelljs,不用考虑兼容性,直接写shell的nodeJs工具
- standard,没有规矩不成方圆,代码规范还是需要的
- 钉钉群机器人,把定期结果/通知/报错 不同类型的消息即使发送给不同的群
主要实现
puppeteer在centos7上安装有点费劲
报错:
...node_modules/puppeteer/.local-chromium/linux-496140/chrome-linux/chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open shared object file: No such file or directory
解决:
#依赖库
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y
#字体
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y
报错
:
(node:30559) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Failed to connect to chrome!
(node:30559) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
解决:
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
模拟移动端设备 或者 设置UA - emulate - iphone为例
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://www.google.com');
// other actions...
await browser.close();
});
设置浏览器分辨率 - setViewport
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.setViewport({
width: 1920,
height: 1080
})
await page.goto('https://www.google.com');
// other actions...
await browser.close();
});
URL列表 需要一次一次打开怎么处理
- 循环就好了,虽然耗时时间长,不过能减少 因为CPU/内存/网络带来的不稳定因素
puppeteer核心代码
const puppeteer = require('puppeteer')
const devices = require('puppeteer/DeviceDescriptors')
const iPhone = devices['iPhone 8']
const _platform = process.platform
const _conf = _platform === 'darwin1' ? {
headless: false
} : {
args: ['--no-sandbox', '--disable-setuid-sandbox']
}
module.exports = async function run (url, isMobile) {
return new Promise(async (resolve, reject) => {
const _arr = []
for (let i = 0; i < url.length; i++) {
await puppeteer.launch(_conf).then(async browser => {
const promises = []
const _url = url[i]
promises.push(browser.newPage().then(async page => {
if (isMobile) {
await page.emulate(iPhone)
} else {
await page.setViewport({
width: 1920,
height: 1080
})
await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36')
}
await page.goto(_url).catch(async error => {
// await page.close()
console.log(error)
})
await page.close()
}))
await Promise.all(promises).catch(e => {
console.log('---catch start---')
console.log(e)
console.log('---catch start---')
})
await browser.close()
})
}
resolve(_arr)
})
}
定时任务
const schedule = require('node-schedule')
const URL = require('../../config/j')
const run = require('./../service/p')
const Rule = new schedule.RecurrenceRule()
Rule.second = [10, 20, 30, 40, 50, 55]
schedule.scheduleJob(Rule, async function () {
site({
pageArr: URL(),
isMobile: 1
})
})
async function site (...params) {
await run(params[0].pageArr, params[0].isMobile).catch(e => {
console.log(e)
})
console.log('end')
}
URL列表
const router = [
'https://www.baidu.com/',
'https://www.baidu.com/'
]
module.exports = function arr () {
return router
}
gitHub 简易源码
https://github.com/kyle920326/pupp
可以直接clone下来,参考查看
npm install
npm run dev
备注
koa,log4js,mongodb的部分留到以后再写哈,先把主要实现记录下
网友评论