preface
A project is not only online is perfect, you also need to know the user usage and product function design is reasonable, how to locate online problems, and so on a series of questions… Then monitoring plays a leading role in this process. We not only need to listen to users’ feedback, but also need to implement it with data, so as to design a better solution.
This article will tell how to design a B-end monitoring system from 0-1, to better empower the product!
System design analysis
The monitoring system that serves your development project is what I call an application system.
By defining the service object of the monitoring system, I first think about the target of monitoring. What should I monitor the application system?
- Application system stability. For stability, system errors can be monitored. Errors include: JS errors, PROMISE exceptions, resource exceptions, and blank screen conditions.
- Application system user experience. Monitor performance, interface return speed, and static resource loading.
- Application system services. According to the user behavior to predict the use frequency and rationality of the function, in the demand review can force the product to improve the product through data.
- Application system user portrait. Through monitoring, we can get a rough idea of the application’s UV (Unique Visitor) and PV (Page View).
Secondly, I need to think about how to collect and report data for monitoring targets.
About data collection:
-
Page error catch. I need to listen for global error events and unHandledrejection events
-
Monitor page performance. I use native API Performance
-
Monitor back-end interfaces. Can be divided into manual monitoring and automatic monitoring. Manual monitoring is to expose the method to the application system, and then the application system calls this method for data collection. Automatic listening is done by overriding ajax requests or fetch requests.
-
Listen for user click events. So the question here is how do you get these elements that need to be monitored?
Elements that need to be monitored can be retrieved through burying or configuration. As for the burying point industry has a lot of plans. Here, I’ll show you how to configure to get the elements that need to be monitored. (PS: Leave a question, it will be clear after reading)
-
Monitor the blank screen
About reported data:
- It can be acquired and utilized without perception
new ImageIs used to report data. - It can also be sensed and reported by calling the interface.
And how do I process and store the data after I collect it? And how to prompt each relevant person in charge?
After the data is collected and reported, it needs to be analyzed. This part needs to be supported by a server. For front-end developers, there is no doubt that The Node service is the best choice for us.
In the process of data processing, if there is abnormal data, it is necessary to prompt the relevant person in charge. Here we can use two schemes.
If each company has an alarm system, it can access the alarm system or set up an enterprise wechat robot to notify the company.
Finally, how to display these analyzed data in the form of visualization?
The analyzed data is displayed in a visual way. Of course, this system is not just for demonstration, but also for configuration. For example, the monitored elements mentioned above can be obtained through configuration…
So this configurable visualization system has two responsibilities:
The first is configuring modules. You can configure the application system to be monitored, routes to be monitored, and elements to be monitored. In the form of configuration, the reverse can serve the data acquisition module mentioned above.
The second is to present the data. By obtaining the analyzed data, people can see the results at a glance.
As follows, a process analysis diagram is sorted out:
System component
Through the above analysis, I divided the system into three parts.
In the process of collecting data and reporting data, I designed an SDK. Apply the SDK in my application system.
In the process of data storage, processing and real-time transmission, I designed a background system to provide interface. Working with my SDK and my configurable visualization system.
Finally, a configurable visualization system.
System Technical Solution
After knowing which parts of a monitoring system are composed of, you need to think about how each part is designed?
Visual platform design
The platform does design in two broad directions: configuration and view.
The configuration can be implemented through three dimensions: project configuration, project/route configuration, and Project/route/element configuration. (Note: the items, routes and elements here are related to the application system)
Through the configuration of the project, each b-side application system to be monitored can be obtained. The key point is the host of the application system and the unique key of each application system can be automatically generated to distinguish. In addition, you can configure the routes corresponding to the application system, and finally configure the elements to be monitored under each route.
After the configuration is complete, the view layer can also display data in three dimensions as shown above. Of course, you can also look at the query data globally, such as interface information, user portraits, log information.
The SDK design
For the SDK, I designed it as an NPM package. Initialize the SDK with its exposed init method. There are also several methods exposed within the SDK that can be collected manually or automatically.
The init method retrieves the data configured through the visual platform and reports the user information. Design each user to randomly generate a session_ID. The SDK is mainly used in application systems. For example, in the process of monitoring the elements of the application system, the SDK first calls the background interface to obtain the monitored elements, and then the SDK binds the elements to events. Call the interface to report data when the element is being manipulated. The SDK exposes the method in the application system by routing the front guard to call this method.
Because I display data in the dimension of project/route on the visualization platform, I need to report the current route with path_name when reporting data.
The background design
This background is based on node Egg framework to write, the database is mysql. The design is divided into three dimensions, visual platform interface design, SDK interface design, user authority interface design.
For data reporting, the background provides an interface for the SDK to call and report data through the interface. Visual platform interface design, mainly through the above three configuration dimensions to build table storage data, and then provide the ability to add, delete, change and check background. The collected data will be dropped into the database by starting a scheduled task, and a scheduled task will be created to delete the data of the database. The collected data will be visualized through data analysis and filtering, so the interface of this part will also be applied by the visualization platform.
For monitoring systems, an alarm capability is also required. How to let the relevant person in charge know this exception and solve it in time? If you need to access the alarm system, you can use a third-party tool.
Background system design, it is divided into three parts, the following is the related design of each part:
- Visual system related design
- SDK related design:
- User permission related design:
The following is an overview of monitoring elements, monitoring error information, and monitoring interface information
The general idea of monitoring elements:
Summary & Late Stage
The idea of the whole system is roughly like this. In this process, a closed loop is formed, through the visual platform to improve the burial point, and at the same time, the rationality of product design can be reviewed.
For monitoring this matter has great implications for application systems. Analyze some key business processes in the application system through monitoring, and improve human efficiency by comparing whether business processes can be optimized. You can also monitor the meaning of the business itself and the data that the business generates to empower the entire product line. Pain points can be learned through monitoring and how to implement solutions in the later stage. Of course, it also needs to be tracked according to different product scenarios.
So over here, monitor system end. If it is helpful to you, your praise is my biggest support ~
Finally, I wish you all an early Christmas 🎄 fast fall ~
Eggjs.org/zh-cn/basic…