美文网首页前端开发笔记让前端飞前端开发那些事
基于puppeteer打造de前端巡检系统 - 用可见数据提升前

基于puppeteer打造de前端巡检系统 - 用可见数据提升前

作者: kyle背背要转运 | 来源:发表于2018-09-27 00:55 被阅读57次

    交代背景

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

    相关文章

      网友评论

        本文标题:基于puppeteer打造de前端巡检系统 - 用可见数据提升前

        本文链接:https://www.haomeiwen.com/subject/mftloftx.html