Current situation of front-end monitoring

At present, the front-end monitoring system on the market is mostly to record the loading time of resources, system error, statistical buried point, UV/PV… For developers is embedded monitoring JS script, the premise of monitoring is: the monitoring script can load and execute normally then the problem comes, if a site CDN, DNS is abnormal, the monitoring script has no chance to load (let alone run) site Owner may not know for a long time his website hung? ! Monitoring service is a sham…

The monitoring improvement mentioned in this paper is to solve this pain point

Improvement ideas

Q: If the DNS of the site has a problem, the request cannot reach the site at all, and the monitoring script cannot be loaded, how should I deal with this situation? A: Human operation. Find someone to stare at the site every day for 5 minutes to check whether the site is normal or not. A: Well, that’s the basic idea, but the ultimate strategy of Puppeteer is to turn human operations into Puppeteer, where you run the monitoring site every 5 minutes and alert the site immediately (SMS notification) if you find A blank screen

Specific design ideas of the system, code:Github.com/zhentaoo/ha…

Project analysis

Development screenshots (Atom default theme +ZSH)

1. Timing script /hawk-eye/scripts/monitor-pp.js

  • Every five minutes, the script visits Zhentaoo.com and waits to see if it renders properly
  • If normal: Delete the last normal image, save the current image, and request the Monitor interface
  • If exception: Delete the previous exception image, save this one, and request monitorErr
  • Exceptions are hard to come by, so EVERY time the script starts, I random a value greater than 0.7 and consider it an exception

Here for the sake of simplicity, I directly use ThinkJS framework to generate Restful API, you can also see the use method, simple and easy to get started

  • Documents: thinkjs.org/zh-cn/doc/3…
  • Install 2.0 scaffolding:npm install -g thinkjs@2
  • Initialization project:thinkjs new hawk-eye
  • Creating restful apis:thinkjs controller home/monitor -r
  • Creating restful apis:thinkjs controller home/monitorerr -r

If you are not used to the command line, you are advised to use the Robomongo client

4. Project online deployment diagram. PM2 serves as the Node process management tool

5. Record the operation effect of the project and the behavior of the monitored object

The latter

I’ve been working on Puppeteer for a while now, and I’ve thought about most of the scenarios, and I’ve written about some of the projects and ideas on Github, and I’m going to try something else, or do something with it, and I hope that you can adapt it to your own needs/business scenarios, To fully exploit Puppeteer’s capabilities, add a group discussion at 😄