交代背景

通过不到半年努力，我司前端开发已经完全转向 CI/CD了，在转型的道路上， 对于前端代码的异常监控(听云/senTry部分页面有用)，没有一个自己 主动触发的定时巡检系统，为了进一步提升质量，我们进行了 前端巡检系统的开发

系统现状

1. 系统是从8月初开发,中旬上线的。运行了1个月，通过不同组前端小伙伴之间的努力，线上已经没有标红报错，且在 请求数/大文件请求/白屏时间都有明显提升。

2. 对接测试/部署系统后，每次代码发布都会执行巡检，为前端代码部署提供了保障

项目主要npm依赖

1. puppeteer，googleChrome出品的无头浏览器，你可以像 控制木偶一样，控制浏览器帮你打开页面/填写表单/在控制台执行脚本等等，所以他的名字叫puppeteer

2. node-schedule，nodeJs执行定时任务/脚本的工具，详细介绍

3. pm2,大名鼎鼎的PM2,不管在win/mac/linux都能帮你守护nodeJs程序

4. koa，出接口对接 测试系统/对接系统用的，当然还有什么koa-XXX/axios一堆

5. log4js，解决生产环境无法调试多记录日志的工具

6. mongodb,持久化数据使用，无论是巡检记录/log信息

7. mongoose，优雅的使用nodeJs链接mongodb

8. shelljs，不用考虑兼容性，直接写shell的nodeJs工具

9. standard，没有规矩不成方圆，代码规范还是需要的

10. 钉钉群机器人，把定期结果/通知/报错 不同类型的消息即使发送给不同的群

主要实现

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列表 需要一次一次打开怎么处理

1. 循环就好了，虽然耗时时间长，不过能减少 因为CPU/内存/网络带来的不稳定因素

puppeteer核心代码

const puppeteer = require('puppeteer')const devices = require('puppeteer/DeviceDescriptors')const iPhone = devices['iPhone 8']const _platform = process.platformconst _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的部分留到以后再写哈，先把主要实现记录下

作者：kyle背背要转运
链接：https://www.jianshu.com/p/42585c78eeec