Method, device and storage medium for performance monitoring of a front-end interface

Abstract

The application relates to the field of front-end performance monitoring, and discloses a front-end interface performance monitoring method, device and storage medium. The method comprises the following steps: a front-end acquisition system collects network events and generates an event feedback request; a tracking code is generated according to a preset tracking code generation algorithm; the tracking code is written into an HTTP request header of the event feedback request to obtain an event monitoring request, and the event monitoring request is sent to a data processing system; the data processing system writes the event monitoring request into a preset RocksDB database according to a timestamp; business data in the RocksDB database is subjected to operation processing to generate a business prediction value; the business data in the RocksDB database is subjected to window sliding judgment processing to generate an interface monitoring result, and the interface monitoring result is sent to a preset management port. In the embodiment of the application, real-time monitoring and analysis of the front-end interface are realized, and resource waste is identified through analysis of interface performance data.

Description

Technical Field

[0001] This invention relates to the field of front-end performance monitoring, and in particular to a method, device and storage medium for monitoring the performance of a front-end interface. Background Technology

[0002] As internet applications increasingly demand higher user experience, front-end performance monitoring has become a routine requirement for the operation of various websites and mobile applications. Currently, the industry commonly adopts the method of embedding monitoring scripts in front-end pages or applications to collect performance data on page loading, resource requests, user interactions, and other aspects, and then send the data back to the back-end server for subsequent statistics, analysis, and alerts. This type of solution usually needs to solve problems such as the selection of collection timing, data volume control, network transmission efficiency, and multi-terminal compatibility. In practice, various sampling strategies, compression algorithms, and data reporting mechanisms have emerged to balance monitoring accuracy and system overhead.

[0003] Meanwhile, to help developers and operations personnel quickly pinpoint performance bottlenecks, existing systems often aggregate, categorize, and visualize collected performance data, and perform correlation analysis in conjunction with business dimensions. For example, performance metrics are mapped to page URLs, user regions, device types, or business events to help determine the scope and root cause of performance degradation. Furthermore, to reduce interference with normal business processes, some solutions introduce delayed reporting, batch sending, local caching, or offline reporting mechanisms to improve the completeness and stability of monitoring data. However, existing technologies for front-end performance monitoring only cover basic metrics such as page load time and lack monitoring of the interface request chain, requiring a new technology to address this issue. Summary of the Invention

[0004] The main objective of this invention is to solve the technical problem that existing technologies only involve basic indicators such as page load time and lack monitoring of the interface request chain.

[0005] The first aspect of this invention provides a method for monitoring the performance of a front-end interface. This method is applied to a front-end interface performance monitoring system, which includes a front-end data acquisition system and a data processing system. The method for monitoring the performance of the front-end interface includes:

[0006] The front-end data collection system collects network events based on the API interface of a preset browser and generates event feedback requests;

[0007] Generate a tracking code according to a preset tracking code generation algorithm;

[0008] Using the browser's native network request tool, the tracking code is written into the HTTP request header of the event feedback request to obtain the event monitoring request, and the event monitoring request is sent to the data processing system. The event monitoring request includes: timestamp and business data.

[0009] The data processing system receives the event monitoring request based on a preset message queue;

[0010] Based on the timestamp, the event monitoring request is written into the preset RocksDB database;

[0011] Based on the preset baseline generation algorithm and the timestamp, the business data in the RocksDB database is processed to generate business prediction values;

[0012] Based on the preset fluctuation deviation algorithm and the business prediction value, the business data in the RocksDB database is subjected to window sliding judgment processing to generate interface monitoring results, and the interface monitoring results are sent to the preset management port.

[0013] Optionally, in a first implementation of the first aspect of the present invention, the step of collecting network events based on the API interface of a preset browser and generating an event feedback request includes:

[0014] Business data is obtained by collecting network data and custom data using the browser's API interface;

[0015] Collect the timestamp of the browser's request start time;

[0016] The business data and the timestamp are assembled and processed to generate an event feedback request.

[0017] Optionally, in a second implementation of the first aspect of the present invention, the step of generating a tracking code according to a preset tracking code generation algorithm includes:

[0018] Convert the timestamp to hexadecimal to obtain the first combined string;

[0019] A random number of bytes is randomly generated using a random number generator, and a second combined string is generated based on the random number of bytes.

[0020] The IP address of the browser is hashed to obtain the third combined string;

[0021] The first combined string, the second combined string, and the third combined string are combined to generate a tracking code.

[0022] Optionally, in a third implementation of the first aspect of the present invention, the step of writing the tracking code into the HTTP request header of the event feedback request using the browser's native network request tool to obtain the event monitoring request includes:

[0023] Based on the preset open() function, the metadata of the event feedback request is rewritten to generate a rewrite request;

[0024] Based on the preset send() function, the tracking code is written into the HTTP request header of the rewrite request to generate a listening request;

[0025] Based on the preset fetch() function, the listening request is overwritten to generate an event monitoring request.

[0026] Optionally, in a fourth implementation of the first aspect of the present invention, the step of processing the business data in the RocksDB database according to a preset baseline generation algorithm and the timestamp to generate a business prediction value includes:

[0027] Based on the preset observation period, preset trend period, and preset seasonal period, the business data in the RocksDB database is subjected to parameter smoothing calculation to obtain horizontal components, trend components, and seasonal components.

[0028] Based on the horizontal component, the trend component, and the seasonal component, business forecast values ​​are generated.

[0029] Optionally, in a fifth implementation of the first aspect of the present invention, the step of performing parameter smoothing calculation on the business data in the RocksDB database according to a preset observation period, a preset trend period, and a preset seasonal period to obtain the horizontal component, trend component, and seasonal component includes:

[0030] L t =α*(Y t -S t-1，x )+(1-α)*(L t-1 +T t-1 );

[0031] T t =β*(L) t -L t-1 )+(1-β)*T t-1 ;

[0032] S t，x =γ*(Y t -L t )+(1-γ)*S t-1,x ;

[0033] Among them, Yt Let L be the observation value in period t. t-1 L is the horizontal component of the (t-1)th period. t Let T be the horizontal component of period t. t-1 Let T be the trend component of the (t-1)th period. t Let S be the trend component of period t. t-1，x S is the seasonal component of the x-th season in the (t-1)-th period. t，x Let α be the seasonal component of the x-th season in the t-th period, β be the first smoothing coefficient, and γ be the third smoothing coefficient.

[0034] Optionally, in the sixth implementation of the first aspect of the present invention, the step of performing window sliding judgment processing on the business data in the RocksDB database based on the preset fluctuation deviation algorithm, the timestamp, and the business prediction value to generate interface monitoring results includes:

[0035] Based on a preset time window and a preset step size, the business data in the RocksDB database is subjected to sliding extraction processing to generate observation values;

[0036] Calculate the standard deviation between the observed value and the business forecast value to obtain the baseline standard deviation;

[0037] When the benchmark standard deviation is greater than the preset anomaly threshold, an abnormal interface monitoring result is generated;

[0038] When the baseline standard deviation is not greater than the preset abnormal threshold, a normal interface monitoring result is generated.

[0039] Optionally, in the seventh implementation of the first aspect of the present invention, the step of receiving the event monitoring request based on a preset message queue includes:

[0040] The event monitoring request is received based on a pre-defined Kafka message queue.

[0041] A second aspect of the present invention provides a performance monitoring device for a front-end interface, comprising: a memory and at least one processor, wherein the memory stores instructions, and the memory and the at least one processor are interconnected via a circuit; the at least one processor invokes the instructions in the memory to cause the performance monitoring device for the front-end interface to execute the aforementioned performance monitoring method for the front-end interface.

[0042] A third aspect of the present invention provides a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the aforementioned performance monitoring method for the front-end interface.

[0043] In this embodiment of the invention, by writing a tracking code into the HTTP request header of the data feedback request collected by the front-end interface, the front-end and back-end data are associated based on the browser's native API interface. During the back-end data processing, a message queue is used to perform fluctuation and deviation analysis on the data collected by the interface, and interface monitoring results are generated. This realizes real-time monitoring and analysis of the front-end interface. By analyzing the interface performance data, resource waste is identified, which solves the technical problem of existing technologies that only involve basic indicators such as page load time and lack monitoring of the interface request chain. Attached Figure Description

[0044] Figure 1 This is a schematic diagram of an embodiment of the performance monitoring method for the front-end interface in this invention;

[0045] Figure 2 This is a schematic diagram of a specific embodiment of the 102 steps of the front-end interface performance monitoring method in this invention.

[0046] Figure 3 This is a schematic diagram of a specific embodiment of step 103 of the front-end interface performance monitoring method in this invention.

[0047] Figure 4 This is a schematic diagram of a specific embodiment of the 107 steps of the front-end interface performance monitoring method in this invention.

[0048] Figure 5 This is a schematic diagram of one embodiment of the performance monitoring device for the front-end interface in this invention. Detailed Implementation

[0049] This invention provides a method, device, and storage medium for monitoring the performance of a front-end interface.

[0050] The embodiments of the present invention will now be described in more detail with reference to the accompanying drawings. While some embodiments of the present invention are shown in the drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the accompanying drawings and embodiments are for illustrative purposes only and are not intended to limit the scope of protection of the present invention.

[0051] In the description of the embodiments disclosed in this invention, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc., may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0052] For ease of understanding, the specific process of the embodiments of the present invention is described below. Please refer to [link / reference]. Figure 1 This invention provides an embodiment of a performance monitoring method for a front-end interface. The method is applied to a performance monitoring system for the front-end interface, which includes a front-end data acquisition system and a data processing system. The performance monitoring method for the front-end interface includes:

[0053] 101. The front-end acquisition system collects network events based on the API interface of a preset browser and generates event feedback requests;

[0054] In this embodiment, the user's operation events are collected using the browser's native API of the front-end collection system. Based on business tracking points and third-party script monitoring, data on single-point time consumption and business processing are obtained to generate an event feedback request. This event feedback request is a request that the browser SDK would normally respond to.

[0055] For example, in DevTools' Network settings, filter by item.XXXXX.com, find the first 200 error for item.htm?spm=... document request, and collect data from the Timing page such as: DNS Lookup 28 ms; TCP / SSL 67 ms; TTFB 152 ms, etc.

[0056] Specifically, step 101 includes the following specific implementation methods:

[0057] 1011. Obtain business data by collecting network data and custom data using the browser's API interface;

[0058] 1012. Collect the browser's request start time and obtain the timestamp;

[0059] 1013. Assemble the business data and the timestamp to generate an event feedback request.

[0060] In steps 1011-1013, first use the browser's API interface to collect network layer metrics such as DNS / TCP / SSL latency, and also collect custom metrics, such as: third-party script performance data (loading time / execution blocking time), and business event tracking time (such as user clicks to trigger API).

[0061] Then, the browser's request start time is collected to obtain the timestamp. The timestamp and business data are then encapsulated using HTTP request headers to generate an event feedback request.

[0062] 102. Generate a tracking code according to the preset tracking code generation algorithm;

[0063] In this embodiment, the tracking code is a 16-bit hexadecimal byte generated by a specific algorithm. This tracking code serves as the ID and is used as the basis for subsequent verification and detection to analyze the interface performance at different times.

[0064] For details, please refer to Figure 2 , Figure 2 This is one embodiment of step 102 of the performance monitoring method for the front-end interface in this invention. Step 102 includes the following specific implementation methods:

[0065] 1021. Convert the timestamp to hexadecimal to obtain the first combined string;

[0066] 1022. Based on the random number generator, a random byte number is randomly generated, and based on the random byte number, a second combined string is generated;

[0067] 1023. Hash the IP address of the browser to obtain the third combined string;

[0068] 1024. Combine the first combined string, the second combined string, and the third combined string to generate a tracking code.

[0069] In steps 1021-1024, the timestamp, such as 20250618, is converted to hexadecimal (Unix seconds 1729946558) and output as the first combined string 6722475E.

[0070] Then, the random number generator randomly generates the hexadecimal data 089C47F2, takes the lower 4 characters, and obtains the second combined string 47F2.

[0071] If the browser's IP address is 10.8.31.25, perform a 32-bit hash on 10.8.31.25 and take the lower 16 bits to get the third combined string A2F4.

[0072] Finally, the first string combination 6722475E, the second string combination 47F2, and the third string combination A2F4 are combined to generate the tracking code 6722475E47F2A2F4, which is a 16-bit ID.

[0073] 103. Using the browser's native network request tool, the tracking code is written into the HTTP request header of the event feedback request to obtain an event monitoring request, and the event monitoring request is sent to the data processing system, wherein the event monitoring request includes: timestamp and business data;

[0074] In this embodiment, the browser's native network request tools include XMLHttpRequest, open(), send(), and fetch() functions. First, the XMLHttpRequest is intercepted, the open() method is rewritten to record metadata such as URL / Method, and then send() is hijacked to inject a unique tracking code. The readystatechange event can be used to capture the status of each stage of the request.

[0075] Finally, based on the fetch() function, requests that have already had their listening information rewritten are reloaded and overwritten, thus realizing the monitoring of the response chain.

[0076] For details, please refer to Figure 3 , Figure 3 This is one embodiment of step 103 of the performance monitoring method for the front-end interface in this invention. Step 103 includes the following specific implementation methods:

[0077] 1031. Based on the preset open() function, rewrite the metadata of the event feedback request to generate a rewrite request;

[0078] 1032. Based on the preset send() function, the tracking code is written into the HTTP request header of the rewrite request to generate a listening request;

[0079] 1033. Based on the preset fetch() function, the listening request is overwritten to generate an event monitoring request.

[0080] In steps 1031-1033, XMLHttpRequest interception is performed first:

[0081] 1. Back up the global window.XMLHttpRequest variable to NativeXHR, as you will need to send the actual request based on NativeXHR later.

[0082] 2. Create a new alternative constructor function, which internally generates an instance using `this.xhr = new NativeXHR()`, but all subsequent operations are encapsulated.

[0083] 3. Rewrite the `open(method, url, async, user, password)` function, defining a method with the same name on the surrogate prototype. First, record metadata such as `this._method = method; this._url = url;`. Immediately use `this.xhr.open(...arguments)` to transfer the data to the real instance, ensuring that the protocol, port, and cookie policy remain unchanged.

[0084] 4. Hijack send(data), generate a listening request, and call this.xhr.send(data) to actually send the packet out.

[0085] 5. Within the proxy's `this.xhr.onreadystatechange`, execute the following process: Record the request start offset (which can be calculated as DNS + TCP time), record the arrival point of the first byte, and obtain the first byte time using `now() - this._startTime`. Record the complete download end point and obtain the total time. Simultaneously, read the lengths of `status` and `responseText`, encapsulate them together into a log object, and send the log object to the collection gateway via `navigator.sendBeacon` or image tagging, including the same tracking code. Delegate `status`, `responseText`, `getAllResponseHeaders()`, etc., to `this.xhr` using getters to ensure that the differences are not visible in the upper-level code of the page.

[0086] Finally, the API of the fetch() function is used to adapt the adjusted listening request. The method of const promise = nativeFetch(new Req) is used to ensure that the returned value is still a standard Promise. The business side can continue to use .then() or await to generate event monitoring requests.

[0087] It should be noted that the response data is intercepted in the Promise chain, a copy of the response data is cloned for subsequent business use (to prevent the entity data from being read empty), and the first byte time, status code, URL, and tracking code are encapsulated into a log, which is also reported using the sendBeacon method.

[0088] 104. The data processing system receives the event monitoring request based on a preset message queue;

[0089] In this embodiment, the data processing system receives the event monitoring request in a first-in, first-out manner.

[0090] Specifically, step 104 includes the following specific implementation methods:

[0091] 1041. Receive the event monitoring request based on the preset Kafka message queue.

[0092] In step 1041, a Kafka message queue is used to receive event monitoring requests in a strict first-in-first-out manner within the partition.

[0093] 105. Based on the timestamp, write the event monitoring request into the preset RocksDB database;

[0094] In this embodiment, RocksDB is a storage engine library based on a key-value pair storage interface, where keys and values ​​are arbitrary byte streams. Data stored in the RocksDB database is sorted according to timestamps for subsequent interface parameter analysis.

[0095] 106. Based on the preset baseline generation algorithm and the timestamp, perform calculations on the business data in the RocksDB database to generate business prediction values;

[0096] In this embodiment, the business data corresponding to the event monitoring requests stored in the RocksDB database are used to calculate the relevant analytical baseline data as the business prediction value, based on the chronological order of the timestamps.

[0097] Specifically, the 106 steps include the following specific implementation methods:

[0098] 1061. Based on the preset observation period, preset trend period, and preset seasonal period, perform parameter smoothing calculation on the business data in the RocksDB database to obtain the horizontal component, trend component, and seasonal component.

[0099] 1062. Based on the horizontal component, the trend component, and the seasonal component, generate business forecast values.

[0100] In steps 1061-1062, during the smoothing analysis, it is assumed that seasonal influences exist, trends have inertia, and attributes within the same season are relatively stable. The observation period, trend period, and seasonal period can be set according to needs. For example, the observation period can be updated every 5 minutes, the trend analysis can be performed on a 21-day or 7-day cycle, and the seasonal analysis can be performed on a 90-day or 120-day cycle. During the training process, an empirical value is first assigned to the horizontal component, trend component, and seasonal component. After at least three complete cycles of historical data, the initial data is obtained. Based on the preset observation period, preset trend period, and preset seasonal period, the business data in the RocksDB database is subjected to parametric smoothing calculations to obtain the calculated horizontal component, trend component, and seasonal component.

[0101] Specifically, step 1061 includes the following specific implementation methods:

[0102] 1. Calculation of horizontal components

[0103] L t =α*(Y t -S t-1，x )+(1-α)*(L t-1 +T t-1 );

[0104] Current horizontal component Lt It is obtained through a two-part weighted sum. The first part is the current observation minus the seasonal component S of the same season X from the previous cycle. t-1，x This is to eliminate seasonal effects and reflect the current level of deseasonalization. Another part uses the level component L from the previous period. t-1 Adding the trend component T from the previous period t-1 This is to ensure that the level of the previous period is carried over to the current period. α is the first smoothing coefficient; the larger α is, the greater the weight of the current observation, and the more sensitive the model is to recent changes.

[0105] 2. Trend component calculation

[0106] T t =β*(L) t -L t-1 )+(1-β)*T t-1 ;

[0107] Current trend component T t It is obtained by weighted averaging of two parts, the first part being the current level component L. t Compared with the previous period's horizontal component L t-1 The difference reflects the latest trend. The second part uses the trend component T from the previous period. t-1 This indicates that the trend has inertia. β is the second smoothing coefficient; the larger β is, the faster the trend responds to recent level changes.

[0108] 3. Seasonal Quantity Calculation

[0109] S t，x =γ*(Y t -L t )+(1-γ)*S t-1,x ;

[0110] When the seasonal component S t，x It is obtained by weighted averaging of two parts, the first part being the current observed value Y. t Subtracting the current level component, which is the deviation between the actual value and the benchmark value, reflects the fluctuation range of the current season. The second part uses the seasonal component S from the same season in the previous cycle. t-s,x This reflects the relative stability of seasonal patterns. γ is the third smoothing coefficient; the larger γ is, the faster the seasonal pattern responds to recent deviations.

[0111] Furthermore, the above calculation is more rigorously defined as: Y t Let L be the observation value in period t. t-1 L is the horizontal component of the (t-1)th period. t Let T be the horizontal component of period t. t-1 Let T be the trend component of the (t-1)th period. tLet S be the trend component of period t. t-1，x S is the seasonal component of the x-th season in the (t-1)-th period. t，x Let α be the seasonal component of the x-th season in the t-th period, β be the first smoothing coefficient, and γ be the third smoothing coefficient.

[0112] Finally, the horizontal component, trend component, and seasonal component can be represented by L. t +T t +S t-1,x or (L) t +T t )*S t-1,x The business forecast value is calculated in this way.

[0113] 107. Based on the preset fluctuation deviation algorithm and the business prediction value, perform window sliding judgment processing on the business data in the RocksDB database, generate interface monitoring results, and send the interface monitoring results to the preset management port.

[0114] In this embodiment, the fluctuation deviation algorithm can retrieve three business forecast values ​​from the same historical period, perform window sliding calculation on the actual data of the business data in the RocksDB database, calculate the standard deviation, generate interface monitoring results based on the deviation value of the standard deviation, and send the interface monitoring results to a preset management port so that users can observe the data collection status and abnormal situations of the front-end interface on the display screen.

[0115] For details, please refer to Figure 4 , Figure 4 As an embodiment of step 107 of the performance monitoring method for the front-end interface in this invention, step 107, "based on the preset fluctuation deviation algorithm and the business prediction value, performing window sliding judgment processing on the business data in the RocksDB database to generate interface monitoring results," includes the following specific implementation methods:

[0116] 1071. Based on a preset time window and a preset step size, perform sliding extraction processing on the business data in the RocksDB database to generate observation values;

[0117] 1072. Calculate the standard deviation between the observed value and the business forecast value to obtain the baseline standard deviation;

[0118] 1073. When the benchmark standard deviation is greater than the preset anomaly threshold, an abnormal interface monitoring result is generated;

[0119] 1074. When the benchmark standard deviation is not greater than the preset abnormal threshold, a normal interface monitoring result is generated.

[0120] In steps 1071-1074, the time window is set to 6 minutes and the step size is set to 3 minutes. That is, every three minutes, a 6-minute time window extractor slides to extract business data from the RocksDB database. The business data values ​​can be averaged or the original collected values ​​can be used to obtain the observed values.

[0121] The standard deviation of the observed value is calculated by comparing it with 1-3 business forecast values ​​from the same historical period, and the benchmark standard deviation is obtained for comparison with the benchmark.

[0122] If the baseline standard deviation is greater than the 3σ anomaly threshold, the interface performance is considered abnormal, and abnormal interface monitoring results are generated.

[0123] If the baseline standard deviation is not greater than the 3σ anomaly threshold, the interface performance is considered normal, and normal interface monitoring results are generated.

[0124] In this embodiment of the invention, by writing a tracking code into the HTTP request header of the data feedback request collected by the front-end interface, the front-end and back-end data are associated based on the browser's native API interface. During the back-end data processing, a message queue is used to perform fluctuation and deviation analysis on the data collected by the interface, and interface monitoring results are generated. This realizes real-time monitoring and analysis of the front-end interface. By analyzing the interface performance data, resource waste is identified, which solves the technical problem of existing technologies that only involve basic indicators such as page load time and lack monitoring of the interface request chain.

[0125] Figure 5 This is a schematic diagram of the structure of a front-end interface performance monitoring device 500 provided in an embodiment of the present invention. The performance monitoring device 500 can vary significantly due to different configurations or performance characteristics. It may include one or more central processing units (CPUs) 510 and memory 520, and one or more storage media 530 storing application programs 533 or data 532. The memory 520 and storage media 530 can be temporary or persistent storage. The program stored in the storage media 530 may include one or more modules (not shown in the diagram), each module may include a series of instruction operations on the front-end interface performance monitoring device 500. Furthermore, the processor 510 may be configured to communicate with the storage media 530 and execute the series of instruction operations in the storage media 530 on the front-end interface performance monitoring device 500.

[0126] The performance monitoring device 500 based on the front-end interface may also include one or more power supplies 540, one or more wired or wireless network interfaces 550, one or more input / output interfaces 560, and / or one or more operating systems 531, such as Windows Server, Mac OS X, Unix, Linux, Free BSD, etc. Those skilled in the art will understand that... Figure 5 The performance monitoring device structure shown for the front-end interface does not constitute a limitation on performance monitoring devices based on the front-end interface. It may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0127] The present invention also provides a computer-readable storage medium, which can be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium, wherein the computer-readable storage medium stores instructions that, when the instructions are executed on a computer, cause the computer to perform the steps of the performance monitoring method of the front-end interface.

[0128] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0129] Furthermore, although the operations are described in a specific order, this should be understood as requiring that such operations be performed in the specific order shown or in sequential order, or requiring that all illustrated operations be performed to achieve the desired result. In certain environments, multitasking and parallel processing may be advantageous. Similarly, although several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single implementation. Conversely, various features described in the context of a single implementation may also be implemented individually or in any suitable sub-combination in multiple implementations.

[0130] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A method of performance monitoring of a front-end interface, characterized by, The performance monitoring method of the front-end interface is applied to a performance monitoring system of the front-end interface, and the performance monitoring system of the front-end interface comprises a front-end collection system and a data processing system. The front-end collection system collects network events based on an API interface of a preset browser to generate an event feedback request; A tracking code is generated according to a preset tracking code generation algorithm; The tracking code is written into an HTTP request header of the event feedback request according to a native network request tool of the browser to obtain an event monitoring request, and the event monitoring request is sent to the data processing system, wherein the event monitoring request comprises a timestamp and business data; The data processing system receives the event monitoring request based on a preset message queue; The event monitoring request is written into a preset RocksDB database according to the timestamp; Business prediction values are generated by performing operation processing on the business data in the RocksDB database according to a preset baseline generation algorithm and the timestamp; Interface monitoring results are generated by performing window sliding judgment processing on the business data in the RocksDB database based on a preset fluctuation deviation algorithm and the business prediction values, and the interface monitoring results are sent to a preset management port; The step of collecting network events based on the API interface of the preset browser to generate the event feedback request comprises: Business data is obtained by collecting network data and custom data based on the API interface of the browser; A timestamp is obtained by collecting a request start time of the browser; The event feedback request is generated by assembling the business data and the timestamp; The step of generating the tracking code according to the preset tracking code generation algorithm comprises: A first combined string is obtained by converting the timestamp into hexadecimal; A second combined string is generated based on a byte random number randomly generated according to a random generator; A third combined string is obtained by performing hash value processing on an IP address of the browser; The tracking code is generated by combining the first combined string, the second combined string and the third combined string; The step of performing operation processing on the business data in the RocksDB database to generate the business prediction values according to the preset baseline generation algorithm and the timestamp comprises: Horizontal components, trend components and seasonal components are obtained by performing parameter smoothing calculation processing on the business data in the RocksDB database according to a preset observation period, a preset trend period and a preset seasonal period; The business prediction values are generated based on the horizontal components, the trend components and the seasonal components; The step of performing window sliding judgment processing on the business data in the RocksDB database to generate the interface monitoring results based on the preset fluctuation deviation algorithm, the timestamp and the business prediction values comprises: Observation values are generated by performing sliding extraction processing on the business data in the RocksDB database according to a preset time window and a preset step length; Calculate the standard deviation of the observation value and the business prediction value to obtain a baseline standard deviation; When the baseline standard deviation is greater than a preset abnormal threshold, an abnormal interface monitoring result is generated; When the baseline standard deviation is not greater than the preset abnormal threshold, a normal interface monitoring result is generated.

2. The method of performance monitoring of a front-end interface according to claim 1, wherein, The step of writing the tracking code into the HTTP request header of the event feedback request according to the native network request tool of the browser to obtain an event monitoring request includes: Rewriting the metadata of the event feedback request based on a preset open() function to generate a rewritten request; Writing the tracking code into the HTTP request header of the rewritten request based on a preset send() function to generate a monitoring request; Overwriting the monitoring request based on a preset fetch() function to generate an event monitoring request.

3. The method of performance monitoring of a front-end interface according to claim 1, wherein, The step of performing parameter smoothing calculation processing on the business data in the RocksDB database according to a preset observation period, a preset trend period, and a preset seasonal period to obtain a level component, a trend component, and a seasonal component includes: The step of receiving the event monitoring request based on a preset message queue includes: L t =α*(Y t -S t-1，x )+(1-α)*(L t-1 +T t-1 ); T t = β * (L t - L t-1 ) + (1 - β) * T t-1 ; S t，x = γ * (Y t - L t ) + (1 - γ) * S t-1,x ; where Y t is the observed value of the tth cycle, L t-1 is the level component of the t-1th cycle, L t is the level component of the tth cycle, T t-1 is the trend component of the t-1th cycle, T t is the trend component of the tth cycle, S t-1，x is the seasonal component of the xth season of the t-1th cycle, S t，x is the seasonal component of the xth season of the tth cycle, α is a first smoothing coefficient, β is a second smoothing coefficient, and γ is a third smoothing coefficient.

4. The method of performance monitoring of a front-end interface according to claim 1, wherein, Receiving the event monitoring request based on a preset Kafka message queue. The performance monitoring device of the front-end interface includes a memory and at least one processor, the memory has instructions stored therein, and the memory and the at least one processor are interconnected through a circuit; 5. A performance monitoring device for a front end interface, characterized by The at least one processor invokes the instructions in the memory to enable the performance monitoring device of the front-end interface to perform the performance monitoring method of the front-end interface according to any one of claims 1-4. The computer program is executed by a processor to implement the performance monitoring method of the front-end interface according to any one of claims 1-4.

6. A computer-readable storage medium having stored thereon a computer program, characterized in that, ​

Images