Front-end performance monitoring and active data reporting method

Abstract

The invention particularly relates to a front-end performance monitoring and data active reporting method. The front-end performance monitoring and data active reporting method comprises the following steps: generating a global basic configuration file, obtaining webpage loading information, browser information and operating system information, and monitoring and capturing webpage abnormal information; the method comprises the following steps of: overwriting an original XML (extensible markup language) HttpRequest and a Fetch object of the JavaScript to obtain request response state information; carrying out compression, encryption and duplicate removal on the reported data; a navigator.sendBeacon method is used for carrying out data reporting at the idle moment of a browser, so that normal loading of a page or user interaction is prevented from being blocked; and performing visual preview on the monitored data through the visual platform. According to the front-end performance monitoring and data active reporting method, the burden of a network and a server is reduced, the dependence on third-party service is reduced, so that the cost and privacy risk are reduced, the expandability and maintainability of the system are enhanced, the monitoring strategy can flexibly adapt to continuously changing service requirements, and the service quality of the system is improved. Therefore, the accuracy and efficiency of performance monitoring are improved.

Description

Technical Field

[0001] The present invention relates to the field of communication technologies, and particularly to a method for monitoring front-end performance and actively reporting data. Background Art

[0002] Currently, Web front-end performance monitoring mainly relies on server-side log analysis or integrating third-party monitoring services. Although these methods can provide certain performance data, they have obvious defects. For example, server-side log analysis or integrating third-party monitoring services often cannot capture and feedback client performance data in real time, which is particularly crucial for quickly identifying and solving performance problems.

[0003] Meanwhile, with the increase in data volume, a large amount of performance data transmitted to the server over the network will cause an additional burden on bandwidth and server resources, especially in the context of high user traffic.

[0004] In addition, existing technologies are usually limited in data processing capabilities, configuration flexibility, and user experience, and may bring additional costs and privacy concerns due to relying on third-party services.

[0005] In order to help developers more efficiently diagnose and optimize application performance and improve user experience, the present invention proposes a method for monitoring front-end performance and actively reporting data. Summary of the Invention

[0006] The present invention provides a simple and efficient method for monitoring front-end performance and actively reporting data to make up for the defects of the prior art.

[0007] The present invention is implemented by the following technical solutions:

[0008] A method for monitoring front-end performance and actively reporting data includes the following steps:

[0009] Step S1: Generate a global basic configuration file, including the monitoring frequency, reporting frequency, and data reporting address of the storage monitoring module for deployment;

[0010] Step S2: Obtain web page loading information, including page loading time, DOM processing time, and resource loading time;

[0011] Step S3: Obtain browser information and operating system information, including browser type, version, and operating system version;

[0012] Step S4: Monitor and capture web page exception information, including JavaScript runtime error events and request exception information;

[0013] Step S5: Overwrite the native XMLHttpRequest and Fetch objects in JavaScript to obtain request response status information;

[0014] Step S6: Compress, encrypt, and deduplicate the reported data;

[0015] Step S7: Use the navigator.sendBeacon method to report data;

[0016] If the browser does not support the navigator.sendBeacon method, use the Image constructor to report data;

[0017] Monitor the browser status and report data at idle moments when both the browser interaction and loading frequency are lower than the custom threshold to avoid blocking the normal page loading or user interaction;

[0018] Or customize and set up a scheduled task to report data at regular intervals;

[0019] Step S8: Perform a visual preview of the monitored data through a visualization platform.

[0020] In the said Step S2, the web page loading information further includes the page resource size, user behavior events, network environment information, and user device information;

[0021] The said user behavior events include clicks and inputs;

[0022] The said network environment information includes the network type and speed;

[0023] The said user device information includes the device type and the operating system version.

[0024] In the said Step S3, the browser information further includes the browser language and time zone, and the operating system information further includes the operating system architecture and version number.

[0025] In the said Step S4, when a JavaScript runtime error event is captured, clean the captured error information, classify the error information, and store the error type, error source (source), error line number (lineno), and error object (error) in the message reporting platform.

[0026] The request exception information includes the request URL, request method, request headers, response status code, response header information, and response time.

[0027] In the said Step S5, the implementation process is as follows:

[0028] Step S5.1: Save the references to the constructors of the native XMLHttpRequest and Fetch objects and replace them with custom constructors respectively;

[0029] Step S5.2: Whenever a request is initiated, automatically record the request URL, request method, and request header information in the custom constructor, and then call the native method to send the request;

[0030] Step S5.3: Wait for the server response. After the server response, intercept the received result, judge the response status, and at the same time return the response result, and put the response header, response status code, and response time information into the previously stored request information and send it out.

[0031] In the said Step S7, judge whether there is a navigator.sendBeacon method in the browser. If so, call the method to pass in the data interface server URL address and the message input to report the data;

[0032] If the browser does not support the navigator.sendBeacon method, create an Image object, set the src attribute to a URL address pointing to the data receiving server, and pass in the message content as a query parameter;

[0033] And add onload and onerror event handlers to the Image object to track whether the data is successfully uploaded and upload errors.

[0034] In the said Step S7, before data reporting, first judge whether the reported data is repeated. If there are duplicate items, filter out the duplicate items;

[0035] Then, judge the message type. If it is a loading message, report it immediately after receiving it, otherwise put it into the message array.

[0036] A system for a front-end performance monitoring and data active reporting method, including:

[0037] A data collection module, used to execute Steps S1 - S5;

[0038] A reporting strategy optimization, used to execute Step S6;

[0039] A data reporting module, used to execute Step S7;

[0040] A visualization platform, used to perform visual preview on the monitored data.

[0041] A front-end performance monitoring and data active reporting device, characterized in that: it includes a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the above method steps when executing the computer program.

[0042] A readable storage medium, characterized in that: a computer program is stored on the readable storage medium, and when the computer program is executed by a processor, the above-mentioned method steps are implemented.

[0043] The beneficial effect of the present invention is that: the front-end performance monitoring and data active reporting method reduces the burden on the network and server by reducing the amount of data transmission, and at the same time reduces the dependence on third-party services to reduce costs and privacy risks;

[0044] In addition, through probe-based deployment, the scalability and maintainability of the system are enhanced, enabling the monitoring strategy to flexibly adapt to changing business requirements, thereby improving the accuracy and efficiency of performance monitoring and enhancing the end-user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0046] Attached Figure 1 is a schematic diagram of the front-end performance monitoring and data active reporting method of the present invention.

[0047] Attached Figure 2 is a schematic diagram of data reporting of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0048] In order to enable those skilled in the art to better understand the technical solutions in the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the scope of protection of the present invention.

[0049] The front-end performance monitoring and data active reporting method includes the following steps:

[0050] Step S1: Generate a global basic configuration file, including the monitoring frequency, reporting frequency, and data reporting address of the storage monitoring module for deployment;

[0051] Step S2: Obtain web page loading information, including page loading time, DOM processing time, and resource loading time;

[0052] Collect the navigationStart (timestamp of the start of loading), domLoading (timestamp of receiving the first byte of the HTML document), domComplete (timestamp of completing the parsing of the HTML document), loadEventEnd (timestamp of the entire page finishing loading), responseStart (timestamp of the browser starting to receive response data), and responseEnd (timestamp of finishing receiving response data) in the performance object, and calculate the page loading time, DOM processing (rendering) time, and resource loading time. Store the information in the message reporting method and wait for the trigger to report.

[0053] Page loading time: loadEventEnd – navigationStart (i.e., the time when the entire page finishes loading minus the start time of loading);

[0054] DOM processing (rendering) time: domComplete - domLoading (i.e., the time of completing the parsing of the HTML document minus the time of receiving the first byte of the HTML document);

[0055] Resource loading time: responseEnd – responseStart (i.e., the time of finishing receiving response data minus the time when the browser starts to receive response data).

[0056] Step S3: Obtain browser information and operating system information, including browser type, version, and operating system version;

[0057] Step S4: Monitor and capture web page exception information, including JavaScript runtime error events and request exception information;

[0058] Step S5: Overwrite the native XMLHttpRequest and Fetch objects in JavaScript to obtain request response status information;

[0059] Step S6: Compress, encrypt, and deduplicate the reported data;

[0060] Step S7: Use the navigator.sendBeacon method for data reporting;

[0061] If the browser does not support the navigator.sendBeacon method, use the Image constructor for data reporting;

[0062] Monitor the browser status and report data at idle moments when both the browser interaction and loading frequency are lower than the custom threshold to avoid blocking the normal page loading or user interaction;

[0063] Or customize the setting of scheduled tasks to perform data reporting at regular intervals;

[0064] Step S9: Perform visual preview on the monitored data through a visualization platform.

[0065] In the said step S2, the web page loading information further includes page resource size, user behavior events, network environment information, and user device information;

[0066] The said user behavior events include clicks and inputs;

[0067] The said network environment information includes network type and speed;

[0068] The said user device information includes device type and operating system version.

[0069] In the said step S3, the browser information further includes browser language and time zone, and the operating system information further includes operating system architecture and version number.

[0070] In the said step S4, when a JavaScript runtime error event is captured, clean the captured error information, classify the error information, and store the error type, error source (source), error line number (lineno), and error object (error) in the message reporting platform.

[0071] The request exception information includes request URL, request method, request headers, response status code, response header information, and response time.

[0072] Since modern web pages may use XMLHttpRequest and Fetch objects to initiate requests simultaneously, it is necessary to override XHR and Fetch during the initialization of the entire project to monitor and record web page exception information.

[0073] In the said step S5, the implementation process is as follows:

[0074] Step S5.1: Save the references to the constructor functions of the native XMLHttpRequest and Fetch objects, and replace them with custom constructor functions respectively;

[0075] Step S5.2: Whenever a request is initiated, automatically record the request URL, request method, and request header information in the custom constructor function, and then call the native method to send the request;

[0076] Step S5.3: Wait for the server response, intercept the received result after the server response, judge the response status, and at the same time return the response result, and put the response header, response status code, and response time information into the previously stored request information and send it out.

[0077] In step S7, it is judged whether there is a navigator.sendBeacon method in the browser. If so, the method is called to pass in the data interface server URL address and the message input for reporting data;

[0078] If the browser does not support the navigator.sendBeacon method, an Image object is created, the src attribute is set to a URL address pointing to the data receiving server, and the message content is passed in as a query parameter;

[0079] And onload and onerror event handlers are added to the Image object to track whether the data is successfully uploaded and the upload error.

[0080] In step S7, before data reporting, it is first judged whether the reported data is repeated. If there are duplicate items, the duplicate items are filtered out;

[0081] Then, the message type is judged. If it is a loading message, it is reported immediately after being received, otherwise it is put into the message array.

[0082] The system of the front-end performance monitoring and data active reporting method includes:

[0083] A data collection module for executing steps S1 - S5;

[0084] Reporting strategy optimization for executing step S6;

[0085] A data reporting module for executing step S7;

[0086] A visualization platform for visually previewing the monitored data;

[0087] Display real-time performance data through a performance monitoring dashboard, including page load time, resource load time, and error rate, to help website administrators quickly understand the application performance status;

[0088] Display user behavior paths and preferences through a user behavior analysis report to help developers optimize product design;

[0089] Display error types and occurrence frequencies through a front-end error analysis report to help developers locate and solve problems;

[0090] Generate performance optimization suggestions based on the data analysis results and provide targeted performance optimization suggestions.

[0091] The front-end performance monitoring and data active reporting device includes a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the above method steps when executing the computer program.

[0092] A computer program is stored on the readable storage medium, and when the computer program is executed by a processor, the above-mentioned method steps are implemented.

[0093] The front-end performance monitoring and data proactive reporting method provides a low-coupling, highly efficient and accurate Web front-end performance monitoring and data reporting system for multiple platforms. By reducing the amount of data transmission, it reduces the burden on the network and servers, and at the same time reduces the dependence on third-party services to reduce costs and privacy risks;

[0094] In addition, through probe-based deployment, the scalability and maintainability of the system are enhanced, enabling the monitoring strategy to flexibly adapt to changing business requirements, thereby improving the accuracy and efficiency of performance monitoring and enhancing the experience of end users.

[0095] The above-described embodiments are only one of the specific implementation manners of the present invention, and ordinary changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included in the protection scope of the present invention.

Claims

1. A front-end performance monitoring and data active reporting method, characterized in that: The following steps are involved: Step S1: Generate a global basic configuration file, including the monitoring frequency, reporting frequency and data reporting address of the storage monitoring module for deployment; Step S2: Obtain web page loading information, including page loading time, DOM processing time and resource loading time; Step S3: Obtain browser information and operating system information, including browser type, version and operating system version; Step S4: monitor and capture web page exception information, including JavaScript runtime error events and request exception information; Step S5: Override JavaScript native XMLHttpRequest and Fetch objects to obtain request response status information; Step S6: compress, encrypt and remove duplicates from the reported data; Step S7: Use navigator.sendBeacon method to report data; If the browser does not support the navigator.sendBeacon method, the Image constructor is used to report data; Monitor the browser status and report data during idle time when the browser interaction and loading frequency are both below the custom threshold to avoid blocking the normal loading of the page or blocking user interaction; Or you can customize the scheduled tasks and report data regularly; Step S8: Perform a visual preview of the monitored data through the visualization platform.

2. The front-end performance monitoring and data active reporting method according to claim 1 is characterized in that: In step S2, the webpage loading information also includes page resource size, user behavior events, network environment information and user device information; The user behavior events include clicks and inputs; The network environment information includes network type and speed; The user device information includes the device type and operating system version.

3. The front-end performance monitoring and data active reporting method according to claim 1 is characterized in that: In step S3, the browser information also includes the browser language and time zone, and the operating system information also includes the operating system architecture and version number.

4. The front-end performance monitoring and data active reporting method according to claim 1 is characterized in that: In step S4, when a JavaScript runtime error event is captured, the captured error information is cleaned, the error information is classified, and the error type, error source, error line number and error object are stored in the message reporting platform; Request exception information includes request URL, request method, request header, response status code, response header information and response time.

5. The front-end performance monitoring and data active reporting method according to claim 1 is characterized in that: In step S5, the implementation process is as follows: Step S5.1: Save the references of the constructors of the native XMLHttpRequest and Fetch objects, and replace them with the custom constructors respectively; Step S5.2: Whenever a request is initiated, the request URL, request method, and request header information are automatically recorded in the custom constructor, and then the native method is called to send the request; Step S5.3: Wait for the server to respond, intercept the result after the server responds, determine the response status, return the response result, and put the response header, response status code and response time information into the previously stored request information and send it out.

6. The front-end performance monitoring and data active reporting method according to claim 1 is characterized in that: In step S7, it is determined whether there is a navigator.sendBeacon method in the browser, and if so, the method is called to pass the data interface server URL address and message input to the reported data; If the browser does not support the navigator.sendBeacon method, create an Image object, set the src attribute to a URL address pointing to the data receiving server, and pass the message content as a query parameter; And add onload and onerror event handlers to the Image object to track whether the data is uploaded successfully and upload errors.

7. The front-end performance monitoring and data active reporting method according to claim 1 is characterized in that: In step S7, before the data is reported, it is first determined whether the reported data is repeated, and if there are duplicates, the duplicates are filtered out; Then, determine the message type. If it is loading information, report it immediately after receiving it, otherwise put it into the message array.

8. A system based on the front-end performance monitoring and data active reporting method according to any one of claims 1 to 7, characterized in that: include: A data acquisition module, used to execute steps S1-S5; Reporting strategy optimization, for executing step S6; A data reporting module, used to execute step S7; Visualization platform, used for visual preview of monitored data.

9. A front-end performance monitoring and data active reporting device, characterized in that: The method comprises a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the method according to any one of claims 1 to 7 when executing the computer program.

10. A readable storage medium, characterized in that: The readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images