Puppeteer终探--前端监控

前端监控的现状

目前市面上的前端监控系统，可能是记录资源加载时长、系统抛错、统计埋点、UV/PV...
对开发人员来讲就是嵌入监控js脚本，监控的前提是：该监控脚本能正常加载并执行
那么问题就来了，假如某个站点CDN、DNS出现异常，监控脚本彻底没机会加载（更不用说运行了）
站点Owner可能很长时间都不知道本身的网站挂了？！监控服务形同虚设...

本文提到的监控改良，即是为解决此痛点

改良思路

Q: 假如站点DNS出现问题，请求根本打不到站点，监控脚本没法加载，要怎么应对这种状况呢？
A: 人肉运维啊，找我的天天盯着，5分钟刷下页面，看网站正不正常，不就好了嘛！
A: 咳，基本思路其实就是这样，不过把人肉运维改为Puppeteer，作个定时任务，每5分钟去跑一下监控站点，若是发现站点白屏则立刻警报（短信通知），能够算是监控的最终兜底策略

系统具体设计思路，代码：https://github.com/zhentaoo/h...

项目分析

开发时截图（Atom默认主题＋ZSH）

1. 定时脚本 /hawk-eye/scripts/monitor-pp.js**

• 该脚本每5分钟，访问一次zhentaoo.com，稍做等待后，观察其是否渲染正常
• 若是正常: 删除上次的正常图片，保存这次的图片，而后请求 monitor 接口
• 若是异常: 删除上次的异常图片，保存这次的图片，而后请求 monitorerr 接口
• 这里很难出现异常状况，因而我在每次脚本启动时，random了一个值，若是大于 > 0.7 则认为异常

2. Restful API

这里为了简单，我直接用了ThinkJS框架生成Restful API，你们有兴趣也能够看下使用方法，简单易上手

• 文档： https://thinkjs.org/zh-cn/doc...
• 安装2.0脚手架：npm install -g thinkjs@2
• 初始化项目：thinkjs new hawk-eye
• 建立restful api：thinkjs controller home/monitor -r
• 建立restful api：thinkjs controller home/monitorerr -r

3. MongoDB使用

这里就不进行mongodb的安装教学了，若是不习惯命令行的同窗，推荐使用robomongo客户端

4.项目线上部署图，PM2作为Node进程的管理工具**

5.项目运行效果，监控对象行为记录

后话

关于Puppeteer，也已经研究、试水了一段时间，多数应用场景也都有考虑，并在github上写了些不成熟的项目和思路
接下来我可能会试水其余东西，或者用它搞点事
但愿各位看官能够结合本身的需求／业务场景，充分挖掘Puppeteer功能
有兴趣的话加群讨论，?