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功能
有興趣的話加羣討論，?