Method for efficiently collecting front-end abnormal information based on terminal equipment

Abstract

The invention discloses a method for efficiently collecting front-end exception information based on terminal equipment, relates to the technical field of front-end exception monitoring, and aims to solve the problems of incomplete exception capture, insufficient context information, data redundancy, poor adaptability to new type exceptions and the like in the prior art. The technology of window.onerror, Promise.catch and the like is used for capturing synchronization and asynchronization errors, and the synchronization and asynchronization errors are synchronously recorded. And in combination with a JavaScript engine debugging interface, a performance monitoring API (Application Program Interface) and the like, a function call sequence and variable state change are automatically tracked, and accurate error positioning is provided. A session playback technology and machine learning are introduced to analyze historical data, abnormal modes are identified, potential problems are predicted, data redundancy is reduced through feature extraction and an intelligent Hash algorithm, and the accuracy of abnormal information is ensured. NLP, sentiment analysis and topic modeling are utilized to automatically classify anomalies, evaluate influences and generate repair suggestions. And finally, a visual exception management platform is constructed, and the exception condition and the trend thereof are displayed in a chart form.

Description

Technical Field

[0001] The invention relates to the technical field of front-end abnormality monitoring, and is an efficient method for collecting front-end abnormality information based on terminal equipment. Background Art

[0002] With the popularity and rapid development of Web applications, front-end technology has played an important role in modern software development. However, this trend is also accompanied by a significant increase in users' requirements for application stability and response speed. Faced with the diversity of terminal devices and the complexity of the network environment, frequent front-end exceptions have become a problem that needs to be solved urgently. It not only affects the user experience, but also brings a heavy burden to developers. Therefore, with the continuous advancement of Internet technology, exploring and developing an efficient, comprehensive and low-resource consumption front-end exception information collection method has become an important research direction in the field of front-end technology. This not only helps to improve the stability and reliability of Web applications, but also lays a solid foundation for promoting the further development of front-end technology.

[0003] In order to meet these challenges, it is particularly important to develop a more efficient and comprehensive front-end exception information collection method. This method needs to be able to adapt to different terminal devices and network environments, accurately capture and report various types of front-end exceptions, while maintaining low system resource usage to ensure high-performance operation of applications.

[0004] Traditional front-end exception information collection methods are unable to cope with increasingly complex front-end applications: (1) Many modern web applications use event listeners such as window.onerror to capture unhandled JavaScript errors. try...catch can only capture synchronous exceptions within a code block, and cannot directly capture exceptions in asynchronous callbacks. Although window.onerror can capture global unhandled exceptions, this method is simple and easy to implement, but it can only capture the fact that an error occurred and lacks a deep understanding of the error context. Some frameworks (such as React and Vue) provide their own error boundaries or global exception handling mechanisms, which can capture JavaScript errors in the component tree and record error information. There are delays, errors cannot be reported in real time, and they rely on manual error classification and priority judgment; (2) Traditional logging tools, such as Log4j or Winston, can record log information when an error occurs, but this information is often limited to the backend, and has limited ability to track front-end user behavior and collect contextual information. Analysis tools such as Google Analytics can track user behavior, but they are usually not integrated with error capture mechanisms, resulting in the separation of error information and user behavior data, making it difficult to conduct comprehensive analysis; (3) Some error monitoring platforms, such as Sentry or New Relic, provide error aggregation capabilities, but these platforms usually rely on preset rules and algorithms and lack the ability to adapt to new types of exceptions. Error deduplication is usually based on string matching of error messages or stack traces, which does not work well when faced with semantically similar errors but expressed differently. Summary of the invention

[0005] In view of the deficiencies of the prior art, the present invention provides an efficient method for collecting front-end exception information based on terminal devices. The first goal of the present invention is to set up a global exception capture mechanism in the entrance or key module of the front-end application, and provide accurate error location information and locate related information through the error tracking algorithm when the exception occurs. Second, user behavior analysis and session replay technology are used to collect user operation sequences before and after the exception occurs to provide a complete scenario of the exception. Third, the algorithm is used to intelligently aggregate and deduplicate the exception information, extract key information, aggregate similar exception events into a single event, and reduce data redundancy. Fourth, artificial intelligence and machine learning technology are used to analyze the exception information to reduce manual intervention and improve the efficiency of exception handling. Finally, the intuitive visual presentation of the visualized exception management platform helps users quickly understand abnormal conditions, analyze abnormal trends, and formulate corresponding processing strategies.

[0006] To achieve the above objectives, an efficient method for collecting front-end abnormal information based on terminal devices is implemented through the following technical solutions: S1: Exception capture and preliminary recording. Set up a global exception capture mechanism in the entry or key module of the front-end application, and use JavaScript try...catch statements, window.onerror event listeners, or Promise .catch() and other methods to capture unhandled exceptions that occur during the application operation. Immediately record the basic information of the exception, including the error type, error message, error stack, etc. At the same time, record the timestamp of the exception and the possible source of the exception; S2: Deep error tracking, using the debugging interface provided by the JavaScript engine, automatically tracks and records the function call sequence before and after the exception occurs. While tracking the function call sequence, it also records the state changes of key variables before and after the exception occurs. Through the error tracking algorithm, it deeply tracks the code path and call stack where the exception occurs, providing accurate error location information, and combining code static analysis and dynamic tracking technology to obtain the code segment where the error occurs and its context information; S3: Rich abnormal information context, collects detailed information about the user's operation behavior and user device before the abnormality occurs, and accurately captures and records the user operation sequence before and after the abnormality occurs by using user behavior analysis technology and session replay. Subsequently, the historical abnormal data is deeply analyzed with the help of machine learning algorithms, aiming to identify common abnormal patterns, and then predict and warn of potential abnormal problems in advance; S4: Exception aggregation and deduplication, feature extraction of the collected exception information, including error type, error message, key function and variable name in the stack, key field, etc. Based on the extracted features, clustering algorithm and similarity comparison algorithm are used to classify similar exceptions as the same problem. Based on aggregation, duplicate exception reports are removed; S5: Intelligent anomaly analysis uses artificial intelligence and machine learning technologies to intelligently analyze captured anomaly information. Through training models, it automatically identifies anomaly types, assesses the impact of anomalies, and provides repair suggestions; S6: Visualization of abnormal impacts helps users quickly understand abnormal conditions, analyze abnormal trends, and develop corresponding processing strategies through intuitive visual presentation.

[0007] Preferably, in said S2, further comprising: When an exception occurs, use the debugging interface provided by the JavaScript engine, debugger statement or console.trace() to automatically trigger a debugging session and capture the immediate status when the exception occurs. Set monitoring in key functions or code segments that may throw exceptions by setting breakpoints or using the setBreakpoint API. Once these breakpoints are reached, the function call stack and variable status are automatically recorded. Implement a custom Error object that inherits from the native Error and overrides the stack property to include more detailed call parameters and local variable status. Use Performance.now() or Date.now() to get accurate timestamps and record key time points before and after the exception occurs to track the order and duration of function calls; Combine code static analysis tools (ESLint) and dynamic tracking technology to analyze the code segment where the error occurs and extract the context information of the code segment. Use Source Map technology to map compressed or obfuscated code back to the original source code to provide the exact location of the original code when the error occurs. Track the loading process of front-end resources, use Performance API to monitor resource loading time, and identify exceptions caused by loading failure or timeout. Use the catch block of fetch API to capture network request errors and record detailed error information.

[0008] Preferably, in said S3, further comprising: Generate an error report based on the collected exception information and the user's current operation context, including the user interface status, form filling content, etc., configure the machine learning model to classify the exception information, set up an automatic alarm mechanism, and configure the problem prediction mechanism to provide a more comprehensive error scenario description.

[0009] Preferably, in said S4, further comprising: Aggregation is not only performed based on error codes or messages, but also the context and semantic similarity of the error occurrence are considered to more accurately aggregate similar errors. Machine learning algorithms are used to automatically classify exceptions to identify and aggregate error instances with common characteristics. Error information is fingerprinted using an intelligent hashing algorithm to quickly identify repeated error instances, track the entire life cycle of exceptions from occurrence to resolution, and mark resolved error instances. Aggregation and deduplication thresholds are dynamically adjusted based on the frequency and severity of exceptions. Dependencies between exceptions are identified, and errors caused by the same dependency issues are aggregated to ensure that the aggregated and deduplicated exception information remains traceable for in-depth analysis. This further improves the effect of exception aggregation and deduplication, reduces the workload of developers when handling exceptions, and improves the efficiency and accuracy of exception management.

[0010] Compared with the prior art, the present invention discloses a method for efficiently collecting front-end abnormal information based on terminal devices. The present invention has the following beneficial effects: 1. Deep error tracking helps developers quickly locate problems, improves code quality and stability, enhances user trust, facilitates problem tracking and reproduction, supports automated testing and monitoring, and provides data analysis and decision support, bringing significant improvements; 2. The abnormal information context helps to improve problem location efficiency, enhance problem diagnosis capabilities, promote team collaboration, improve user experience, and assist in performance optimization. By capturing and analyzing this rich context information, developers can solve front-end problems more efficiently and improve application quality and user experience; 3. The use of exception aggregation and deduplication plays an important role in reducing redundant information, improving processing efficiency, facilitating problem analysis and location, optimizing monitoring strategies and alarm mechanisms, and improving user experience. 4. Use artificial intelligence and machine learning technologies to improve the accuracy and efficiency of exception handling, reduce the need for manual intervention, and reduce maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] In order to more clearly illustrate the technical solution of the embodiment of the present invention, the following is a brief introduction to the drawings required for use in the embodiment: Figure 1 It is the flowchart of exception capture and depth tracing of the present invention; Figure 2 It is a flow chart of abnormal information enrichment and intelligent aggregation deduplication of the present invention; Figure 3 It is a flow chart of intelligent abnormality analysis and visual display of the present invention. DETAILED DESCRIPTION

[0012] Step 1: Establish an exception capture mechanism S11 In the entry file of the front-end application, use the window.onError event listener to catch global unhandled exceptions. For asynchronous operations using Promise and async / await, ensure that all Promise chains contain .catch() to handle potential errors. Framework-level global listeners, such as the error capture interface provided by frameworks such as Vue and React, should also be fully utilized; S12 Wrap key functions or code blocks in business code and use try...catch statements to catch local exceptions. Write functions to collect exception information and call these functions when exceptions occur to record detailed exception contexts; S13 follows the "4W principle" to record exception information, including user information, operation behavior, exception details and occurrence environment. Record exception stack information for subsequent error tracking and location.

[0013] Step 2: In-depth error tracking and logging S21 uses the build tool (Webpack) to generate Source Map when building the project. You can set the devtool property in the Webpack configuration file to generate Source Map. Use Sentry's Webpack plugin (@sentry / webpack-plugin) to automatically upload Source Map to Sentry. Add the plugin to the Webpack configuration file and configure the relevant parameters. When an error occurs, Sentry captures the error and uses Source Map to map the compressed or obfuscated code back to the original source code. In Sentry's error report, you can view the original source code and the specific location where the error occurred; S22 creates a custom error class that inherits from Error and calls Error.captureStackTrace in the constructor to capture the stack trace information: class MyCustomError extends Error { constructor(message) { super(message); Error.captureStackTrace(this, this.constructor); } } When a custom error is thrown in your code, it is caught and the stack trace is included: function someFunction() { throw new MyCustomError('Something went wrong!'); } try { someFunction(); } catch (err) { console.error(err.stack); / / Print stack trace information } Sentry automatically captures and reports errors, including stack trace information. If custom error classes are used, Sentry will also capture and report these errors; S23 captures the state changes of key variables and components before and after an exception occurs, so as to analyze the impact and cause of the error. Through the error tracking API, the front-end application is allowed to automatically call the back-end service for error recording and analysis when an exception is captured; S24 For cross-domain resources, CORS policies are set correctly to capture more detailed error information. For asynchronous operations and event-driven exceptions, a tracing mechanism is implemented to record the complete path of asynchronous call chains and related events.

[0014] Step 3: Rich exception information context S31 uses front-end monitoring tools to record the user's operation sequence, collect browser console logs before and after the exception occurs, capture and record all related network requests and responses, and enhance error stack information. For asynchronous operations such as Promise and async / await, ensure that the catch branch is handled correctly, and capture and record asynchronous errors; S32 creates a custom error class that inherits from Error and adds additional properties to store context information, such as the component name where the error occurred and the type of operation; When S33 captures an error, it builds an object containing the error information and additional context (user behavior, environment information, etc.), and then sends it to the server or logging system; S34 uses Web Workers to process in background threads to avoid blocking the main thread and record its status. It uses session replay technology to record and replay user operation sessions to help reproduce the scene where the error occurred; S35 associates front-end error logs with back-end logs, provides a complete request-response cycle view, and serializes and compresses exception information before sending large amounts of data to reduce the amount of data transmitted; S36 uses machine learning algorithms to conduct in-depth analysis of historical abnormal data, aiming to identify common abnormal patterns, and then predict and warn of potential abnormal problems in advance.

[0015] Step 4: Abnormal aggregation and deduplication S41 establishes an error index based on Redis or a memory database to store error hash values ​​for quick search and comparison. When a new exception occurs, its hash value is compared with the hash value in the error index. S42 extracts key features from the anomaly information and uses hash algorithms such as MD5 and SHA-256 to fingerprint the error information. The extracted features generate a unique identifier for the error to facilitate comparison and identification of repeated errors. S43 matches the new error with the existing errors in the index, and considers it as a repeated error, and does not report it, but updates the last occurrence time of the error; S44 defines aggregation rules based on error type, frequency, time window, etc., applies clustering algorithms (K-means, hierarchical clustering, etc.) to group similar errors, and combines machine learning algorithms to automatically identify and aggregate error instances with common characteristics; S45 dynamically adjusts the aggregation and deduplication thresholds based on the frequency and severity of exceptions, identifies dependencies between exceptions, aggregates errors caused by the same dependency issues, regularly updates error reports, removes aggregated or resolved errors, and adds newly captured errors.

[0016] Step 5: Intelligent anomaly analysis S51 uses machine learning algorithms to automatically classify captured errors and distinguish error types (syntax errors, runtime errors, resource loading errors, etc.). It uses clustering algorithms (K-means, DBSCAN) to identify abnormal patterns and trends; S52 applies association rule learning algorithms to find correlations between errors and uses statistical methods or machine learning models to identify outliers or abnormal behaviors; S53 uses decision trees, logistic regression or other predictive models to analyze possible causes of errors, uses historical error data to train a machine learning model to identify error patterns, uses the trained model to predict new anomaly types, classifies anomalies based on the model's predictions, and performs maintenance in advance; S54 uses NLP technology to analyze text information in exception messages and stack traces. By extracting keywords, building semantic networks, or applying sentiment analysis, you can gain a deeper understanding of the context and meaning of the error. S55 develops interactive tools that enable developers to query, filter, and deeply analyze abnormal data, allowing the system to learn from new data and user feedback and continuously optimize the analysis model.

[0017] Step 6: Visualize the impact of anomalies S61 determines the abnormal indicators that need to be visualized, such as the number of errors, error types, degree of user impact, etc. Collect key data in the abnormal capture process, and clean and process them; S62 designs an intuitive and easy-to-understand visualization interface, including charts, dashboards, heat maps, etc., and uses chart libraries (D3.js, Chart.js, ECharts, etc.) to create charts and visualization elements. Realize real-time data streaming to display the time, frequency, and impact range of anomalies; S63 visualizes the impact of anomalies on user behavior and provides interactive controls that allow users to filter and explore data based on their needs; S64 integrates the third-party monitoring and visualization service Sentry, providing anomaly monitoring and visualization functions. It combines machine learning models to predict the potential impact of anomalies and displays them through visualization.

Claims

1. A method for efficiently collecting front-end abnormal information based on terminal equipment, characterized in that: The method comprises the following steps: S1: Set up a global exception catching mechanism, use JavaScript try...catch statements, window.onerror event listeners, and Promise.catch() methods in key locations of the front-end application (such as entry files or key modules) to catch unhandled exceptions, and record basic exception information, including error type, message, stack trace, timestamp, and possible source; S2: Implement deep error tracking, using the debugging interface provided by the JavaScript engine to automatically track and record the function call sequence and key variable state changes before and after the exception occurs; S3: collects user behavior, operation sequence, and device information, analyzes historical data through session replay technology and machine learning algorithms, identifies common abnormal patterns, and predicts potential problems; S4: Implement anomaly aggregation and deduplication, extract features from the collected anomaly information, use clustering algorithms (divide a group of objects into several clusters according to certain criteria, so that objects in the same cluster are as similar as possible, and objects in different clusters are as different as possible) and similarity comparison algorithms to classify similar anomalies as the same problem, and remove duplicate anomaly reports; S5: Perform intelligent anomaly analysis, using artificial intelligence and machine learning technologies to automatically classify captured anomaly information, assess impacts, and generate repair suggestions, reducing the need for manual intervention and improving processing efficiency and accuracy; S6: Visualization of abnormal impacts helps users quickly understand abnormal conditions, analyze abnormal trends, and develop corresponding processing strategies through intuitive visual presentation.

2. The method according to claim 1, characterized in that The S2 further includes: Use the debugging interface provided by the JavaScript engine to automatically trigger a debugging session and capture the immediate status when an exception occurs; By setting breakpoints or using the setBreakpoint API, monitor key functions or code segments that may throw exceptions, and record function call stacks and variable states. Implement a custom Error object that inherits from native Error and overrides the stack property to include more detailed call parameters and local variable status; Use Performance.now() or Date.now() to obtain accurate timestamps and record key time points before and after the exception occurs; Combine code static analysis tools (ESLint) and dynamic tracking technology to analyze the code segment where the error occurs and extract the context information of the code segment; Use Source Map technology to map compressed or obfuscated code back to the original source code; Track the loading process of front-end resources, monitor resource loading time, and identify exceptions caused by loading failure or timeout; Use the catch block of the fetch API to capture network request errors and log detailed error information.

3. The method according to claim 1, characterized in that The S3 further includes: Generate error reports based on user operations and configure machine learning models to classify abnormal information; Set up an automatic alarm mechanism to provide comprehensive error scenario descriptions.

4. The method according to claim 1, characterized in that: The S4 further comprises: Automatically classify anomalies using machine learning algorithms to identify and aggregate error instances with common characteristics; Use smart hashing algorithms (algorithms that can generate fixed-length strings that can effectively map different types of inputs to unique identifiers) to fingerprint error information to quickly identify repeated error instances; track the entire life cycle of exceptions from occurrence to resolution, and mark resolved error instances; Identify the dependencies between exceptions, aggregate errors caused by the same dependency issues, and ensure that the aggregated and deduplicated exception information remains traceable.

5. The method according to claim 1, characterized in that The S6 further includes: Provide real-time data stream display function; Visualize the impact of anomalies on user behavior; Integrate with third-party services, such as continuous integration / deployment (CI / CD) pipelines, to ensure that every change is automatically tested and deployed to production.

6. The method according to any one of claims 1 to 4, characterized in that Also includes: Improve problem location efficiency and enhance code quality and stability through deep error tracking; Enhance problem diagnosis capabilities through exception information context, promote team collaboration, and improve user experience; Use anomaly aggregation and deduplication to improve processing efficiency while reducing redundant information.

Images