Build a Web Front-end exception monitoring system

Preface:

If you happen to be a front-end developer and you happen to be maintaining a site with high availability requirements, you and I may have a common annoyance: how can I detect a front-end exception in the first place? After all, the front-end does not allow users to visit the webpage streaking festival every day. The javascript errors on the front end are enough for users to pick up their complaint phone numbers... Is it hard to get started every day?

It's time to change. Let's go! My goal is simple: to completely fix the problem before the user and boss discover an exception, and to fully enjoy the quality of life for the rest of the time :)

I. Objectives of the frontend exception monitoring system

Without interfering with the monitored page, the system provides 24x7 monitoring tasks to immediately discover the "streaking", "semi-streaking" pages, or pages with JavaScript exceptions, it also provides the website front-end owner with alarm services by text message and email.

It can be said that the frontend exception monitoring system mainly solves two major exceptions: A. Javascript exceptions exist on the page B. Style loss caused by various factors. First, I will introduce the solutions for these two exceptions:

Ii. Javascript exception monitoring

Different client browser environments allow you to work in the Development EnvironmentCodeIt is not that we can run normally on users' computers. The problems caused by malformed browsers make us very proud, if you can view the server error log at any time like back-end development! But why not?

The javascript language itself provides the try catch Exception Handling syntax. If we take advantage of this syntax, we can enhance the robustness of front-end applications, you can also send the caught exceptions to the front-end exception monitoring system and record them to the database as error logs.

By adding the exception handling function to an application, we can make full use of the Dynamic Language advantage of JavaScript. I don't want to write more than N try-catch statements in the code to add exception handling. My idea is: when using the Javascript class module to register in the application, traverse every function in the class module, and then add try-catch in a unified manner, in this way, all functions in the front end are within the scope of exception handling. Is there a lot of cool than static languages such as Java? The sample code is as follows:

With the above global exception handling functions, solving online JavaScript exceptions is just a piece of cake. You only need to define the format of the error message, in the catch statement, send a request to the fixed interface of the exception monitoring system. We can send the browser information about the error, JS module information, function information, or specific error message in the error message. The information to be sent depends on your own needs. In the fdsafe exception monitoring system, the following error message is transmitted:

 

3. Abnormal monitoring of style loss

If your page is suddenly streaking when it is not streaking, it is a serious availability problem. You need the front-end personnel to locate the problem and fix it quickly. There are many possibilities for triggering "streaking", maybe the CSS file 404, maybe the problem with the CSS file @ import URL, but there is only one final appearance, that is, the page style suddenly changes greatly.

In the fdsafe system, we use the image comparison method to detect the phenomenon of "streaking" on online pages. The principle is very simple: For the URL of the monitored page, we asked the monitoring system to keep the pages rendered by the browser the previous day, and then asked the Monitoring System to periodically capture online pages, and compare the similarity between the two images, if the similarity difference exceeds a certain threshold, an alarm condition is triggered.

We use the WebKit kernel of QT to render and intercept pages. We also recommend selenium's browser function. While the image similarityAlgorithmMany, we finally use the cvcomparehist Algorithm in opencv.

IV. Other exception monitoring

In addition to style loss and JavaScript exceptions, the front-end can monitor many other exceptions through the system, such as 404 errors in JS and CSS files and HTML source code closure exceptions, or JavaScript or CSS file compression exceptions. The fdsafe system can monitor different exceptions by adding plug-ins, and then summarize them to the exception logs.

 

V. Overall system framework

The establishment of a front-end exception monitoring system naturally needs to reflect the features of our front-end. The back-end system is implemented based on nodejs and mainly implements two functions:

1) regularly capture the HTML source code of the monitored page and analyze whether there is any page style loss exception or other exceptions.

2) JavaScript exceptions sent from the user's browser are accepted.

If an exception occurs and exceeds the preset threshold, an alert message is sent to the owner. The system schematic is as follows:

 

 

Vi. Summary

With the development of Web applications towards rich clients, the availability of front-end applications is becoming more and more important, and the necessity for building a front-end exception monitoring system is also growing, I hope this article will give you some ideas. Have questions or suggestions, welcome to explore: terence.wangt@alibaba-inc.com

ArticleSource: http://www.aliued.cn/2012/10/27/%E6%9E%84%E5%BB%BAweb%E5%89%8D%E7% AB %AF%E5%BC%82%E5%B8%B8%E7%9B%91%E6%8E%A7%E7%B3%BB%E7%BB%9F-fdsafe.html