A front-end monitoring method, device, equipment and storage medium

Abstract

The application discloses a front-end monitoring method and device, equipment and storage medium, relates to the technical field of front-end development, and comprises the following steps: monitoring a current network condition, and judging whether the current network condition meets a preset condition condition; if the current network condition meets the preset condition condition, a front-end data reporting rule is configured as a timing batch reporting rule, and current collected front-end data is saved to a local preset cache; based on timing batch reporting control parameters carried in the timing batch reporting rule, the front-end data in the local preset cache which has not been reported is reported to a preset back-end collection interface in batches at timing, so that the preset back-end collection interface generates corresponding front-end log files based on the received front-end data. The application first caches the front-end data to the local, so that the data is reported in batches at timing when the network condition is poor, and the situation that the data is incomplete or data collection fails due to poor network state is avoided.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, and particularly relates to a front-end monitoring method, device, equipment and storage medium. BACKGROUND

[0002] Front-end monitoring is proposed in relation to back-end monitoring, and refers to detecting the availability of a system from the perspective of a user end. With the increase in complexity of the user end and the need for refined operation, more attention is paid to the construction of a front-end monitoring system; good front-end monitoring can complete the missing links of the quality assurance system and avoid survivorship bias caused by only back-end monitoring, and specifically highlights that access abnormalities on the user line cannot be perceived, and problems are solved by experience, manpower and user active feedback.

[0003] The prior art scheme generally focuses on monitoring the loading process and runtime state of a page, and simultaneously reports page loading performance, runtime exceptions, API (Application Programming Interface, application programming interface) calling state and time consumption and the like data to a log server. Then, massive real-time log analysis and processing services provided by all parties of the scheme are used to monitor the access of all real users on the current online. Finally, intuitive report forms are used to help discover and diagnose problems in a timely manner. However, the existing front-end monitoring technology only supports single real-time reporting, and is not suitable for self-built data collection systems with security sensitivity requirements. When network conditions are not good, the completeness and success rate of collected data cannot be guaranteed. SUMMARY

[0004] Therefore, the present application aims to provide a front-end monitoring method, device, equipment and storage medium, which can adopt a timing batch reporting rule to report data when network conditions meet certain conditions, thereby avoiding the problem of data reporting failure caused by still using a real-time reporting mode with high network performance requirements when network conditions are not good. The specific scheme is as follows:

[0005] In a first aspect, the present application discloses a front-end monitoring method applied to a front end, comprising:

[0006] Monitoring a current network condition, and determining whether the current network condition meets a preset condition;

[0007] If the current network condition meets the preset condition, a front-end data reporting rule is configured as a timing batch reporting rule, and current collected front-end data is saved to a local preset cache;

[0008] Based on the timing batch reporting control parameters carried in the timing batch reporting rule, the front-end data in the local preset cache which has not been reported is reported in batches to a preset back-end collection interface at a timing, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data.

[0009] Optionally, the monitoring of the current network condition comprises:

[0010] Any one or combination of the current network peak traffic, the current network stability and the browser smoothness is monitored to obtain the current network condition.

[0011] Optionally, after the judging whether the current network condition meets the preset condition, the method further comprises:

[0012] If the current network condition does not meet the preset condition, the front-end data reporting rule is configured as a real-time reporting rule, and the currently collected front-end data is reported to the preset back-end collection interface in real time.

[0013] Optionally, the reporting of the currently collected front-end data to the preset back-end collection interface comprises:

[0014] The currently collected front-end data is synchronously reported to the preset back-end collection interface through an XMLHttpRequest request;

[0015] Or, the currently collected front-end data is asynchronously reported to the preset back-end collection interface by using a navigator.sendBeacon() method.

[0016] Optionally, the method further comprises:

[0017] Obtaining user information of a current user to obtain to-be-authenticated user information, and authenticating the to-be-authenticated user information through a preset authentication switch to determine whether the current user is a legal user;

[0018] If the current user is a legal user, starting a data collection service, and collecting front-end data through the data collection service.

[0019] Optionally, the collecting of the front-end data through the data collection service comprises:

[0020] Extracting an indication field of a target data type from the preset authentication switch; the target data type comprises any one or combination of user behavior data, browser page performance data and web exception data; the indication field of the web exception data is an indication field constructed based on a filtering rule for the web exception data;

[0021] Collect the front-end data of the corresponding type through the data collection service and by using the indication field.

[0022] Optionally, the method further comprises:

[0023] In the process of collecting the front-end data, it is monitored whether the preset emergency stop condition is met at present.

[0024] If it is monitored that the preset emergency stop condition is met at present, a preset control switch is called from a preset interface, and a preset control parameter in the preset control switch is configured as a target parameter value for controlling the front-end to stop collecting the front-end data.

[0025] In a second aspect, the present application discloses a front-end monitoring device applied to a front-end, comprising:

[0026] A network condition monitoring module is configured to monitor a current network condition and determine whether the current network condition meets a preset condition condition.

[0027] A reporting rule configuration module is configured to configure a front-end data reporting rule as a timing batch reporting rule if the current network condition meets the preset condition condition.

[0028] A front-end data saving module is configured to save the collected front-end data to a local preset cache.

[0029] A front-end data reporting module is configured to report the front-end data in the local preset cache that has not been reported to a preset back-end collection interface in batches based on timing batch reporting control parameters carried in the timing batch reporting rule, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data.

[0030] In a third aspect, the present application discloses an electronic device, comprising:

[0031] A memory is configured to save a computer program.

[0032] A processor is configured to execute the computer program to implement the aforementioned front-end monitoring method.

[0033] In a fourth aspect, the present application discloses a computer readable storage medium configured to save a computer program, which is executed by a processor to implement the aforementioned front-end monitoring method.

[0034] It can be seen that the application first judges whether the current network condition meets the preset condition condition, if yes, the front-end data reporting rule is configured as a timing batch reporting rule, then the current collected front-end data is saved to the local preset cache, and finally based on the timing batch reporting control parameter carried in the timing batch reporting rule, the front-end data in the local preset cache which has not been reported is reported to the preset back-end collection interface in batches, so that the preset back-end collection interface generates the corresponding front-end log file based on the received front-end data. As can be seen, the current front-end data reporting rule is configured based on the current network condition, when the preset condition condition is not met, the current collected front-end data can be cached locally first, and then the front-end data is reported to the preset back-end collection interface based on the timing batch reporting rule. In this way, the reporting mode can be effectively determined as timing batch reporting based on the current network condition, avoiding the problem of data reporting failure caused by still using the real-time reporting mode with high network performance requirement in the case of poor network condition, improving the success rate of data collection in the case of poor network condition, and ensuring the integrity of the front-end data through the local cache technology, greatly improving the accuracy of data sampling in front-end monitoring. BRIEF DESCRIPTION OF DRAWINGS

[0035] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings needed to be used in the embodiments or prior art description will be briefly introduced. Obviously, the drawings in the following description are only embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor on the basis of the provided drawings.

[0036] Figure 1 A front-end monitoring method flow chart disclosed by the present application;

[0037] Figure 2 A data collection overall architecture design relationship diagram disclosed by the present application;

[0038] Figure 3 A business data collection logic timing diagram disclosed by the present application;

[0039] Figure 4 A SDK technology implementation class structure diagram disclosed by the present application;

[0040] Figure 5 A specific front-end monitoring method flow chart disclosed by the present application;

[0041] Figure 6 A specific front-end monitoring method flow chart disclosed by the present application;

[0042] Figure 7A data collection overall logic timing diagram disclosed by the present application;

[0043] Figure 8 A data collection subdivision strategy flow chart disclosed by the present application;

[0044] Figure 9 A front-end monitoring device structure schematic diagram disclosed by the present application;

[0045] Figure 10 An electronic device structure diagram disclosed by the present application. DETAILED DESCRIPTION

[0046] The technical solutions in the embodiments of the present application will be described clearly and completely below with the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0047] The prior art solutions generally focus on monitoring the loading process and runtime state of a page, and report the page loading performance, runtime exception, API calling state and time consumption and other data to a log server. Then, massive real-time log analysis and processing services provided by all parties of the solution are used to monitor the access of all real users online. Finally, intuitive reports are used to help find and diagnose problems in time. However, the existing front-end monitoring technology only supports single real-time reporting, and the system configuration and customization are not flexible enough, the browser environment is not compatible with lower versions, the IE browser compatibility is poor, and the technology is not suitable for self-built data collection systems with security sensitivity requirements.

[0048] Referring to Figure 1 The embodiments of the present application disclose a front-end monitoring method applied to a front end, which comprises the following steps:

[0049] Step S11: monitoring a current network condition and determining whether the current network condition meets a preset condition.

[0050] In the embodiments, the network condition at the current time is monitored, and it is determined whether the current network condition meets a preset condition. If the parameters of the current network condition exceed the corresponding preset reasonable range, it is determined that the current network condition meets the preset condition, which indicates that the current network condition is relatively poor. The user can configure the preset condition based on the computer device and browser configuration and other information, so that the front-end monitoring method of the present application is more suitable for each device and helps each user to perform front-end monitoring, and the adaptability of the present solution is higher.

[0051] Step S12: If the current network condition meets the preset condition, the front-end data reporting rule is configured as a timing batch reporting rule, and the current collected front-end data is saved to a local preset cache.

[0052] In this embodiment, when the current network condition is obtained and judged, if the current network condition meets the preset condition, the front-end data reporting rule is configured as a timing batch reporting rule, and the current collected front-end data is saved to a local preset cache through the browser's own local cache technology (LocalStorage / Cookie), so that when the network condition recovers to normal, the front-end data in the local preset cache is reported. In this way, by setting a real-time batch reporting rule, the collected front-end data can be cached locally, which can avoid the situation that the data is incomplete when the network condition meets the condition by using real-time reporting, and effectively improve the success rate and completeness of data sampling.

[0053] Step S13: Based on the timing batch reporting control parameters carried in the timing batch reporting rule, the front-end data in the local preset cache that has not been reported is reported to a preset back-end collection interface in batches at a timing, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data.

[0054] In this embodiment, when the network condition recovers to normal, based on the timing batch reporting control parameters carried in the timing batch reporting rule, the front-end data in the local preset cache that has not been reported is reported to a preset back-end collection interface in batches at a timing, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data. The timing batch reporting control parameters include a reporting delay time length and a batch reporting data amount, the reporting delay time length is the time interval between each two reporting operations, and the batch reporting data amount is the specific data quantity reported at each batch reporting. In this way, by presetting the reporting delay time length and the batch reporting data amount to report the local cache data to the preset back-end collection interface at a timing, the process of stable data reporting can be realized, the situation that the data collection and reporting success rate is not high due to poor network condition is avoided, and the accuracy and completeness of data collection and reporting are ensured.

[0055] In this embodiment, after the front end reports the front end data to the preset back end collection interface, the preset back end collection interface will aggregate the front end data according to a preset data template and generate a response front end log file, and then store the front end log file locally. Then, the data push tool listens to the incremental changes and asynchronously pushes the front end log file to the operation and maintenance log data center. Finally, the effective data is used for visual display and analysis. Moreover, the scheme can realize user-defined data burying. The user can start the data collection process at any position, and can also customize the collection of specific data. In this way, the user can better support custom configuration based on their own needs, and can match more appropriate data reporting methods based on the collected data, realize flexible data reporting structure, greatly improve the user experience, and make the data collection and reporting process more flexible and free while ensuring the success rate of data collection. Figure 2 It can be known that, in the front end, the collection end information is configured based on the burying point SDK (Software Development Kit, i.e. software development kit), and the front end data such as page access and click event is collected. The collected front end data is sent to the collection interface in the back end, so that the log framework in the back end acquires the front end data through the collection interface, calls the collection service to generate the corresponding front end log file, and the application back end generates the corresponding back end log file based on the back end data. The front end log file and the back end log file are pushed to Kafka (message queue service tool) in the ELK (Elasticsearch, Logstash, Kibana, i.e. operation and maintenance log data center) log framework through FileBeat (file push tool). Then, Kafka acquires the log file and pushes the processed effective data to Elasticsearch (log search and analysis framework) through Logstash (server-side data processing pipeline). In order to make Kibana acquire the effective data and display and visualize the log, the ELK saves the statistical information to the log analysis database in the log analysis platform through the processes of timing task, timing analysis and statistical log information. At this time, the user can query the historical log statistical information in the log analysis database through the log analysis platform.

[0056] Reference Figure 3It can be seen that before initializing the SDK, a Yata instance needs to be created and mounted on the Window object, and then the init method in the Yata instance is called to initialize the SDK. During the execution of the instance init method, the main responsibility is business data collection and exception collection. The logic of business data collection is based on the Config object passed into the init method, initializing or overriding some properties in the instance. In the process of business data collection, the most core operation is to initialize the request_batchers property, which is a packaged sender object. The packaged sender object defines the exception sampling and business collection packaged sender objects, respectively, which encapsulate data caching, data reporting, exception retry, and other logic. The logic of exception collection includes rewriting the open and send methods of XMLHttpRequest Web API and listening to errors.

[0057] Reference Figure 4 It can be seen that the implementation class structure diagram of the SDK technology, wherein Core is the core class of the entire SDK technology, used to call a plurality of methods compiled in advance in the Config, RequestBatcher, Persistence, Profle, and the like classes; Utils is a utility class, mainly providing some usage methods and data structures for the core class Core, and Cookie and Info are called in the utility class Utils; Cookie is an attribute and method for managing cookies in the SDK technology; Info is an information class, used to describe a class or a thing, and is used to describe browser information in the present scheme; PropertyFilter is a property filter class, mainly used in the process of exception data filtering; Exception is an exception class, used to capture abnormal situations in the front-end page; Config is a configuration class, used to set all configuration information; Persistence is a persistence class, used to store front-end data when performing batch reporting at a fixed time; Profile is a user information class, used to describe user data, including user information and configuration; RequestBatcher is a request batch processing class, used to collectively process additional same requests within a request time, and is mainly used to perform batch reporting of front-end data when performing batch reporting at a fixed time in the present scheme; RequestQueue is a request queue class, mainly used to connect requests and responses, and distribute received requests to a cache and a process to facilitate response to the requests. It can be understood that the RequestBatcher request batch processing class and the RequestQueue request queue class are interdependent. The RequestQueue receives a request and distributes it to the corresponding process, and the RequestBatcher collectively processes the same request when receiving the same request.

[0058] It can be seen that the embodiment first judges whether the current network condition meets the preset condition condition, if yes, the front-end data reporting rule is configured as a timing batch reporting rule, then the current collected front-end data is saved to the local preset cache, and finally based on the timing batch reporting control parameter carried in the timing batch reporting rule, the front-end data in the local preset cache which has not been reported is reported in batches to the preset back-end collection interface in a timing manner, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data. Therefore, the application configures the current front-end data reporting rule based on the current network condition, when the preset condition condition is not met, the current collected front-end data can be cached locally first, and then the front-end data is reported to the preset back-end collection interface based on the timing batch reporting rule. In this way, the reporting mode can be determined as timing batch reporting based on the current network condition, avoiding the problem of data reporting failure caused by still using the real-time reporting mode with high network performance requirement in the case of poor network condition, improving the success rate of data collection in the case of poor network condition, and ensuring the integrity of the front-end data through the local cache technology, greatly improving the accuracy of data sampling in front-end monitoring.

[0059] Based on the above embodiment, the application can configure the reporting rule as timing batch reporting based on the network condition, and store the front-end data in the local preset cache, so as to upload the front-end data to the preset back-end collection interface in a timing batch manner in the case of good network condition. Of course, in addition to the timing batch reporting mode, the front-end data can also be reported in a real-time reporting manner in the case of good network condition. Therefore, the real-time reporting process will be described in detail below. Referring to Figure 5 The embodiment of the application discloses a specific front-end monitoring method applied to a front-end, comprising:

[0060] Step S21: monitoring any one or combination of current network peak traffic, current network stability and browser smoothness to obtain a current network condition, and judging whether the current network condition meets a preset condition condition.

[0061] In this embodiment, the current network condition is obtained by monitoring any one or a combination of the current network peak traffic, the current network stability and the browser fluency, and it is determined whether the current network condition meets the preset condition. The network peak traffic is the maximum access traffic of the current webpage. The current network stability can be determined based on the current network packet loss rate, the change of the current network speed, etc. The browser fluency is used to reflect the current browser stuttering. In a specific embodiment, the browser fluency can be determined by monitoring the real-time frame rate of the webpage in the browser. Accordingly, if the current network peak traffic exceeds the preset network traffic threshold, the current network stability is lower than the preset stability threshold, the current browser fluency is lower than the preset fluency threshold, etc., it is determined that the current network condition meets the preset condition, that is, it indicates that the current network condition is relatively poor.

[0062] Step S22: If the current network condition does not meet the preset condition, the front-end data reporting rule is configured as a real-time reporting rule, and the current collected front-end data is reported to the preset back-end collection interface in real time.

[0063] In this embodiment, if the current network condition does not meet the preset condition, the front-end data reporting rule can be configured as a real-time reporting rule, and the current collected front-end data is reported to the preset back-end collection interface in real time. In this way, when the network condition is in a normal state, the front-end data can be reported to the preset back-end collection interface in real time, so that the user can solve the abnormal problems of the front-end in time through the front-end log information, and the effect of real-time front-end monitoring is achieved. It can be understood that if the current network condition does not meet the preset condition, it indicates that the current network condition is normal, and the front-end data reporting rule can also be configured as a timing batch reporting rule.

[0064] In a specific embodiment, reporting the current collected front-end data to the preset back-end collection interface can include: synchronously reporting the current collected front-end data to the preset back-end collection interface through an XMLHttpRequest request, that is, by listening to the unload or beforeunload event of the front-end page, the front-end data is reported through a synchronous XMLHttpRequest request. In this way, the front-end data is reported in a synchronous manner, which can ensure the completeness of the data and avoid uncontrollable accidents. The pseudo code for synchronous reporting is as follows:

[0065]

[0066] In another specific embodiment, reporting the current collected front-end data to the preset back-end collection interface can include: reporting the current collected front-end data to the preset back-end collection interface asynchronously by using the navigator.sendBeacon() method. By using the navigator.sendBeacon() method, data can be sent to the interface asynchronously without delaying the unload event of the page, the request is decoupled from the front-end page thread, and as a task of the browser process, it can ensure that the data is sent out and does not delay the unload event. In this way, the situation that the data sending is cancelled due to the page being unloaded in the synchronous reporting process can be avoided, and the reporting process is executed asynchronously by using multiple processes, which improves the reporting efficiency without affecting the user experience. In addition, combining synchronous reporting and asynchronous reporting can solve the compatibility problem of different browsers. In addition to common browsers such as Safari (Apple browser), Firefox, Chrome, and Microsoft Edge, IE8 and above browsers can also be perfectly compatible, and error collection can also be supported. It can be understood that both real-time reporting and batch reporting at regular intervals can use synchronous reporting or asynchronous reporting. The pseudo code for asynchronous reporting is as follows:

[0067]

[0068] As can be seen, in the case of a normal network state, the front-end data reporting rule can be configured to be real-time reporting, and the current collected front-end data can be reported to the preset back-end collection interface in real time and synchronously or asynchronously by using the XMLHttpRequest request or the navigator.sendBeacon() method. In this way, by using the real-time reporting method, the user can timely solve the abnormal situation of the front-end page, and combining synchronous reporting and asynchronous reporting can solve the compatibility problem of low-version browsers. In addition to supporting common browsers such as Safari (Apple browser), Firefox, Chrome, and Microsoft Edge, IE8 and above browsers can also be perfectly compatible, and error collection in the browser can also be supported, which effectively improves the effect of front-end monitoring.

[0069] Based on the above embodiments, in addition to batch reporting at regular intervals, the front-end data can also be reported to the preset back-end collection interface in real time and synchronously or asynchronously. Before performing the reporting operation, the data collection process of the front-end page needs to be performed, which will be described in detail below. Referring to Figure 6 The application embodiment discloses a specific front-end monitoring method applied to the front-end, which includes the following steps:

[0070] Step S31: Obtain the user information of the current user to obtain the user information to be authenticated, and authenticate the user information to be authenticated through a preset authentication switch to determine whether the current user is a legitimate user.

[0071] In this embodiment, before collecting front-end data, it is necessary to obtain the current user's information to obtain the user information to be authenticated. Then, an authentication operation is performed on the user information to be authenticated using a preset authentication switch to determine whether the current user is a legitimate user. In this way, by performing authentication on the current user information, unauthorized personnel can be prevented from obtaining front-end log information, thus preventing the leakage of user log information and protecting user security.

[0072] This embodiment uses a preset authentication switch to verify the legitimacy of users, so that the subsequent data collection service can be started when the user is legitimate. Therefore, the preset authentication switch in this embodiment is equivalent to the master switch for starting the data collection service.

[0073] Step S32: If the current user is a legitimate user, start the data collection service and extract the pre-configured target data type indicator field from the preset authentication switch; the target data type includes any one or a combination of user behavior data, browser page performance data, and webpage abnormal data; the webpage abnormal data indicator field is an indicator field constructed based on the filtering rules for the webpage abnormal data.

[0074] In the embodiment, if the current user is determined to be a legal user, the data collection service is started, and a preconfigured indication field of a target data type is extracted from a preset authentication switch. The target data type includes but is not limited to any one or a combination of several of user behavior data, browser page performance data, and web page exception data. The indication field of the user behavior data includes but is not limited to basic user information such as login / non-login user ID, IP address, and the like, access information such as PV (Page View) and UV (Unique visitor) of the access user, and the like. The indication field of the browser page performance data includes but is not limited to browser type and version, browser white screen time, first rendering time, script loading time, interface response time, and the like. The indication field of the web page exception data includes but is not limited to all script resource loading errors used in the web page, page interaction running error, backend API request timeout, response data JSON (JavaScript Object Notation) syntax error, parameter interaction error, and the like. In addition to the above data types, device information such as operating system type and version can also be considered. It should be noted that the indication field of the web page exception data is an indication field constructed based on a filtering rule for the web page exception data. That is, when the web page exception data is allowed to be collected, the indication field of the web page exception data is filtered based on a preset filtering rule to filter out unnecessary indication fields of the web page exception data and obtain valid indication fields, so as to reduce the occupation of memory resources. Of course, in the case of collecting as comprehensive exception data as possible, the embodiment can also not filter the indication field of the web page exception data, that is, the above filtering rule can not be set at this time. It can be understood that the preconfigured indication field of the target data type can be a system default configuration or a selected configuration based on a preset configuration interface before starting the data collection service. For example, the indication field can be configured by the server dynamically issuing different types of indication fields before data collection, so that the user can configure the collected data type based on the demand, thereby facilitating the acquisition of data with higher utilization value.

[0075] Step S33: Collecting front-end data of the corresponding type by the data collection service and using the indication field.

[0076] In the embodiment, after the indication field of the target data type is extracted, the data collection service collects the front-end data of the response type by using the indication field, which is equivalent to subdividing a more specific sub-switch for controlling the corresponding data collection based on the respective indication field on the basis of the total switch. The embodiment decouples the front-end configuration and supports the dynamic delivery mechanism of the server side, can more easily and quickly regulate and control the collection strategy, and through the interface service configuration, the user can obtain more effective data while ensuring the stability of the data collection service and reducing the occupation of memory resources.

[0077] In the embodiment, the process of collecting the front-end data can further include monitoring whether the preset emergency stop condition is met; and if it is detected that the preset emergency stop condition is met, a preset control switch is called from a preset interface, and a preset control parameter in the preset control switch is configured as a target parameter value for controlling the front-end to stop collecting the front-end data. That is, in the process of collecting the data, if it is detected that the preset emergency stop condition is met, a preset control switch is called from a preset interface, and a preset control parameter in the preset control switch is configured as a target parameter value for controlling the front-end to stop collecting the front-end data. The target parameter value is NO, and if the preset control parameter is configured as YES, it indicates that the front-end data is continuously collected. The preset emergency condition includes but is not limited to that the current user becomes an illegal user from a legal user due to some reasons. In this way, by adding the control switch for stopping the data collection in an emergency, the data collection operation can be controlled to stop in an emergency, which plays an emergency braking role and ensures that the user's information security is not infringed.

[0078] In the embodiment, reference is made to Figure 7As shown, the SDK script resource is implanted in the Web (World Wide Web, i.e. global wide area network) client browser environment, a JavaScript script file is introduced in an external chain mode, and data collection is performed through asynchronous request in the process of listening to JavaScript runtime. In the process of executing the inline script, the open() and send() methods in the XMLHttpRequest request object are mainly responsible for rewriting to capture the Ajax asynchronous request error, in addition, the error stack information is captured by means of the Window.onerror function of the browser, and the browser global error event is listened to, if the event is triggered, the error information is cached, so as to send the error report after the subsequent SDK script is loaded; in the process of executing the SDK script, the main responsibility is to listen to the JS (JavaScript) runtime execution error, listen to the JSPromise unhandled error, listen to the Ajax (Asynchronous JavaScript And XML And HTML, i.e. asynchronous JavaScript and XML) request error, listen to the resource loading error, listen to the console error, and listen to the console warming. The code demonstration of the JavaScript runtime error capture mode is as follows:

[0079]

[0080] The data collection process will be described by way of example, with reference to Figure 8 As described, first, it is judged whether to start data collection, if not, the data collection is prohibited, if yes, it is judged whether to allow collection of user behavior data (allowDcCollection), if not, the collection of the user behavior data is prohibited, if yes, the user behavior data is collected; at the same time, it is judged whether to allow collection of page exceptions (allowErrorCollection), if not, the collection of the page exception data is prohibited, if yes, it is judged whether to filter exception types (errorTypeFilterList), if not, all page exception data is collected, if yes, the page exception data is collected based on the filtering rules; it is judged whether to allow collection of page performance data (allowPerfCollection), if not, the collection of the page performance data is prohibited, if yes, the page performance data is collected.

[0081] It can be seen that in the embodiment, user information of a current user is first acquired and an authentication operation is performed to determine whether the current user is legal, and if so, a data collection service is started, and an indication field of a target data type configured in advance is extracted from the preset authentication switch, and then the data collection service is used to collect front-end data of the corresponding type by using the indication field. In this way, the flexibility of data collection is higher by configuring multiple indication fields in the authentication switch, the collection strategy is conveniently controlled by using a server dynamic distribution mechanism, the stability of the collection service is ensured, and the occupation of memory resources is reduced.

[0082] Reference Figure 9 According to the above description, the embodiment of the present application also discloses a front-end monitoring device applied to a front-end and comprising:

[0083] A network condition monitoring module 11 is configured to monitor a current network condition and determine whether the current network condition meets a preset condition condition.

[0084] A reporting rule configuration module 12 is configured to configure a front-end data reporting rule as a timing batch reporting rule if the current network condition meets the preset condition condition.

[0085] A front-end data saving module 13 is configured to save the collected front-end data to a local preset cache.

[0086] A front-end data reporting module 14 is configured to report the front-end data in the local preset cache which has not been reported to a preset back-end collection interface in batches based on timing batch reporting control parameters carried in the timing batch reporting rule, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data.

[0087] It can be seen that the embodiment first judges whether the current network condition meets the preset condition condition, if yes, the front-end data reporting rule is configured as a timing batch reporting rule, then the current collected front-end data is saved to the local preset cache, and finally based on the timing batch reporting control parameter carried in the timing batch reporting rule, the front-end data in the local preset cache which has not been reported is reported in batches to the preset back-end collection interface in a timing manner, so that the preset back-end collection interface generates a corresponding front-end log file based on the received front-end data. Therefore, the current front-end data reporting rule is configured based on the current network condition, when the preset condition condition is not met, the current collected front-end data can be cached locally, and then the front-end data is reported to the preset back-end collection interface based on the timing batch reporting rule. In this way, the reporting mode can be effectively determined as timing batch reporting based on the current network condition, thereby avoiding the problem of data reporting failure caused by still using the real-time reporting mode with high network performance requirement in the case of poor network condition, improving the success rate of data collection in the case of poor network condition, and ensuring the integrity of the front-end data through the local cache technology, and greatly improving the accuracy of data sampling in front-end monitoring.

[0088] In some specific embodiments, the network condition monitoring module 11 can be specifically configured to monitor any one or a combination of current network peak traffic, current network stability and browser smoothness to obtain the current network condition.

[0089] In some specific embodiments, the front-end monitoring device can further include:

[0090] The timing reporting module is configured to configure the front-end data reporting rule as a real-time reporting rule if the current network condition does not meet the preset condition condition, and to report the current collected front-end data to the preset back-end collection interface in real time.

[0091] In some specific embodiments, the front-end data reporting module 14 can specifically include:

[0092] The synchronous reporting unit is configured to synchronously report the current collected front-end data to the preset back-end collection interface through an XMLHttpRequest request;

[0093] The asynchronous reporting unit is configured to asynchronously report the current collected front-end data to the preset back-end collection interface by using a navigator.sendBeacon() method.

[0094] In some specific embodiments, the front-end monitoring device can further include:

[0095] The information authentication module is configured to obtain user information of a current user to obtain to-be-authenticated user information, and authenticate the to-be-authenticated user information through a preset authentication switch to determine whether the current user is a legal user.

[0096] The data collection module is configured to start a data collection service and collect front-end data through the data collection service if the current user is a legal user.

[0097] In some specific embodiments, the data collection module specifically can include:

[0098] The field extraction unit is configured to extract an indication field of a preconfigured target data type from the preset authentication switch; the target data type includes any one or a combination of several of user behavior data, browser page performance data, and web exception data; and the indication field of the web exception data is an indication field constructed based on a filtering rule for the web exception data.

[0099] The data collection unit is configured to collect front-end data of a corresponding type through the data collection service and using the indication field.

[0100] In some specific embodiments, the front-end monitoring device can further include:

[0101] The condition judgment module is configured to monitor whether a preset emergency stop condition is met in the process of collecting the front-end data.

[0102] The switch configuration module is configured to retrieve a preset control switch from a preset interface and configure a preset control parameter in the preset control switch as a target parameter value for controlling the front-end to stop collecting the front-end data if it is monitored that the preset emergency stop condition is met.

[0103] Further, the embodiment of the present application further discloses an electronic device, Figure 10 is a structural diagram of an electronic device 20 according to an exemplary embodiment, and the content in the figure cannot be considered as any limitation on the use range of the present application.

[0104] Figure 10 A structural schematic diagram of an electronic device 20 provided by the embodiment of the present application. The electronic device 20 specifically can include at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 is configured to store a computer program, the computer program is loaded and executed by the processor 21 to implement related steps in the front-end monitoring method disclosed in any of the preceding embodiments. In addition, the electronic device 20 in the embodiment specifically can be an electronic computer.

[0105] In this embodiment, the power supply 23 is configured to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 is configured to create a data transmission channel between the electronic device 20 and external devices, and the communication protocol followed by the communication interface 24 can be any communication protocol applicable to the technical solution of the present application, which will not be specifically limited herein; the input / output interface 25 is configured to obtain external input data or output data to the outside, and the specific interface type can be selected according to the specific application needs, which will not be specifically limited herein.

[0106] In addition, the memory 22 as a carrier of resource storage can be a read-only memory, a random access memory, a magnetic disk or an optical disk, etc., and the resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage mode can be temporary storage or permanent storage.

[0107] The operating system 221 is configured to manage and control each hardware device on the electronic device 20 and the computer program 222, and can be Windows Server, Netware, Unix, Linux, etc. In addition to the computer program capable of completing the front-end monitoring method executed by the electronic device 20 disclosed in any of the preceding embodiments, the computer program 222 can further include a computer program capable of completing other specific work.

[0108] Further, the present application further discloses a computer readable storage medium for storing a computer program; wherein the computer program is executed by a processor to implement the front-end monitoring method disclosed above. For the specific steps of the method, please refer to the corresponding contents disclosed in the preceding embodiments, which will not be described here.

[0109] The embodiments in the specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. For the same or similar parts between the embodiments, please refer to each other. For the device disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple, and please refer to the method part for the related contents.

[0110] The skilled person can further realize that the units and algorithm steps of the examples described in combination with the embodiments disclosed herein can be realized in electronic hardware, computer software or a combination of the two. In order to clearly show the interchangeability of hardware and software, the components and steps of each example have been described in the above description. Whether the functions are realized in hardware or software depends on the specific application and design constraints of the technical solution. The skilled person can use different methods to realize the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0111] The steps of a method or algorithm described in connection with the embodiments disclosed herein can be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module can reside in RAM, flash memory, ROM, electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art. The

[0112] Finally, it should be noted that the terms "first", "second", and the like, herein do not denote any order, quantity, combination, or importance, but rather are used to distinguish one element from another, and do not imply or require any such actual relationship or order. Also, the terms "comprises", "comprising", or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can also include other elements not expressly listed or inherent to such process, method, article, or apparatus. An element proceeded by "comprises... a" does not, without more constraints, exclude the existence of additional identical elements in the process, method, article, or apparatus that comprises the element.

[0113] The above detailed description of the technical solutions provided by the present application has been described in detail, and the principles and implementation modes of the present application have been described by applying specific examples; the above description of the embodiments is only for the purpose of helping to understand the method of the present application and its core idea; at the same time, for those skilled in the art, according to the idea of the present application, the specific implementation mode and application range will be changed, and the above description of the content of the specification should not be understood as a limitation of the present application.

Claims

1. A front-end monitoring method, characterized by, The application is applied to a front end, comprising: Monitoring any one or a combination of current network peak traffic, current network stability and browser smoothness to obtain a current network condition; wherein the network peak traffic is the maximum access traffic of a current webpage; the current network stability is determined based on a current network packet loss rate and a change in current network speed; the browser smoothness is used to reflect a current browser stuttering condition; If the current network condition meets a preset condition, a front end data reporting rule is configured as a timing batch reporting rule, and current collected front end data is saved to a local preset cache; wherein a real-time reporting rule and the timing batch reporting rule are switched by the front end based on the current network condition; Based on timing batch reporting control parameters carried in the timing batch reporting rule, the front end data in the local preset cache that has not been reported is reported in batches to a preset back end collection interface at a timing, so that the preset back end collection interface aggregates and processes the front end data according to a preset data template and generates a responsive front end log file stored to a local, and the front end log file is pushed to an operation and maintenance log data center by a data pushing tool, and effective data is used for visual display and analysis; the timing batch reporting control parameters include a reporting delay time length and a batch reporting data amount, the reporting delay time length is a time interval between each two reporting operations, and the batch reporting data amount is a specific data amount reported at each batch reporting; The method further comprises: obtaining user information of a current user to obtain to-be-authenticated user information, and authenticating the to-be-authenticated user information through a preset authentication switch, if the current user is a legal user, starting a data collection service, and extracting an indication field of a target data type from the preset authentication switch; the target data type includes any one or a combination of user behavior data, browser page performance data and webpage exception data; the indication field of the webpage exception data is an indication field constructed based on a filtering rule for the webpage exception data; collecting front end data of a corresponding type through the data collection service and using the indication field.

2. The front-end monitoring method of claim 1, wherein, After determining whether the current network condition meets the preset condition, the method further comprises: If the current network condition does not meet the preset condition, a front end data reporting rule is configured as a real-time reporting rule, and current collected front end data is reported to the preset back end collection interface in real time.

3. The front-end monitoring method of claim 2, wherein, Reporting the current collected front end data to the preset back end collection interface comprises: Synchronously reporting the current collected front end data to the preset back end collection interface through an XMLHttpRequest request; Or, asynchronously reporting the current collected front end data to the preset back end collection interface by using a navigator.sendBeacon() method.

4. The front-end monitoring method according to any one of claims 1 to 3, characterized in that, Further comprising: In the process of collecting the front end data, it is monitored whether a preset emergency stop condition is met. If the preset emergency stop condition is met, a preset control switch is called from a preset interface, and a preset control parameter in the preset control switch is configured as a target parameter value for controlling the front end to stop collecting the front end data.

5. A front-end monitoring device, characterized by Applied to the front end, comprising: A network condition monitoring module is configured to monitor any one or a combination of current network peak traffic, current network stability, and browser smoothness to obtain a current network condition. The network peak traffic is the maximum access traffic of a current webpage. The current network stability is determined based on a current network packet loss rate and a change in current network speed. The browser smoothness is used to reflect a current browser stuttering condition. A reporting rule configuration module is configured to configure a front end data reporting rule as a timing batch reporting rule if the current network condition meets a preset condition. Real-time reporting rules and the timing batch reporting rule are switched by the front end based on the current network condition. A front end data saving module is configured to save currently collected front end data to a local preset cache. A front end data reporting module is configured to report the front end data in the local preset cache that has not been reported to a preset back end collection interface in batches based on timing batch reporting control parameters carried in the timing batch reporting rule, so that the preset back end collection interface aggregates and processes the front end data according to a preset data template to generate a response front end log file and stores the response front end log file to a local terminal. The front end log file is pushed to an operation and maintenance log data center by a data pushing tool, and effective data is used for visual display and analysis. The timing batch reporting control parameters include a reporting delay time length and a batch reporting data amount. The reporting delay time length is a time interval between each two reporting operations. The batch reporting data amount is a specific data amount reported in each batch. The front end monitoring device further comprises an information authentication module configured to obtain user information of a current user to obtain to-be-authenticated user information, and authenticate the to-be-authenticated user information through a preset authentication switch to determine whether the current user is a legal user. A data collection module is configured to start a data collection service and collect front end data through the data collection service if the current user is a legal user. The data collection module specifically comprises: A field extraction unit is configured to extract an indication field of a target data type from the preset authentication switch. The target data type includes any one or a combination of user behavior data, browser page performance data, and webpage exception data. The indication field of the webpage exception data is an indication field constructed based on a filtering rule for the webpage exception data. A data collection unit is configured to collect front end data of a corresponding type through the data collection service and using the indication field.

6. An electronic device, comprising: Comprising: A memory is configured to save a computer program. A processor is configured to execute the computer program to implement the front end monitoring method according to any one of claims 1 to 4.

7. A computer readable storage medium characterized by A computer program product for saving a computer program which, when executed by a processor, implements the front-end monitoring method according to any one of claims 1 to 4.

Images