How to quickly build a front-end monitoring system


1、 Why should the front end be a monitoring system

The development environment of the front-end is relatively complex. The pages may be displayed differently in different browsers, wechat and other apps. The user’s network speed and mobile phone performance will also affect the page access speed. It may be more obvious on the mobile end, and the tolerance of mobile end users for page response delay and page unavailability is lower.

2、 What to monitor?

  1. Front end abnormal monitoring:

    • JavaScript error message monitoring
    • Promise captures exception information
    • Ajax (XHR) exception information capture
    • console. Error error message capture
    • Resource capture error information
  2. Page performance monitoring:

    • Redirect time
    • DNS query / cache time
    • Page unload time
    • TCP connection time consuming
    • Parsing DOM tree takes time
    • Content / page loading completion time
  3. Equipment information collection:

    • Equipment type
    • Operating system / version
    • Screen information
    • Browser information

These are mainly basic functions. For the front end, the main purpose is to facilitate and quickly locate online problems.
Then I searched some front-end monitoring systems, but most of them were not satisfactory. Open source has few functions, and it is difficult to maintain in the later stage.
Build your own health system with limited time and energy; The cycle is too long to fit. Like Logan, the castration version has too few functions to consider. Then I saw the function of webfunny version, which basically meets my needs. I feel it’s pretty good.

3、 Webfunny

Its functions include:

  • User scrutiny
  • error analysis
  • Interface analysis
  • performance analysis
  • Flow analysis
  • Health analysis
  • Online safety monitoring

You can also customize and add buried points. This is good.

4、 Webfunny rapid deployment

  1. Webfunny deployment
1. Local clone code $: 'git clone  '

Use code cloud warehouse $: 'git clone '(GitHub network is unstable, and code cloud address can be used)

2. Execute the initialization command and installation command $: NPM run init & & NPM install under the project root directory

  It is recommended to switch Taobao image: 'NPM config set registry'  '

  There is no bin directory by default. Execute the 'NPM run init' command to generate the bin directory

3. Confirm whether PM2 is installed. If PM2 is not installed, execute the installation command $: NPM install PM2 - G
  1. Mysql database deployment
1. Install MySQL database (MySQL installation tutorial)

2. Create database
Database name: webfunny_ db。
Character set settings: [default character set]: utf8, [default collision]: utf8_ bin

3. Database connection configuration
Enter webfunny_ monitor/bin/mysqlConfig. JS file (if there is no database, you can contact me and use the test database)

module.exports = {
  write: {
    ip: 'xxx. xxx. xxx. Xxx ', // remote IP address
    Port: '3306', // port number
    dataBaseName: 'webfunny_ Db ', // database name
    Username: 'root', // username
    Password: '123456' // password
  1. Project start
1) At this point, the local configuration is complete. Try running the command $: NPM run PRD
If an error is prompted: script already launched, indicating that the program has been run, please use $: NPM run restart

2) Open the browser and access the address: http://localhost:8010/webfunny/register.html?type=1 (initialize the administrator account and log in)

3) After creating a new project, you can see the probe deployment tutorial and complete the deployment.

That’s it. It’s deployed.
Webfunny supports private deployment and container deployment, which is good.

5、 Use feedback

Overall, it feels good to use. The deployment is also very convenient. The functions are also very complete. It is recommended to use.