交代背景

通过不到半年努力，我司前端开发已经完全转向 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.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的部分留到以后再写哈，先把主要实现记录下