Session playback method, apparatus, computer program product and session playback system

Abstract

The invention provides a session playback method and device, a computer program product and a session playback system. The method comprises the steps that an event monitor is adopted to monitor a browser, whether a monitored event occurs or not is determined, and the monitored event at least comprises one or more of clicking, rolling and typing; under the condition that occurrence of the monitoring event is monitored, DOM information corresponding to the monitoring event is obtained, and the DOM information at least comprises one or more of an HTML element, a CSS style and a JavaScript state; and under the condition that a replay request is received, replaying the DOM information corresponding to the monitoring events according to the sequence of occurrence of the monitoring events and / or the relationship between the monitoring events, the relationship between the monitoring events at least comprising an association relationship. According to the scheme, the problem of relatively low accuracy of session playback in the prior art is solved.

Description

Technical Field

[0001] This application relates to the technical field of information capture. Specifically, it relates to a method, device, computer program product, and session replay system for session replay. Background Art

[0002] In a CRM system (Customer Relationship Management System), basic interaction data such as user clicks and form submissions are generally captured through page tagging and used for business efficiency analysis, but there is a lack of in-depth interaction restoration capabilities. Existing tools mainly focus on user operations at the web page level and do not cover backend logic and complex data dependencies.

[0003] Therefore, currently, if session replay is to be performed, it is difficult to accurately reproduce the interaction details in the original session, and the accuracy rate of session replay is relatively low. Summary of the Invention

[0004] The main objective of this application is to provide a method, device, computer program product, and session replay system for session replay, so as to at least solve the problem of relatively low accuracy rate of session replay in the prior art.

[0005] To achieve the above objective, according to one aspect of this application, a method for session replay is provided, including: using an event listener to monitor a browser to determine whether a monitored event occurs, where the monitored event includes at least one or more of click, scroll, and keystroke; in the case where the monitored event occurs, obtaining DOM information corresponding to the monitored event, where the DOM information includes at least one or more of HTML elements, CSS styles, and JavaScript states; in the case where a replay request is received, replaying the DOM information corresponding to the monitored event according to the order before and after the occurrence of the monitored event and / or the relationship between the monitored events, where the relationship between the monitored events includes at least an association relationship.

[0006] According to another aspect of the present application, there is provided a session replay device, including: a monitoring unit, configured to monitor a browser using an event listener to determine whether a monitoring event occurs, where the monitoring event includes at least one or more of clicking, scrolling, and typing; an obtaining unit, configured to obtain DOM information corresponding to the monitoring event when it is monitored that the monitoring event occurs, where the DOM information includes at least one or more of HTML elements, CSS styles, and JavaScript states; a replay unit, configured to replay the DOM information corresponding to the monitoring event according to the chronological order of occurrence of the monitoring events and / or the relationship between the monitoring events when a replay request is received, where the relationship between the monitoring events includes at least an association relationship.

[0007] According to still another aspect of the present application, there is provided a computer program product, including a computer program, where when the computer program is executed by a processor, it implements the steps of any one of the session replay methods.

[0008] According to yet another aspect of the present application, there is provided a session replay system, including: one or more processors, a memory, and one or more programs, where the one or more programs are stored in the memory and are configured to be executed by the one or more processors, and the one or more programs include those for executing any one of the session replay methods.

[0009] Applying the technical solution of the present application, an event listener is used to widely capture all operations of users, including but not limited to clicking, swiping, keyboard input, page loading events, etc. By recursively traversing the DOM tree and capturing the complete state of each node, relatively complete DOM information is obtained. Using the timestamps of events and / or dependency relationships, the accurate order when the events occurred can be restored when replaying the session, improving the accuracy of replay. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] The specification drawings constituting a part of the present application are used to provide a further understanding of the present application. The schematic embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation to the present application. In the drawings:

[0011] Figure 1 It shows a hardware structure block diagram of a mobile terminal for executing a session replay method provided in an embodiment of the present application;

[0012] Figure 2 It shows a schematic flowchart of a session replay method provided in an embodiment of the present application;

[0013] Figure 3 It shows a schematic flowchart of another session replay method;

[0014] Figure 4 Shows a schematic flow diagram of DOM snapshot capture and reconstruction;

[0015] Figure 5 Shows a schematic flow diagram of replay based on interaction events;

[0016] Figure 6 Shows a schematic diagram of multi - dimensional event capture;

[0017] Figure 7 Shows a structural block diagram of a session replay device provided according to an embodiment of the present application.

[0018] Among them, the above - mentioned drawings include the following reference numerals:

[0019] 102, processor; 104, memory; 106, transmission device; 108, input / output device. Detailed implementation manners

[0020] It should be noted that, without conflict, the embodiments in the present application and the features in the embodiments may be combined with each other. The present application will be described in detail below with reference to the drawings and in combination with the embodiments.

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

[0022] It should be noted that the terms "first", "second", etc. in the description and claims of the present application and the above - mentioned drawings are used to distinguish similar objects, and do not necessarily need to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so as to describe the embodiments of the present application here. In addition, the terms "include" and "have" and any variations thereof are intended to cover non - exclusive inclusion. For example, a process, method, system, product or device including a series of steps or units does not necessarily need to be limited to those clearly listed steps or units, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0023] For the convenience of description, some nouns or terms related to the embodiments of the present application are explained as follows:

[0024] Session Replay: In the field of IT, it refers to a technical means that can record and reproduce all user operations on a website or application, including clicks, inputs, page jumps, etc., in order to reproduce the entire user operation process.

[0025] DOM Snapshot: A technology that captures the state of the Document Object Model (DOM) of a web page at a specific moment, including HTML elements, CSS styles, and JavaScript states, for subsequent processing or analysis.

[0026] Timeline Reconstruction Algorithm: A technology that reconstructs the order of events by analyzing event data using timestamps and graph theory algorithms, commonly used in debugging and error backtracking.

[0027] Data Serialization: The process of converting a data structure or object state into a data format that can be stored or transmitted, such as converting to JSON format, for easy data storage, transmission, and reconstruction.

[0028] Existing page tagging has the function of recording basic user operation records, but there are still the following technical problems:

[0029] Insufficient data integrity and depth: Existing technologies often only capture surface user operations, such as clicks, jumps, and pop-up error reports, and it is difficult to capture more complex interaction data, which limits the depth and efficiency of fault diagnosis and user experience analysis.

[0030] Inaccurate restoration of interaction effects: Traditional methods are difficult to accurately reproduce interaction details in the original session during replay, which leads to the inability to accurately locate user front-end acceptance error problems.

[0031] Performance impact: Real-time data capture and processing have a certain impact on system performance. Especially in the case of a large number of users or a large amount of data, existing technologies may cause an increase in system response time and affect user experience.

[0032] Therefore, the purpose of this solution is to solve these problems and provide a more efficient and accurate session replay method to support the abnormal acceptance location and user experience optimization work in the telecom CRM system.

[0033] As introduced in the background technology, the accuracy of session replay in existing technologies is relatively low. To solve the above problems, embodiments of this application provide a session replay method, device, computer program product, and session replay system.

[0034] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention.

[0035] The method embodiments provided in the embodiments of the present application can be executed on a mobile terminal, a computer terminal, or a similar computing device. Taking running on a mobile terminal as an example, Figure 1 is a hardware structure block diagram of a mobile terminal for a method of replaying a session according to an embodiment of the present invention. As Figure 1 shown, the mobile terminal may include one or more ( Figure 1 only one is shown in the figure) processors 102 (the processor 102 may include, but is not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA) and a memory 104 for storing data. Among them, the above mobile terminal may further include a transmission device 106 for communication functions and an input / output device 108. Those of ordinary skill in the art can understand that Figure 1 the structure shown is only schematic and does not limit the structure of the above mobile terminal. For example, the mobile terminal may further include more or fewer components than Figure 1 shown in the figure, or have a different configuration from Figure 1 shown in the figure.

[0036] The memory 104 can be used to store computer programs. For example, software programs and modules of application software, such as the computer program corresponding to the method for displaying device information in the embodiments of the present invention. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, implements the above method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memories, or other non-volatile solid-state memories. In some instances, the memory 104 may further include a memory remotely disposed relative to the processor 102, and these remote memories may be connected to the mobile terminal through a network. Examples of the above network include, but are not limited to, the Internet, an enterprise intranet, a local area network, a mobile communication network, and combinations thereof. The transmission device 106 is used to receive or send data via a network. Specific examples of the above network may include a wireless network provided by a communication provider of the mobile terminal. In one instance, the transmission device 106 includes a network adapter (abbreviated as NIC), which can be connected to other network devices through a base station and thus can communicate with the Internet. In one instance, the transmission device 106 may be a radio frequency (abbreviated as RF) module, which is used to communicate with the Internet wirelessly.

[0037] In this embodiment, a method for replaying a session running on a mobile terminal, a computer terminal, or a similar computing device is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. And although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than here.

[0038] Figure 2 It is a flowchart diagram of a method for replaying a session according to an embodiment of the present application. As Figure 2 shown, the method includes the following steps:

[0039] Step S201, use an event listener to monitor the browser and determine whether a monitored event occurs, where the monitored event includes at least one or more of clicking, scrolling, and typing;

[0040] Specifically, in a browser environment, an event listener is a mechanism for detecting and responding to user interactions or system operations. In this step, multiple event listeners will be set up to monitor key events related to user operations in the browser, such as clicking (click), scrolling (scroll), typing (keydown or input), etc. These listeners can be bound to specific DOM elements or globally monitor the entire page to capture all possible events.

[0041] To comprehensively capture the interaction between the user and the system, the definition of the monitored event should include but is not limited to clicking, scrolling, and typing. These events can cover the main types of user behaviors in interface operations, thus providing a rich and detailed data source for subsequent session replay.

[0042] Check in real time whether the listener is triggered. Once an event is detected, it means that the user has performed an operation or the system state has changed. At this time, the system will enter the next step to capture the DOM information related to the event.

[0043] Step S202, when the above-mentioned monitored event is monitored to occur, obtain the DOM information corresponding to the monitored event, where the DOM information includes at least one or more of HTML elements, CSS styles, and JavaScript states;

[0044] Specifically, when it is detected in S201 that a monitored event occurs, the next step is to obtain the DOM information associated with the event. The DOM information here is extensive, including but not limited to HTML elements, that is, the structural information of the page elements involved when the event occurs; CSS styles, that is, the appearance and layout attributes of the elements; and JavaScript states, which involve the event handling functions and other script behaviors bound to the elements.

[0045] To accurately capture DOM information, a DOM snapshot is generated, which is a complete record of the DOM tree state at the moment an event occurs. The snapshot includes all visible elements related to the event, along with their attributes, styles, and script states, ensuring that the user interface state at that time can be precisely reproduced during subsequent replay.

[0046] The captured DOM information will be serialized and converted into a data format that is easy to store and transmit, such as JSON. This serialization process not only facilitates data management but also allows the system to easily reconstruct the DOM state at different times and in different environments.

[0047] Step S203, in the case of receiving a replay request, replay the above-mentioned DOM information corresponding to the above-mentioned monitored events according to the chronological order of the above-mentioned monitored events before and after occurrence and / or the relationship between the above-mentioned monitored events, where the relationship between the above-mentioned monitored events includes at least an association relationship.

[0048] Specifically, when it is necessary to analyze user behavior or diagnose system failures, a request to replay a specific session will be received. After receiving such a request, it will enter the replay preparation stage and call the previously captured and stored DOM information and event data.

[0049] Replay according to the event order: The chronological order of event occurrence will be determined based on the timestamps recorded in step S201 to ensure that the order of event replay is consistent with the order of event occurrence in the original session. This chronological replay mechanism helps to reproduce the real flow of the user session, thereby more effectively analyzing problems or tracking errors.

[0050] Consideration of the relationship between events: In addition to simple sequential replay, the logical associations between the events monitored in step S201 also need to be considered. For example, a user click event may trigger a backend API call, and the API response may in turn cause an update to the state of the page DOM. During replay, based on these dependencies between events, the API call should be replayed first, wait for the response, and then update the DOM state to achieve the same execution flow as the original session.

[0051] Handling of event association relationships: According to the association relationships between events, it may be necessary to execute other events before replaying certain events, or ensure that events are executed in the correct logical order and dependencies. For example, first execute the page load event, and then execute user operation events based on page elements, ensuring that the entire process of user interaction with the system can be accurately reflected during replay.

[0052] In this embodiment, an event listener is used to widely capture all operations of the user, including but not limited to clicks, swipes, keyboard inputs, page load events, etc. By recursively traversing the DOM tree and capturing the complete state of each node, relatively complete DOM information is obtained. Using the timestamps of events and / or dependencies, the accurate order when the events occurred can be restored during the replay session, improving the accuracy of the replay.

[0053] Specifically, the solution of this application involves technologies for capturing, managing, analyzing, and replaying session data. Advanced data processing technologies and methods are used to optimize user session records and replays in the telecom CRM system, enabling the detailed reproduction of the user's interaction process and the resulting system responses, facilitating exception handling and the improvement of the user experience.

[0054] Specifically, the main applications of this solution include the following four parts: User experience management: Use session replay technology to understand the user's behavior patterns, analyze interface problems or incorrect operations encountered by the user in the CRM system, and thus provide more accurate user experience optimization suggestions. Fault diagnosis and debugging: Precisely diagnose errors or problems that occur during specific operations by replaying specific user sessions, allowing developers or technical support personnel to observe the complete context when the fault occurs, improving the efficiency and accuracy of problem-solving. Security and compliance monitoring: Record and replay user operations for security audits to ensure that operations comply with industry standards and regulatory requirements, and at the same time help discover potential security vulnerabilities or improper uses. Data science and behavior analysis: Use the large amount of session data collected for behavior pattern analysis to support data-driven decision-making, such as optimizing the user acceptance path and enhancing customer satisfaction.

[0055] By applying these technologies to the telecom CRM system, this solution not only improves the operation efficiency of the system and the quality of customer service, but also brings new tools for enhancing the CRM to telecom service providers.

[0056] Specifically, the relationships between monitored events can be determined in the following ways:

[0057] Logical order: There are naturally logical precedence relationships among certain event types. For example, a click event usually triggers a subsequent AJAX request event, and the response to this request event in turn causes a DOM update event. By identifying these event types, the dependencies between events can be inferred.

[0058] Page flow analysis: Analyzing the user's operation flow on the page, such as moving from one form field to another or navigating from one page to another, can reveal the logical flow between events.

[0059] Front - end and back - end interaction: Analyze the interaction between the front - end and the back - end, identify which front - end operations trigger back - end API calls, and how the responses of API calls affect the front - end state, so as to establish the association between events.

[0060] DOM operation detection: Use techniques such as MutationObserver to detect changes in the DOM. This can track DOM update events triggered by user operations and the relationships between these events and other events.

[0061] Event listener analysis: Check the event listeners bound to DOM elements to determine which other events may occur subsequently when an event is triggered.

[0062] Context recording: Record the context information of each event, such as the element where the event is triggered, the values entered by the user, etc. This can help identify the associations between events.

[0063] Link between API call parameters and front - end controls: Record which API calls are caused by specific user operations and how API call parameters are related to front - end controls. This can reveal the direct relationship between front - end and back - end events.

[0064] Construct an event graph: Consider each event as a node in the graph and the dependencies between events as edges. By representing events and relationships in the graph, graph - theoretic algorithms (such as depth - first search, breadth - first search, or topological sorting) can be used to analyze the correct order and logical dependencies of the event sequence.

[0065] Dependency tree construction: Construct a dependency tree where the root node is an event that does not depend on other events, and the branches of the tree represent the causal relationships between events. This can visually show the dependency hierarchy between events.

[0066] "Replay" in the telecommunications CRM system refers to the ability to precisely reproduce a series of interactions between the client and the server before, that is, user operations, system responses, front - end and back - end data flows, and the visual and functional states of the entire session. Replay technology allows developers or system maintenance personnel to observe and analyze historical user session records like playing back a video in scenarios such as fault diagnosis, user experience analysis, and security audits, in order to determine the root cause of problems or the behavior patterns of users in the system.

[0067] Before a replay session, it is necessary to simulate the environmental state of the original session, including browser window size, user login status, configuration settings, etc., to ensure that the replay process can reproduce the context of the original interaction as much as possible. According to the event sorting result, restore the DOM state from the stored data and re-trigger each event in the virtual environment, including user operations and system responses. This usually involves using virtual DOM technology to reconstruct the DOM structure in memory and then applying the necessary changes to the actual DOM to achieve a high-fidelity replay of the visual effects. For each backend API call triggered by a frontend event, use the stored request and response data to simulate the interaction between the frontend and the backend, ensuring that during the replay process, the backend logic and data flow are consistent with the original session. During the replay process, if an event that cannot be processed or a DOM state exception is encountered, there should be an exception handling mechanism to record these situations and provide feedback to help analyze and locate problems.

[0068] In the specific implementation process, to obtain the DOM information corresponding to the above monitoring events, it can be achieved through the following steps: Obtain the initial DOM information using the target technology, where the above target technology includes one or more of the Web Workers method, traversal method, and automatic trigger method; convert the above initial DOM information into JSON format to obtain the above DOM information.

[0069] In this solution, by using Web Workers and non-blocking processing, the DOM information capture process will not affect the responsiveness of the user interface, improving the efficiency of data capture and ensuring a good user experience. Using the traversal method can record each node of the DOM tree in detail, including HTML elements, CSS styles, and JavaScript states, ensuring the comprehensiveness of the DOM information, which is crucial for accurately replaying the session. The automatic trigger method enables the system to automatically capture important DOM snapshots without manual intervention, reducing data omission and increasing the capture rate of abnormal situations. Serializing the DOM information into JSON format enables this data to be stored locally or remotely, facilitating management and retrieval. When session replay is required, the DOM state can be easily parsed and reconstructed from the JSON data to achieve high-fidelity visual and functional reproduction.

[0070] Specifically, when a monitoring event occurs, it is necessary to capture the DOM information corresponding to the event, which is the basis of session replay. The target technologies mentioned here include the Web Workers method, traversal method, and automatic trigger method, which represent different data capture and processing strategies respectively.

[0071] Web Workers approach: Web Workers is a technology that runs JavaScript threads in the browser background, allowing the capture and processing of DOM information without blocking the user interface, thus ensuring that the user experience is not affected. This approach is particularly suitable for handling complex or time-consuming DOM capture tasks as they can run outside the main thread.

[0072] Traversal approach: Traversing the DOM tree means traversing the Document Object Model, delving into each node, and extracting and recording all its attributes, styles, and content. This typically involves using depth-first traversal or breadth-first traversal algorithms to ensure that every part of the DOM is fully recorded for subsequent accurate replay.

[0073] Automatic trigger approach: The automatic trigger approach means that when predefined events (such as page load, user actions) occur, the process of DOM information capture is automatically initiated. This approach ensures the complete preservation of the DOM state at critical time points, providing key data for fault reproduction and user experience analysis.

[0074] The captured DOM information needs to be converted into a storable and transferable format. JSON (JavaScript Object Notation) is a popular data exchange format with cross-platform, easy-to-generate, and easy-to-parse characteristics. Converting DOM information into JSON format not only facilitates storage but also enables the convenient transfer of these snapshot data over the network, allowing analysis and replay in a server or any other environment.

[0075] Specifically, as Figure 3 shown, the above solution includes the capture and reconstruction of DOM snapshots for automatically capturing and reconstructing Document Object Model (DOM) snapshots. As Figure 4 shown, it mainly includes an automatic trigger mechanism, an asynchronous non-blocking processing module, complete state capture, an external resource recorder, a serialization and storage component, a multi-level information capture mechanism, conditional serialization, an incremental serialization processor, and a comprehensive unit for difference comparison. This method realizes the complete and reliable restoration of the DOM state through recursive traversal capture, an efficient storage format, and an intelligent difference detection algorithm, which plays a significant role in promoting the restoration of business acceptance anomalies and improving services.

[0076] Automatic trigger mechanism: To ensure the automatic capture of DOM snapshots when critical user interactions or system events occur, this solution adopts an automatic trigger mechanism based on browser event listeners. The specific implementation is as follows:

[0077] 1) Set listeners: Set event listeners at the main interaction points of the web page, such as page load event (load), user click event (click), form submission event (submit), input field change event (change), asynchronous request start and end events (ajaxStart, ajaxComplete), swipe events, and API calls. 2) Trigger conditions: When these preset events are triggered, automatically start the process of capturing DOM snapshots. 3) Configurability: The trigger conditions can be configured or extended according to needs to meet the requirements of different scenarios, etc.

[0078] Asynchronous and non-blocking processing: To ensure that the process of capturing DOM snapshots does not block the main thread and affect the user interaction experience, this solution adopts asynchronous and non-blocking processing technologies. The specific implementation is as follows:

[0079] 1. Application of asynchronous technology: Use Web Workers to perform DOM parsing and data capture operations. WebWorkers run in a background thread separate from the main page thread, so their operations do not affect the responsiveness of the user interface and the rendering speed of the page. 2. Task allocation: The capture task is divided into multiple small tasks, each task is responsible for capturing a part of the DOM, and then executed asynchronously, which can further reduce the impact on the main thread. 3. Non-blocking operation: In the main thread, the relevant event listening and triggering operations are non-blocking, which means that the event handling function will return immediately, and the actual data processing task is asynchronously processed by Web Workers.

[0080] Full state capture: To ensure a high degree of authenticity and accuracy of replay, this solution implements full state capture during the DOM snapshot process, including structure, style, script state, and event listeners, etc. The specific implementation steps include:

[0081] I. DOM traversal: Use the depth-first traversal algorithm to recursively visit each node in the DOM tree. For each node, capture all its attributes (such as id, class), computed styles, content, and all relevant event listeners. The specific implementation is as follows:

[0082] A. The detailed implementation of the extended description algorithm for recursive traversal of the DOM tree is as follows:

[0083] ①. DOM tree node information capture method based on recursive traversal, aiming to efficiently and systematically extract and analyze the attributes and style information of each node in the DOM tree. This method captures and records the detailed information of nodes by recursively traversing each node in the DOM tree, and is applicable to scenarios that require in-depth analysis or processing of the DOM tree. Recursive traversal of the DOM tree: Starting from the root node, visit each node and its children in turn to ensure that the entire DOM tree structure is covered. Node information capture: During the traversal process, perform a detailed analysis of each node, extract its attribute information (such as tag type, attribute value, etc.) and computed style information (such as CSS style, layout attributes, etc.). Information recording: Structurally record the captured node attributes and style information for subsequent analysis or processing.

[0084] ②. Capture methods for DOM attributes and computed styles:

[0085] a. Use `node.attributes` to traverse all attributes of the node. b. The computed style is obtained through `window.getComputedStyle(node)`, including the styles of pseudo-classes and pseudo-elements. c. Special attributes such as event listeners are captured through `getEventListeners(node)` or inline events such as `node.onclick` are recorded.

[0086] ③. DOM change response strategy in recursive traversal:

[0087] a. Use `MutationObserver` to set up a listener before traversal. Once a DOM structure change is detected, pause the traversal, update the DOM snapshot, and then continue. b. Design a buffering mechanism to handle DOM updates and reduce the impact on traversal performance.

[0088] ④. Performance optimization strategy:

[0089] a. For deep or large DOM trees, adopt batch processing and lazy loading techniques to avoid performance bottlenecks caused by loading too many nodes at once. b. Implement a lazy traversal strategy to traverse and load the detailed information of DOM nodes only when needed.

[0090] B. Extension description of dynamic content processing. The specific use of MutationObserver is as follows:

[0091] ①. Configuration and usage:

[0092] Instantiate `MutationObserver` and configure the types of DOM changes to be listened for, such as the addition or removal of child nodes, attribute changes, etc. The DOM change listening method based on MutationObserver is used to monitor the dynamic changes of nodes in the DOM tree in real time, including the addition or removal of child nodes, attribute changes, etc. This method realizes the dynamic monitoring of specified DOM nodes by instantiating MutationObserver and configuring the listening options, and is applicable to scenarios that need to respond to DOM changes in real time.

[0093] This method includes the following core steps:

[0094] Instantiate MutationObserver: Create a MutationObserver instance and configure a callback function for it to handle the detected DOM changes. Configure the listening options: Specify the DOM node to be listened for (such as document.body) through the observe method, and set the listening options, including:

[0095] childList: true: Listen for the addition or removal of child nodes.

[0096] subtree: true: Listen for changes in all descendant nodes.

[0097] attributes: true: Listen for changes in node attributes.

[0098] Handle DOM changes: In the callback function, iterate through all the detected changes (mutations), and call the handleMutation function for each change for specific processing.

[0099] ②. Execution context of dynamic content:

[0100] a. Capture the user operations or events that trigger the change, and record the relevant timestamps and operation types. b. For DOM changes caused by asynchronous operations, record the trigger source and completion time of the asynchronous event to ensure accuracy during replay.

[0101] ③. Data consistency and accuracy guarantee: In an environment involving multiple scripts and asynchronous operations, multiple operations may need to access and modify the DOM at the same time. This solution introduces a locking mechanism to ensure that at a certain moment, only one operation can access or modify the DOM.

[0102] II. Style calculation, use the window.getComputedStyle method to obtain all the computed styles of each element to ensure that the appearance of the element is consistent with the original page during replay.

[0103] III. Event Listener Recording: Records all event listeners added via JavaScript, including the event type and the triggering function. The key to this step is the ability to rebind these listeners during session replay to ensure the correct reproduction of user interaction logic.

[0104] IV. JavaScript State Capture: For DOM attributes that are dynamically changed by JavaScript (such as the values of hidden form elements), specifically record these dynamic states so that the corresponding interaction effects can be restored during replay.

[0105] External resource handling includes resource link recording, loading state detection, and cross - domain resource handling.

[0106] Resource Link Recording: Records the link addresses of all external resources, such as the `src` attribute of images, the `href` attribute of style sheets, etc.

[0107] Loading State Detection: Captures the loading state of resources to determine whether the resources have been fully loaded at the snapshot moment, so that unloaded or partially loaded resources can be correctly handled during replay.

[0108] Cross - Domain Resource Handling: For resources that may have cross - domain issues, implement corresponding strategies, such as using CORS or directly embedding the resource content into the snapshot data.

[0109] Serialization and Storage: Serialization is to convert the captured DOM state into a format that can be stored and transmitted. This solution selects the JSON format due to its cross - platform and easy - to - handle characteristics. The implementation details are as follows:

[0110] i. Serialization Process:

[0111] ①. Data Formatting: By converting each node in the DOM tree into a JSON object, the structured characteristics of JSON can be used to express complex hierarchical relationships.

[0112] ②. Implementation Method of Data Formatting:

[0113] By recursively traversing each node in the DOM tree and converting it into a structured JSON object, the hierarchical relationship and node information of the DOM tree are completely retained. This method includes the following core steps:

[0114] Data Formatting: Convert each node in the DOM tree into a JSON object, using the structured characteristics of JSON to express the hierarchical relationship of nodes.

[0115] The JSON object of each node contains the following fields:

[0116] tagName: The tag name of the node.

[0117] attributes: The set of attributes of the node, stored in key-value pairs.

[0118] styles: The computed style information of the node, obtained through window.getComputedStyle.

[0119] children: The set of child nodes of the node, generated by recursively calling the serialization method.

[0120] Serialization implementation: Define a serializeDOM function that accepts a DOM node as a parameter. Traverse the attribute list of the node and store it in the attributes field.

[0121] Traverse the child nodes of the node and handle them separately according to the node type (element node or text node):

[0122] For element nodes, recursively call the serializeDOM function to generate a JSON object of the child nodes and add it to the children field.

[0123] For text nodes, store their text content in the textContent field and add it to the children field.

[0124] Return the generated JSON object.

[0125] ③. Special processing: Special marks are made for event listeners and dynamically generated content so that these parts can be correctly reconstructed during deserialization.

[0126] ④. Data compression: Data compression reduces data redundancy through algorithms, improving storage efficiency and transmission speed. This solution uses gzip compression, which is a widely used data compression format that combines LZ77 and Huffman coding techniques and is suitable for text data compression.

[0127] ⑤. Data compression implementation method: Define a compressData function that accepts serialized JSON data as input. Use JSON.stringify to convert the JSON object to a string format. Call the gzip.compress method to compress the string data and generate compressed binary data. Return the compressed data.

[0128] ⑥. Secure storage: Secure storage not only ensures the confidentiality of data, but also ensures the integrity and availability of data. The present invention uses encryption technology to prevent unauthorized access to data during transmission and storage.

[0129] ⑦. Encryption implementation method: Define an encryptData function that accepts the data to be encrypted as input. Call the AES.encrypt method to encrypt the data using a specified key (such as'secret-key'). Return the encrypted data.

[0130] ii. Deserialization process:

[0131] ①. Data parsing: The deserialization process is the opposite of serialization. Parse the stored JSON string back into a JavaScript object, and then reconstruct the DOM tree based on these objects.

[0132] ②. Data parsing implementation method:

[0133] Data parsing principle: The deserialization process is the opposite of serialization. Parse the stored JSON string into a JavaScript object. Based on the information of the parsed object, gradually reconstruct the DOM tree, restoring the tag names, attributes, styles, and child nodes of the nodes.

[0134] Deserialization implementation: Define a deserializeDOM function that accepts a JSON object and a parent node as parameters. Check if the JSON object contains a textContent field:

[0135] If it contains, create a text node and add it to the parent node. If it does not contain, create an element node and set its tag name and attributes.

[0136] Recursively traverse the children field of the JSON object, call the deserializeDOM function for each child node, and add the child node to the current element node. Add the constructed element node to the parent node.

[0137] ③. Reconstruct dynamic content:

[0138] a. Dynamic content recognition and recording: Identify content dynamically generated by JavaScript during serialization (such as elements dynamically added through methods like `document.createElement` or `innerHTML`). Record the creation logic and timing of these elements, including specific information about the events or operations that trigger these dynamic changes. b. Record the creation logic and timing of these elements, mainly the specific information about the events or operations that trigger these dynamic changes. c. Dynamic content reconstruction: During deserialization, reconstruct the dynamic content based on the recorded information. This may involve executing some of the same JavaScript code that was executed on the original page, or simulating the same user actions to trigger these dynamic changes. d. Considering differences in the execution environment, it may be necessary to adjust or modify the original code to adapt to the new environment or ensure consistent execution. e. In a recursive and modular way, deserialize a JSON object into a DOM tree and reconstruct the dynamic content and event bindings. Its design goal is to achieve the conversion from a data structure (JSON) to actual DOM nodes, while ensuring that dynamic behaviors (such as event handling) can be correctly restored.

[0139] Define a deserializeDOM function that takes a JSON object and a parent node as parameters. Create an element node based on the tagName and attributes fields of the JSON object and set its attributes. If the JSON object contains an events field, iterate through the event list and bind event listeners to the element node. Use eval to execute the event handling functions (note: in a real application, a more secure method should be used, such as the Function constructor or a predefined function mapping). Add the element node to the parent node and recursively process its child nodes.

[0140] Multi-level information capture. In modern web applications, DOM elements may contain not only basic HTML structure and styles, but also auxiliary technology information (such as ARIA attributes), framework-specific data bindings (such as Vue.js data bindings), and performance-related data. To achieve more comprehensive session replay and state analysis, this solution covers the capture and reconstruction of these multi-level information. It mainly includes the following:

[0141] I. Capture of ARIA attributes: ARIA (Accessible Rich Internet Applications) attributes provide important information about the functionality and current state of elements, which is crucial for ensuring the accessibility of web applications. Capturing these attributes involves traversing the DOM elements and recording all attributes prefixed with `aria-`.

[0142] II. Capturing Framework-Specific Data Bindings: Modern web frameworks such as Vue.js usually bind data models to DOM elements, and these binding information is not usually directly visible in DOM attributes. Capturing these data bindings requires analyzing the runtime of the framework or leveraging the internal APIs provided by the framework.

[0143] III. Capturing Performance Data: Performance data such as page load time, response time, and rendering time can be obtained through the browser's performance API (such as `window.performance`). This data is crucial for analyzing the performance of the application and the user experience.

[0144] IV. Implementation Example of Data Capturing:

[0145] By recursively traversing the DOM tree, capture the structured information of nodes and additional data (such as styles, ARIA attributes, Vue.js data bindings, performance data, etc.), and store them as a JSON object. This implementation can be used to record the complete state of the DOM tree for subsequent analysis, debugging, or reconstruction.

[0146] Core Objectives:

[0147] Capture the complete information of DOM nodes: including not only the tag name and attributes of the nodes, but also styles, ARIA attributes, Vue.js data bindings, performance data, etc. Recursively traverse child nodes: ensure that the structure and data of the entire DOM tree are captured.

[0148] Modular Design:

[0149] Function `captureDOMWithExtraInfo`: encapsulates the logic for capturing DOM node information for easy reuse and extension. Function `getPerformanceData`: encapsulates the logic for obtaining performance data, decoupled from the main logic.

[0150] Implementation of Data Capturing:

[0151] Basic Information of Nodes: `tagName`: the tag name of the node. `attributes`: all attributes of the node.

[0152] Style Information: `styles`: obtain the computed styles of the node through `window.getComputedStyle`.

[0153] ARIA Attributes:

[0154] `ariaAttributes`: capture all attributes starting with `aria-` and store them separately.

[0155] Vue.js Data Bindings:

[0156] vueData: Assume there is a Vue.getInstance(node) method to obtain the data of the Vue instance.

[0157] Performance data:

[0158] performanceData: Obtain the page performance timing data through window.performance.timing.

[0159] Child node information:

[0160] children: Recursively capture the information of child nodes, supporting element nodes and text nodes.

[0161] Recursive traversal of child nodes:

[0162] Element node: If the child node is an element node (nodeType === Node.ELEMENT_NODE), recursively call captureDOMWithExtraInfo. Text node: If the child node is a text node (nodeType === Node.TEXT_NODE), directly store its text content.

[0163] Conditional serialization: In the capture and reconstruction of DOM snapshots, conditional serialization is an efficient strategy for determining whether specific attributes and styles need to be serialized based on the specific state of DOM elements (such as active, focused, etc.). This method can significantly reduce the unnecessary data volume during serialization, optimize storage space, and improve data processing speed. Only when the DOM element is in a specific state, all its attributes and styles are captured and serialized. This not only reduces the data volume but also ensures that the true representation of the element can be accurately restored during the replay process.

[0164] State dependency: The importance of certain DOM attributes and styles depends on the current state of the element. In the present invention, only when an element is in an active state, the style of the :active pseudo-class is relevant.

[0165] Dynamic judgment: Dynamically judge the state of the element during capture and determine which data is necessary based on these states.

[0166] Implementation method:

[0167] I. State detection: During the capture process, implement a function to check whether the DOM element meets specific conditions, such as whether it is in a focused state or is activated.

[0168] Core objective:

[0169] Dynamic filtering: Determine whether to capture the data of an element based on its status (such as focus status, activation status, etc.). Optimize efficiency: Avoid capturing unnecessary data and reduce the overhead of storage and processing. Precise recording: Ensure that the data in the critical status is accurately captured.

[0170] Status detection function:

[0171] Function shouldCapture: Used to determine whether an element meets specific status conditions.

[0172] Judgment logic:

[0173] Check whether the element is the current focused element (element === document.activeElement). Check whether the element contains a specific class name (such as active). Return value: If the element meets the condition, return true; otherwise, return false.

[0174] II. Conditional data capture: Decide whether to capture additional attributes or styles based on the result of status detection. For elements that meet specific conditions, capture all their attributes and styles; otherwise, only capture the basic information.

[0175] Core goal:

[0176] Dynamically adjust the detail level of data capture: Determine which data to capture based on the status of the element. Optimize efficiency: Avoid capturing too much data for unimportant elements and reduce the overhead of storage and processing. Ensure the integrity of critical data: For elements that meet the conditions, capture their complete information.

[0177] Conditional data capture function:

[0178] Function captureElementDetails: Used to capture the basic information of an element and determine whether to capture additional data based on the status. Parameter element: The DOM element for which information needs to be captured. Return value: An object containing the element information, and its detail level depends on the status of the element.

[0179] Capture logic:

[0180] Basic information: tagName: The tag name of the element. basicStyles: The computed styles of the element (obtained through window.getComputedStyle).

[0181] Conditional capture:

[0182] If the element meets specific conditions (judged by the shouldCapture function), then capture:

[0183] allAttributes: All attributes of the element.

[0184] fullStyles: Styles of the element in a specific state (such as the :active state).

[0185] III. Optimization of storage: During serialization, filter out unnecessary data to reduce the size of the serialization result. For example, do not include default unchanged styles and insignificant attributes in the serialized data.

[0186] In some embodiments, obtain the DOM information corresponding to the above monitoring event, which can be specifically implemented through the following steps: Obtain the difference information, where the above difference information is the change between the first DOM information and the second DOM information of the same above monitoring event, the above first DOM information is the DOM information monitored at the first moment, the above second DOM information is the DOM information monitored at the second moment, and the above first moment is earlier than the above second moment; delete the above first DOM information and retain the above second DOM information.

[0187] In this solution, by only retaining the latest DOM state and capturing the difference information, duplicate storage of the same data is avoided, significantly reducing the occupied storage space. In scenarios where user interactions are frequent and DOM states often change, this strategy is particularly important, helping the system maintain efficient data management capabilities after long-term operation. Retaining the latest DOM state and recording the difference information ensures that the DOM state changes can be accurately reconstructed during playback. Even in complex user sessions, this strategy can maintain the high fidelity of the replay, providing precise data support for fault location, user experience analysis, and system optimization.

[0188] Specifically, when the system monitors the occurrence of an event, it records the current DOM state as the second DOM information. If the same type of event has occurred previously and the DOM state (the first DOM information) has been captured, the system will compare the differences between these two DOM states, that is, which parts have changed. These difference information contains the change details of the DOM tree structure, CSS styles, JavaScript states, etc., and is the key data for accurately reproducing user operations during session replay.

[0189] To avoid duplicate storage of the same or similar DOM states, the system adopts an optimization strategy. After recording the difference information, the system deletes the previously stored DOM state (i.e., the first DOM information) related to it and only retains the latest DOM state (the second DOM information). This is because the difference information is sufficient to reflect the changes in the DOM state, and the complete second DOM information can be used as a reference point for subsequent changes.

[0190] Specifically, the incremental serialization algorithm: The incremental serialization algorithm is an efficient data processing strategy that significantly reduces the amount of data that needs to be serialized and transmitted by only processing the changed parts, thereby reducing the resource consumption of the system. It accurately records and replays DOM changes, improving the reliability and accuracy of the system when dealing with complex dynamic content. Working mechanism:

[0191] ㈠. Change detection: Change detection is based on listening for real-time changes in the DOM tree and is implemented through the `MutationObserver` API, which can provide detailed records of DOM modifications, including node addition, deletion, attribute or style modification, etc.

[0192] ㈡. Implementation method: Create a `MutationObserver` instance and configure it to listen for specific types of DOM changes.

[0193] Core objectives:

[0194] Listen for DOM changes in real time: Capture dynamic updates in the DOM tree, including node addition, deletion, attribute or style modification, etc. Provide detailed change records: Obtain detailed information about the changes through MutationObserver for subsequent processing. Dynamically process changes: Execute corresponding logic based on the change type (such as updating data, triggering events, etc.).

[0195] MutationObserver API:

[0196] Function: MutationObserver is used to listen for changes in the DOM tree and trigger a callback function when a change occurs.

[0197] Configuration options:

[0198] attributes: Whether to listen for attribute changes.

[0199] childList: Whether to listen for the addition or deletion of child nodes.

[0200] subtree: Whether to listen for changes in all descendant nodes.

[0201] attributeOldValue: Whether to record the value of the attribute before the change.

[0202] characterDataOldValue: Whether to record the value of the text node before the change.

[0203] Implementation method:

[0204] Create a MutationObserver instance: Pass in a callback function to handle the detected changes. Configure the monitoring target: Specify the DOM nodes to be monitored and the types of changes. Process the changes: Execute corresponding logic according to the type of change in the callback function.

[0205] (3) Difference recording: After detecting DOM changes, the system not only records these changes but also compares the previous and current states to generate a detailed difference report. This process involves calculating the differences between the previous and current DOM states and serializing these differences for subsequent storage or processing.

[0206] (4) Implementation method: Generate a difference object for each change, including the type of change, the affected elements, and the old and new values of relevant attributes or styles.

[0207] Core objectives:

[0208] Capture change details: Record the type of DOM change, the affected elements, and the old and new values of relevant attributes or styles. Generate a difference report: Serialize the change information into a difference object for subsequent analysis or storage. Support multiple types of changes: Process different types of DOM changes such as attribute changes, addition / removal of child nodes, and text node changes.

[0209] Difference recording function:

[0210] Function generateDiff: Generate a difference report based on the MutationRecord object. Parameter mutation: The change record detected by the MutationObserver. Return value: A difference object containing the type of change, the target element, the old value, and the new value.

[0211] Get the current value:

[0212] Function getCurrentValue: Get the current value according to the type of change.

[0213] Processing logic:

[0214] For attribute changes, get the current attribute value.

[0215] For child node changes, return the number of newly added or deleted nodes.

[0216] Difference comparison and merging algorithm: Through precise difference comparison and merging algorithms, the fidelity and consistency of each session replay can be ensured, improving the accuracy of problem diagnosis. Difference comparison and incremental updates reduce the amount of data to be processed, improving the efficiency of the replay process, especially evident in large-scale DOM operations. These ensure that changes between DOM snapshots are accurately recorded and can be fully reproduced when needed.

[0217] 1) Difference comparison algorithm: The difference comparison algorithm determines specific changes by comparing snapshots of two DOM states. This process involves a deep traversal of the old and new snapshots, comparing the differences of each node, including attributes, child nodes, text content, etc. This algorithm usually employs virtual DOM technology to make the comparison process efficient and accurate.

[0218] 2) Implementation method: Use a recursive function to deeply compare two DOM trees and record all discovered differences.

[0219] Core objectives:

[0220] Efficiently compare DOM states: Compare the differences between two DOM trees through deep traversal. Record detailed changes: Capture changes in node types, attributes, child nodes, and text content. Support multiple change types: Handle node type changes, text content changes, attribute changes, and child node changes.

[0221] Difference comparison function:

[0222] Function diff: Compares two DOM nodes and returns a list of differences. Parameter oldNode: The old DOM node. Parameter newNode: The new DOM node. Return value: An array containing all differences.

[0223] Comparison logic:

[0224] Node type change: If the node types are different, record the type change. Text content change: If the text content is different, record the text change. Attribute change: Compare the attributes of the nodes and record the attribute changes. Child node change: Recursively compare the child nodes and record the child node changes.

[0225] This function compares the types, text content, attributes, and child nodes of nodes layer by layer and accumulates all differences.

[0226] 3) The merge algorithm updates the current DOM state according to the difference report to make it consistent with the new snapshot state. This process ensures that during the replay, all recorded changes can be accurately applied to reconstruct a faithful DOM state.

[0227] 4) Implementation method: Apply changes to the current DOM one by one according to the difference report.

[0228] Core objectives:

[0229] Apply changes to the DOM: Apply changes to the current DOM one by one according to the difference report. Ensure consistency: Make the current DOM state exactly the same as the new snapshot state. Support multiple change types: Handle node type changes, text content changes, attribute changes, etc.

[0230] Merge function:

[0231] Function applyChanges: Updates the current DOM according to the difference report. Parameter dom: The root node of the current DOM tree. Parameter changes: The difference report, containing all the changes that need to be applied.

[0232] Change processing logic:

[0233] Node type change: Replace the current node with a new node. Text content change: Update the content of the text node. Attribute change: Update or delete the attributes of the node. Child node change: Add, delete, or replace child nodes.

[0234] This method updates the text, attributes, etc. of the DOM node according to the change type, ensuring that the DOM state is exactly the same as the new snapshot.

[0235] Specifically, in this solution, the capture and reconstruction of the DOM snapshot can be realized. The DOM snapshot capture is automatically triggered, and asynchronous and non-blocking processing technologies are used to record the DOM state in detail, and the DOM structure and state can be completely reconstructed when needed. This solution can also achieve multi-dimensional event capture. By setting up event listeners, detailed data of user operations and system responses can be captured in real time, including clicks, swipes, keyboard inputs, page loads, etc., as well as relevant context information.

[0236] Specifically, the above solution can also solve the data integrity and depth problems. Through multi-dimensional event capture and DOM snapshot technology, this solution can capture more complex and comprehensive user interaction data, providing deeper analysis and diagnostic capabilities than traditional technologies.

[0237] In the specific implementation process, according to the order of the above listening events before and after, replaying the above DOM information corresponding to the above listening events can be achieved through the following steps: Obtain the timestamps of all the above listening events, where the above timestamps are generated when the above listening events are monitored, and the above timestamps correspond to the above listening events one by one; Sort all the above listening events in the order of the above timestamps before and after to obtain the sorted above listening events; Traverse the above DOM information corresponding to the sorted above listening events and perform replay processing.

[0238] In this solution, by replaying the DOM information in the order of timestamps, the operation process of users in the telecom CRM system can be accurately reproduced. The timeline replay technology can help quickly locate the moment when a specific problem occurs. Through precise timeline replay, rich user behavior data and system response history can be provided, providing a solid foundation for data analysis and decision-making.

[0239] Specifically, when an event is monitored, the timestamp of the occurrence of the current event is recorded. This timestamp is usually an exact point in time, which can be a Unix timestamp or in the ISO8601 format, used to represent the specific moment when the event occurred. The timestamp and the monitored event are in one-to-one correspondence, meaning that each event has its own exclusive timestamp for subsequent sorting and replay.

[0240] Sort all the collected events and their corresponding timestamps. The basis for sorting is the chronological order of event occurrence. This step ensures that events can be replayed in the actual order in which they occurred in the original session, which is crucial for accurately restoring the process of user operations and system responses.

[0241] After the event sorting is completed, according to the sorted event list, the DOM information corresponding to each monitored event is restored and replayed one by one. This means that the system will recreate the DOM state when each event occurred, including the HTML element structure, CSS styles, and JavaScript state, and then simulate user operations or system responses, such as clicks, swipes, data loading, etc., to reproduce the original interaction process in the current environment.

[0242] Specifically, the following describes the timeline reconstruction.

[0243] First is the replay based on the order of timestamps.

[0244] Data preparation:

[0245] Data preparation: Every operation that occurs in the user interface or the response generated by the system is regarded as an independent event. Each event should be assigned an exact timestamp, which is the key basis for replaying user behavior and system responses.

[0246] Implementation method: According to the steps in event monitoring, use front-end JavaScript listeners to capture events immediately when user interactions or system events occur. For each event, record key information such as its type, the time of occurrence (timestamp), and the element that triggered the event.

[0247] Timestamp precision: Ensure that the timestamps of each event have sufficient precision. Use high-precision time markers (such as `performance.now()`) when capturing events to improve the precision of timestamps, especially in complex user interactions or rapid consecutive event sequences.

[0248] Event sorting:

[0249] Event sorting is completed by comparing the timestamps of each event. The timestamp, as the unique time identifier for each event occurrence, allows the system to accurately reconstruct the order in which events occurred.

[0250] Implementation method: Use an array and a sorting function to store all event data in an array, and use the array sorting method in JavaScript to sort according to timestamps.

[0251] Core objective:

[0252] Sort by timestamp: Sort the event array according to the timestamps of the events. Reconstruct the event order: Ensure that the events are arranged in the order in which they actually occurred. Efficient sorting: Use the array sorting method in JavaScript to ensure an efficient sorting process.

[0253] Sorting function:

[0254] Function sortEventsByTimestamp: Sort the event array according to timestamps. Parameter events: An array containing multiple event objects. Return value: The sorted event array.

[0255] Sorting logic:

[0256] Compare timestamps: Use the Array.prototype.sort method to compare the timestamps of each event. Ascending sort: Arrange the earlier events in the front and the later events in the back.

[0257] In the example, the `sortEventsByTimestamp` function uses the `Array.prototype.sort` method, which takes a sorting function as a parameter. The sorting function defines the sorting logic, that is, comparing the `timestamp` properties of two event objects. As a result, the `events` array is re-sorted in ascending order of timestamps.

[0258] Performance optimization: When processing a large amount of event data, the sorting operation may become a performance bottleneck. To optimize performance, you can consider using a more efficient sorting algorithm or perform sorting on the server side to reduce the front-end load. If the amount of event data is extremely large, consider sorting the data in batches, or using a timestamp index to manage the data to improve the processing speed and response time.

[0259] Build a replay queue:

[0260] Use a queue data structure to manage events, which can effectively process and replay events in order. The queue allows first-in, first-out (FIFO) operations, ensuring that events can be processed in the order of timestamps.

[0261] Implementation method: Utilize the `push` and `shift` methods of an array to implement the queue function. `push` is used to add an event to the end of the queue, and `shift` is used to remove an event from the head of the queue.

[0262] Core objective:

[0263] Process events in order: Ensure that events are processed in the order of timestamps. Manage events using a queue: Utilize the FIFO property of the queue to manage events. Process events efficiently: Implement enqueueing and dequeueing operations of the queue through the push and shift methods.

[0264] Queue functions:

[0265] Function enqueueEvents: Add the sorted event array to the queue. Function dequeueEvent: Remove and process the next event from the queue. Function processEvent: Process the event removed from the queue.

[0266] Queue logic:

[0267] Enqueue: Use the push method to add an event to the end of the queue. Dequeue: Use the shift method to remove an event from the head of the queue. Process the event: Call the processEvent function to process the event.

[0268] Performance optimization: Considering possible UI blocking or performance issues, the event queue can be processed asynchronously. Use functions such as `setTimeout` or `requestAnimationFrame` to schedule the processing of events, which can avoid blocking the UI during the processing of a large number of events.

[0269] Core objective:

[0270] Avoid UI blocking: Ensure that the UI remains responsive by processing events asynchronously. Decompose tasks: Decompose the event processing tasks into multiple small tasks and execute them in batches. Improve performance: Utilize the browser's idle time to process events and optimize performance.

[0271] Asynchronous processing functions:

[0272] Function processEventAsync: Asynchronously process a single event.

[0273] Asynchronous logic:

[0274] Use setTimeout: Delay the event processing task until the next event loop for execution.

[0275] Event replay logic:

[0276] To ensure that events can be replayed in the same context as the original session, each event is associated with a DOM snapshot that captures the DOM state at the time the event occurred.

[0277] Implementation method: Include a reference to the DOM snapshot or the snapshot data itself in the event data structure. Before replaying the event, first restore the DOM snapshot corresponding to the event to ensure that the DOM state is the same as when the event occurred.

[0278] Core objectives:

[0279] Restore DOM state: Before replaying the event, restore the DOM to the state when the event occurred. Associate the event with the snapshot: Include a reference or data of the DOM snapshot in the event data structure. Ensure consistency: Ensure that the behavior of the event during replay is the same as the original behavior.

[0280] Implementation method:

[0281] Save the DOM snapshot: When the event occurs, serialize the current DOM state and save it to the event object. Restore the DOM snapshot: Before replaying the event, restore the DOM to the snapshot state saved in the event object.

[0282] Traverse the event queue and trigger at regular intervals: Utilize the timer function in JavaScript (such as `setTimeout`), calculate the delay time based on the timestamp of the event, and trigger the events one by one in order.

[0283] Implementation method: Traverse the sorted event queue, and use `setTimeout` to set the timer according to the difference between the timestamp of each event and the timestamp of the previous event, so as to trigger the event with an appropriate delay.

[0284] Core objectives:

[0285] Trigger events in chronological order: Calculate the delay time based on the timestamp of the event to ensure that the events are triggered in order. Restore the DOM state: Restore the corresponding DOM snapshot before triggering the event to ensure that the event is executed in the correct DOM state. Simulate the real event flow: Simulate the actual occurrence time of the event through `setTimeout`.

[0286] Implementation method:

[0287] Traverse the event queue: Traverse the sorted event queue. Calculate the delay time: Calculate the delay time based on the difference between the timestamp of the current event and the timestamp of the previous event. Trigger the event at regular intervals: Use `setTimeout` to trigger the event after an appropriate delay.

[0288] Synchronize the state. To ensure that the event can be replayed in the same backend data environment as the original event, it is necessary to simulate relevant API requests and responses.

[0289] Implementation method: For each event, if there is a change in the dependent backend data, preset the simulated response data.

[0290] Core objectives:

[0291] Simulate API requests: When replaying events, simulate API requests related to the events. Provide simulated response data: Preset the simulated response data to ensure that the events can be processed correctly. Simulate network latency: Use setTimeout to simulate network latency to make the simulated behavior closer to the real scenario.

[0292] Implementation methods:

[0293] Define simulated response data: Predetermine the simulated response data for each API request. Simulate API calls: When replaying events, call the simulated API functions. Process simulated responses: After the simulated responses are returned, execute the event processing logic.

[0294] Simulate users and system environments. When replaying events, the reconstruction operations must take into account the then current user and system environment states, such as screen size, browser type, etc., to ensure the accuracy of the replay.

[0295] Implementation method: Record key environment state information in the event data and restore these states during replay.

[0296] Exception handling. The exception handling mechanism ensures that exceptions can be correctly recorded and appropriate error handling measures can be taken when data is missing or the DOM state is incorrect. Set up exception capture and handling logic to record and respond to any errors during the replay process.

[0297] In some embodiments, according to the relationships between the above-mentioned monitored events, replay the above-mentioned DOM information corresponding to the above-mentioned monitored events. Specifically, it can be achieved through the following steps: Construct a directed graph through graph theory algorithms, where the above-mentioned DOM information is the nodes of the above-mentioned directed graph, and the relationships between the above-mentioned monitored events are the edges of the above-mentioned directed graph; Traverse all the above-mentioned DOM information corresponding to the above-mentioned monitored events in the above-mentioned directed graph and perform replay processing according to the relationships between the above-mentioned monitored events.

[0298] In this solution, the construction of the directed graph enables the system to intuitively analyze the causal relationships and dependency orders between events, which is crucial for understanding and reproducing event flows in complex scenarios. By following the edge relationships in the graph, it can be ensured that during replay, all events are executed in the correct logical order, avoiding replay deviations caused by improper event execution orders and improving the accuracy of the replay.

[0299] Specifically, in the constructed directed graph, the DOM information corresponding to each listening event is regarded as a node. These nodes contain the complete DOM snapshot during event capture, including the HTML structure, CSS styles, JavaScript states, etc., which represent the snapshot of the system state at a specific moment.

[0300] Edges represent the dependency relationships between listening events, that is, the occurrence of one event directly affects the occurrence of another event. For example, clicking a button may trigger an AJAX request, and the response of the request may trigger DOM updates, which is the manifestation of edges in the graph. The direction of the edge represents the direction of the dependency relationship, that is, from the preceding event to the succeeding event.

[0301] By traversing the constructed directed graph, the DOM information can be replayed in the order of the dependency relationships between events. The choice of traversal algorithm depends on the specific scenario and requirements. Common ones include depth-first search (DFS), breadth-first search (BFS), and topological sorting. Topological sorting is particularly suitable for handling event sequences with dependency relationships because it can ensure that all events are replayed in the correct order and their mutual dependency relationships.

[0302] During the traversal process, the system will restore the DOM information corresponding to each node and execute events in the order of the dependency relationships represented by the edges. For example, if there is an edge from node A to node B in the graph, it means that before replaying the event corresponding to node B, the event corresponding to node A must be replayed first, ensuring the logical correctness and integrity of event replay.

[0303] Specifically, as Figure 5 shown below, the following describes the advanced replay based on interaction events.

[0304] First is data screening. Data screening is based on the front-end and back-end interaction events specified by the user, aiming to extract information directly related to specific business logics or problem analysis from the extensive event data.

[0305] Implementation method: Apply filtering conditions to all captured event data. These conditions are based on user-defined parameters such as event types, involved API endpoints, user operations, etc. to screen the data.

[0306] Core objective:

[0307] Filter events according to conditions: Filter event data according to user-specified parameters (such as event types, API endpoints, etc.). Return matching events: Return the event data that meets the conditions for further processing or analysis.

[0308] Implementation method:

[0309] Define event data: Store the captured event data in an array. Implement a filtering function: Filter the event data according to the parameters specified by the user. Return the filtered result: Return the event data that meets the conditions.

[0310] Introduction to graph construction: By treating events and related DOM snapshots as nodes of a graph, and the dependencies between events as edges of the graph, a directed graph is established. This model allows the use of graph theory algorithms to analyze and resolve complex dependencies between events. Define nodes: In the graph, each node represents an independent event or DOM snapshot. Nodes are constructed based on the following elements:

[0311] Event data: Each user interaction or system response is regarded as an independent event, such as clicks, swipes, inputs, API responses, etc.

[0312] DOM snapshot: The DOM state associated with each event is also part of the node to ensure that the corresponding view state can be restored during replay.

[0313] Define edges: Edges represent the causal relationship or sequential dependency between events and are established according to the following rules:

[0314] User operation sequence: If one event (such as clicking a button) directly causes another event (such as page navigation), a directed edge is established between them.

[0315] System logic dependency: The order of backend logic processing can also define edges. For example, the response of an API call is a prerequisite for another operation.

[0316] Basis for constructing dependencies: When constructing dependency relationships, the key is to determine the direct and indirect associations between events. The basis includes:

[0317] Timestamp relationship: The timestamps of events can show the order in which they occur, providing a basis for time-based dependencies.

[0318] Logical relationship: By analyzing the pre- and post-condition relationships of event triggers (such as a new page load event following a click event on a certain button).

[0319] User-defined rules: Allow users to specify association rules between specific events, and these rules are directly translated into edges in the graph.

[0320] Core objectives:

[0321] Events as nodes: Treat each event as a node in the graph. Dependency relationships as edges: Treat the dependency relationships between events as edges in the graph. Graph theory algorithm analysis: Use graph theory algorithms (such as DFS, BFS, shortest path, etc.) to analyze the dependency relationships between events.

[0322] Implementation method:

[0323] Define the graph structure: Use a Map to store nodes and edges. Add nodes: Add events to the graph as nodes. Add edges: Add the dependency relationships between events as edges according to user-defined rules. Analyze dependencies: Use graph theory algorithms to analyze the dependency relationships between events.

[0324] Explanation: The `EventGraph` class provides methods for adding nodes (events) and edges (event dependency relationships), as well as a framework for dependency analysis. The `addNode` method is used to add an event as a node in the graph, and the `addEdge` method is used to add a directed edge between two event nodes, indicating that one event directly depends on the completion of another event. The `analyzeDependencies` method is where the dependency analysis is initiated, and specific graph traversal and analysis algorithms (such as depth-first search, breadth-first search, or shortest path algorithms) will be implemented here.

[0325] Dependency relationship analysis: Use graph theory algorithms to analyze the dependency relationships between events. By identifying the nodes (events) and edges (dependency relationships) in the graph, it can be determined which events must occur first and which events occur subsequently.

[0326] Implementation method: Construct an algorithm to parse the dependency relationships in the graph. This is used in the present invention to determine the order of event execution.

[0327] Core objective:

[0328] Parse dependency relationships: Parse the dependency relationships between events through graph theory algorithms (such as DFS). Determine the execution order: Determine the execution order of events based on the dependency relationships. Visualize the results: Output the execution order of events for easy understanding or further processing.

[0329] Implementation method:

[0330] Define a dependency analyzer: Create a class to encapsulate the dependency analysis logic. Use DFS to parse dependencies: Traverse the graph through DFS and record the access order of events. Return the execution order: Reverse the result of DFS to obtain the correct execution order of events.

[0331] Explanation: The `DependencyAnalyzer` class accepts an event graph and provides the method `analyzeDependenciesDFS` to parse the dependencies of events using depth-first search. The `dfs` method implements the DFS algorithm, which is used to traverse the graph and add each node to the stack when exiting. Finally, the order in the stack (after being reversed) represents the order in which events should be executed.

[0332] A customized replay queue, through topological sorting of the dependency graph or other graph traversal algorithms, ensures that all events are arranged in the order of dependencies, thus guaranteeing the logical consistency of events during replay.

[0333] Topological sorting starts from nodes in the graph that have no incoming edges (i.e., events on which no other events depend). These nodes can be executed immediately because there are no preconditions. These nodes are placed at the front of the sorting result and removed from the graph, along with the edges emanating from these nodes.

[0334] After removing the nodes, new nodes with no incoming edges will appear, and this process is repeated until all nodes are sorted or sorting cannot continue (which usually means there are circular dependencies in the graph, and this is an incorrect situation that should be handled). Using the result of topological sorting, a replay queue of events is constructed. The sorting ensures that each event is executed after the events it depends on. Such a queue not only reflects the order of events but also ensures that each event can be executed in the correct context during actual replay. In complex application scenarios, an event may depend not only on a single event but on a combination of multiple events. Topological sorting can handle such multiple dependencies and find the correct execution timing for each event.

[0335] Core objectives:

[0336] Construct a replay queue: Sort events according to their dependencies using topological sorting. Handle circular dependencies: Detect and handle circular dependencies in the graph (an incorrect situation). Execute replay: Execute events in sequence according to the sorted queue.

[0337] Implementation methods:

[0338] Initialize the in-degree table: Calculate the in-degree of each node (i.e., the number of dependent events). Topological sorting: Add nodes with an in-degree of 0 to the queue and gradually process their adjacent nodes. Construct a replay queue: Store the sorted events in the queue. Execute replay: Execute events in the order of the queue.

[0339] Explanation: The `ReplayQueue` class constructs a replay queue through a topological sorting algorithm. The `buildQueue` method accepts an event dependency graph, determines the replay order of events using the topological sorting algorithm, and stores them in the `events` array. The `executeReplay` method executes event replay in the sorted order, ensuring that each event is executed after the events it depends on.

[0340] User input and system feedback:

[0341] User input simulation: By recording all user input behaviors (clicks, keystrokes, form submissions, etc.) and simulating these behaviors during replay.

[0342] System feedback reproduction: Capture the system's response to user input, including page updates, pop-up windows, message prompts, etc., and reproduce these responses during replay.

[0343] Implementation method:

[0344] 1) Simulate user operations: Reproduce all user operations on the interface, such as clicking buttons, filling out forms, etc. This usually requires triggering corresponding DOM events programmatically. 2) Reproduce system responses: Based on the captured data, simulate the system's response to user operations, such as data loading, page navigation, etc.

[0345] Core objectives:

[0346] Simulate user operations: Trigger DOM events (such as clicks, inputs, etc.) programmatically to reproduce user behavior. Simulate system responses: Based on the captured data, simulate the system's response to user operations (such as page navigation, data updates, etc.). Verify functionality: Ensure that the simulated interactions can correctly reflect actual user operations and system behavior.

[0347] Implementation method:

[0348] Define an event list: Package user operations and system responses as event objects. Simulate user operations: Trigger DOM events through dispatchEvent. Simulate system responses: Execute corresponding operations based on the event type (such as updating page content or navigating to a URL). Execute the simulation: Traverse the event list and simulate user operations and system responses in sequence.

[0349] Explanation: The `InteractionSimulator` class accepts an event list that includes user input and system feedback. The `simulateUserInput` method is used to simulate user input behaviors such as clicks and inputs. The `simulateSystemResponse` method is used to reproduce the system's response to user input, such as page navigation and content updates.

[0350] Specifically, this solution can achieve timeline reconstruction. Using graph theory and timestamp information, it can accurately reconstruct the order and logical relationships of events, providing sequential replay based on timestamps and advanced replay options based on interaction events. This solution can achieve high-fidelity playback. Using virtual DOM technology and precise time control algorithms, it ensures the visual and functional consistency of the replayed session with the original session.

[0351] Specifically, the above solution can improve the accuracy of event handling. By using incremental serialization combined with difference comparison and merging algorithms, as well as graph theory algorithms to optimize event handling, it can accurately grasp the dependency relationships between events and improve the precision of problem diagnosis and demonstration.

[0352] In the specific implementation process, after obtaining the DOM information corresponding to the above monitoring event, the above method further includes the following steps: performing hash processing on the above DOM information through a hash function to obtain a hash value corresponding to the above DOM information; performing data deduplication processing on the above DOM information through the above hash value to obtain the deduplicated DOM information.

[0353] In this solution, in scenarios with frequent user interactions, a large amount of DOM information will be captured, which may contain many duplicate or similar data. By deduplicating through hash values, the use of storage space can be significantly reduced, unnecessary data redundancy can be avoided, and storage efficiency can be improved.

[0354] Specifically, a hash function is a computational process that converts input data of any length into a fixed-length output, usually a hash value, which is unique. Even if the input data is very similar, the hash values are very likely to be different. In this solution, when DOM information is captured, the system uses a hash function to process the serialized version (such as JSON format) of the DOM information to obtain a hash value representing the DOM information.

[0355] When capturing and processing DOM information, it is checked whether the hash value corresponding to the newly captured DOM information already exists in the set of captured hash values. If the new hash value is the same as any of the hash values in the set, it means that the DOM information has not changed substantially, and the storage of the same DOM information can be avoided, thus achieving data deduplication. If the hash values are different, it indicates that the DOM information has changed, and in this case, the new DOM information will be stored and the hash value set will be updated.

[0356] Specifically, as Figure 6 shown, for multi-dimensional event capture, in order to accurately capture the element operations of users on the front-end Web page and the interface call logs between the front and back ends, this solution designs a system that can not only record detailed user interaction data but also capture the details of back-end API calls related to these interactions. In order to accurately capture the element operations of users on the front-end Web page and the interface call logs between the front and back ends in a telecom CRM system and effectively trace which front-end control an error originated from, a comprehensive multi-dimensional event capture system needs to be designed. This system will integrate front-end event capture, front-back-end interface calls, and error handling and feedback mechanisms to ensure that every user operation and system response are accurately recorded and can provide clear guidance when an error occurs.

[0357] Event Listening: Leveraging the browser's event model, by binding event listeners to key DOM elements, it captures and records user interaction behaviors and system events in real time. This includes direct user actions (such as clicks, scrolls, typing) and indirect system responses triggered by user operations (such as AJAX requests, page reloads).

[0358] Implementation Method: Use the `addEventListener` method in JavaScript to bind event listeners to target elements. For dynamic content or complex interaction patterns, use the event delegation pattern to listen for multiple events or set listeners on parent elements to capture events of child elements.

[0359] Core Objectives:

[0360] Capture User Interactions: Record user operations on the page in real time (such as clicks, scrolls, inputs, etc.). Capture System Events: Record system responses triggered by user operations (such as page loading, AJAX requests, etc.). Record Event Details: Store or process relevant information about the event (such as target element, event type, timestamp, etc.).

[0361] Implementation Method:

[0362] Bind Event Listeners: Use the addEventListener method to listen for target elements or global events. Event Delegation: For dynamic content or a large number of child elements, set listeners on the parent element to improve performance. Record Event Details: Extract and store relevant information about the event in the event callback function.

[0363] Wide Coverage: To comprehensively record all user interactions, the design of the listeners must cover all types of operations that users may perform. This includes but is not limited to standard mouse and keyboard events, as well as more complex touchscreen and special device inputs, and front-end generated events such as animation end or status change.

[0364] A. Implementation Method: For touchscreen devices and special input devices, record user touch operations by listening for events such as `touchstart`, `touchmove`, `touchend`, etc. B. For touchscreen devices and special input devices, record user touch operations by listening for events such as `touchstart`, `touchmove`, `touchend`, etc.

[0365] Core Objectives:

[0366] Capture touch events: Record user operations on the touch screen (such as clicks, swipes, long presses, etc.). Capture drag events: Record user drag operations (such as dragging elements). Record event details: Extract and store relevant information about the event (such as touch point coordinates, drag targets, etc.).

[0367] Implementation method:

[0368] Bind touch event listeners: Use addEventListener to listen for events such as touchstart, touchmove, touchend, etc. Bind drag event listeners: Listen for events such as dragstart, drag, dragend, etc. Record event details: Extract and store relevant information about the event in the event callback function.

[0369] Data processing and storage: The captured event data will be formatted as a JSON object and include the event type, timestamp, identifier of the target element, operation details, etc. The data is further sent to the server for asynchronous analysis and error tracking.

[0370] Data collection, use event listeners to capture user interaction events on the front end, such as clicks, inputs, swipes, etc. For each event, record the event type, timestamp, element that triggered the event, and relevant DOM attributes and user input data.

[0371] Collect detailed information:

[0372] Implementation method: Add event listeners to key elements and collect necessary data when the event is triggered.

[0373] Core objective:

[0374] Capture user interaction events: Record user operations on the page (such as clicks, inputs, swipes, etc.). Record event details: Include event type, timestamp, triggering element, DOM attributes, user input data, etc. Store or process data: Store the collected data locally or send it to the server for analysis.

[0375] Implementation method:

[0376] Bind event listeners: Use addEventListener to add event listeners for key elements (such as input, button, a). Extract event information: Extract relevant information about the event in the event callback function. Store or process data: Store the extracted data locally (such as localStorage) or send it to the server.

[0377] Context information: Record the context environment when an event occurs, including the current page URL, the CSS styles of elements, and the JavaScript state at the time of event triggering. This helps reproduce problems and conduct in-depth analysis later.

[0378] Implementation method: In the event capture function, additionally record the URL of the current page and the computed styles of elements.

[0379] Core objectives:

[0380] Record page URL: Capture the page URL when the event occurs. Record element styles: Obtain the computed styles (computedStyle) of the element that triggers the event. Record JavaScript state: Record JavaScript variables or states at the time of event triggering as needed.

[0381] Implementation method:

[0382] Obtain page URL: Use window.location.href to obtain the URL of the current page. Obtain element styles: Use window.getComputedStyle to obtain the computed styles of elements. Record context information: Store or send context information together with event data to the server.

[0383] Capture API call information associated with front-end controls: By clearly recording the relationship between API call parameters and front-end controls, problems caused by user operations can be quickly traced, especially in complex form operations or interactive functions. This data collection method provides a detailed perspective to help developers understand how users interact with the application, which operations trigger back-end services, and possible performance bottlenecks or logical errors. Capture and record API calls in event listeners, and at the same time record information about the front-end controls related to the calls, such as the ID, class name, or other identifiers of the controls, as well as the input data of the user on the controls.

[0384] i. For example, there is a form that triggers an API call when submitted. The following shows how to capture this call and its association with the front-end control:

[0385] Core objectives:

[0386] Record API call information: Include the endpoint, method, and parameters of the API. Associate front-end controls: Record the corresponding relationship between parameter values and front-end controls (such as control ID, class name, input value, etc.). Simulate or record API calls: Use the captured information for debugging or analysis.

[0387] Implementation method:

[0388] Bind event listeners: Add event listeners to the controls that trigger API calls (such as the submit button). Extract control information: Extract data such as input values and IDs from relevant controls. Record API call information: Integrate API call information and control information into a data structure. Simulate or record the call: Use the captured information for simulating calls or sending it to the server for analysis.

[0389] ii. Data structure: Each object in the `parameters` array not only records the parameter names and values of the API call but also includes the ID of the front-end control from which these parameters originated. This detailed recording method ensures that the context of each API call is fully captured, enabling more accurate tracing of data analysis and problem diagnosis back to specific user actions and front-end interface elements.

[0390] Context recording, through detailed environment snapshots and state associations, allows the system to accurately reproduce the user interaction scenario at any given moment, significantly improving the efficiency of problem diagnosis and reproduction. These detailed records provide comprehensive data support, enabling more in-depth analysis of events and more precise countermeasures, enhancing data integrity and analysis depth.

[0391] Environment snapshot: The purpose of an environment snapshot is to capture the complete context at the time of an event, including the page's DOM structure, current CSS styles, and the executing JavaScript state. This ensures that the context of the event can be recorded in detail, thus supporting accurate reproduction of the event.

[0392] Implementation method. Use the browser's API to capture the current state of the page. For example, `document.documentElement.outerHTML` can capture the HTML structure of the current page. Record the page's URL, browser window size, and other relevant environment information.

[0393] Core objectives:

[0394] Capture the page HTML structure: Record the complete DOM structure of the page at the time of the event. Record the page URL: Capture the current page's URL. Record the timestamp: Record the exact time of the event. Record the screen size: Capture the width and height of the browser window. Record the CSS styles: Record the CSS styles of the page or specific elements.

[0395] Implementation method:

[0396] Using document.documentElement.outerHTML: Capture the complete HTML structure of the page. Using window.location.href: Get the URL of the current page. Using new Date().toISOString(): Record the timestamp when the event occurs. Using window.innerWidth and window.innerHeight: Capture the dimensions of the browser window. Using window.getComputedStyle: Capture the computed styles of specific elements.

[0397] Status Association: To accurately associate the captured events with specific application states, information such as the user's login status, configuration settings, page layout, etc. needs to be recorded. This information helps to understand the background and influencing factors of the events.

[0398] Implementation Method: During the event capture process, synchronously record key application state information, such as the user's session ID, configured preferences, etc. For dynamic data and states that may affect event execution, use global state management or related technologies to capture and record.

[0399] Core Objectives:

[0400] Record Session Information: Capture the user's session ID or other identity identifiers. Record User Preferences: Capture the user's configuration or preference settings. Record Dynamic States: Capture dynamic data or states that may affect event execution (such as page layout, global variables, etc.).

[0401] Implementation Method:

[0402] Use Global State Management: Obtain the application state through global variables or state management tools (such as Redux, Vuex). Extract Session Information: Obtain the session ID from cookies, LocalStorage, or APIs. Extract User Preferences: Obtain the user's preference settings from LocalStorage, configuration files, or APIs. Record Dynamic States: Capture the dynamic states of the page (such as layout class names, global variables, etc.).

[0403] Data Serialization and Hashing Processing: After collecting and serializing the data, perform hashing processing on the result. The hash function can convert the input (such as a string or number) into a fixed-size string (usually hexadecimal digits). Hash values are very useful for fast data retrieval, data uniqueness verification, and security.

[0404] Implementation Method: Generate a unique hash value for each serialized event data for verifying data integrity and performing fast retrieval.

[0405] Core Objectives:

[0406] Data serialization: Convert data into string format (such as JSON). Hashing: Use a hash function to convert the serialized data into a hash value of a fixed length. Uniqueness verification: Verify the uniqueness and integrity of the data through the hash value.

[0407] Implementation method:

[0408] Use JSON.stringify: Serialize the data into a JSON string. Use a hash algorithm: such as SHA-256, MD5, etc., to convert the string into a hash value. Generate a unique identifier: The hash value can be used as the unique identifier of the data.

[0409] Through this method that combines serialization and hashing, the multi-dimensional event capture system can not only effectively manage and store event data, but also enhance the security and access efficiency of the data, ensuring the performance and reliability of the system when managing a large amount of event data.

[0410] Hash comparison and data storage. In the multi-dimensional event capture system, the main purpose of using the hash value for data comparison is to improve the efficiency of data processing, especially in the case where front-end user operations are frequent and there may be a large number of repeated behaviors. The serialized event data can quickly perform uniqueness checks by generating a hash value, so as to achieve efficient data deduplication, ensure data integrity, and improve data processing speed.

[0411] Data deduplication: Through the generated hash value, duplicate event data can be identified, thus avoiding storing redundant information, which helps to optimize the use of storage space.

[0412] Implementation method: Compare its hash value with the hash value of the stored data. If the same hash value already exists, skip the data; otherwise, store it in the database.

[0413] Core objectives:

[0414] Generate a hash value: Generate a unique hash value for each event data. Identify duplicate data: Determine whether the data has been stored through the hash value. Optimize storage: Avoid storing duplicate data and save storage space.

[0415] Implementation method:

[0416] Use a hash table: Store the correspondence between the hash value and the data. Hash value comparison: Before storing the data, check whether the hash value already exists in the hash table. Store unique data: Only store the data whose hash value does not exist.

[0417] Efficient storage: Use an efficient database system and data structure to store event data, ensuring fast retrieval and stable storage of the data.

[0418] Implementation method: Select appropriate database technology for data storage according to application requirements. In the present invention, using a NoSQL database such as MongoDB can facilitate the processing of a large amount of unstructured data. Design the database schema to optimize query efficiency and data access speed.

[0419] Core objectives:

[0420] Select an appropriate database: Select a database (such as MongoDB, PostgreSQL, etc.) according to data characteristics and application requirements. Optimize the database schema: Design an efficient database schema and indexes to speed up querying. Ensure stable data storage: Ensure the reliability and consistency of data through transaction, backup, and replication mechanisms.

[0421] Implementation method:

[0422] Use a NoSQL database: Such as MongoDB, suitable for storing unstructured or semi-structured data. Use an SQL database: Such as PostgreSQL, suitable for storing structured data and supporting complex queries. Optimize query performance: Improve query efficiency through indexing, sharding, and caching mechanisms. Ensure data security: Protect data through backup, replication, and transaction mechanisms.

[0423] Performance optimization, reduce the burden on the main thread: Use asynchronous and non-blocking technologies such as Web Workers or Promise to process event data, avoid affecting the performance of the main thread, and ensure smooth response of the user interface.

[0424] Implementation method: Create Web Workers to process data collection and preprocessing tasks in the background thread, thus not interfering with the main thread.

[0425] Core objectives:

[0426] Reduce the burden on the main thread: Move time-consuming data processing tasks to the background thread. Asynchronous processing: Use asynchronous technologies (such as Promise, async / await) to avoid blocking the main thread. Parallel processing: Utilize Web Workers to achieve multi-threaded processing and improve performance.

[0427] Implementation method:

[0428] Use Web Workers: Process data collection and preprocessing tasks in the background thread. Asynchronous programming: Use Promise or async / await to handle asynchronous tasks. Event-driven: Process task results through event listening and callback mechanisms.

[0429] Optimize the algorithm: Utilize batch processing and data flow pipeline technologies to increase the speed and efficiency of data processing.

[0430] Implementation method: Combine batch processing and streaming processing frameworks (such as Streams in Node.js) to optimize data processing.

[0431] Core objectives:

[0432] Batch processing: Process data in groups to reduce frequent I / O operations. Streaming processing: Process data step by step through a data stream pipeline to avoid loading a large amount of data into memory at once. Parallel processing: Utilize multi-threading or distributed computing frameworks to accelerate data processing.

[0433] Implementation method:

[0434] Batch processing: Process data in batches of fixed size. Streaming processing: Use a streaming processing framework (such as Streams in Node.js) to process data step by step. Pipeline technology: Connect multiple processing steps through a pipeline to form an efficient data processing flow.

[0435] In some embodiments, after obtaining the DOM information corresponding to the above monitoring event, the above method further includes the following steps: Compress the DOM information to obtain compressed DOM information; Store the compressed DOM information.

[0436] In this solution, the storage space occupied by the compressed DOM information is much smaller than the original data. For a system that needs to record DOM information for a long time or in large quantities, this can significantly reduce the storage requirement and lower the storage cost. When sending the DOM information to a server or other remote nodes, the compressed data can significantly reduce the network transmission time and lower the bandwidth consumption.

[0437] Specifically, after capturing the DOM information and converting it to JSON format, these JSON data will be compressed. Compression usually uses algorithms such as gzip, Brotli, or LZMA, etc. These algorithms can reduce the volume of data, making the resources occupied during storage and network transmission less. The data compression process usually involves two stages: encoding and decoding. The encoding process is carried out when capturing the DOM information, and the decoding process is carried out when these information need to be used or replayed.

[0438] The compressed DOM information will be stored in the system, which can be local storage, server database, or cloud storage, etc. The benefit of storing compressed data is that it can save storage space. For application scenarios with a large amount of data storage requirements, such as the telecom CRM system, this is particularly important because it helps to reduce the storage cost and improve the utilization efficiency of storage devices.

[0439] Specifically, the real-time data processing and compression are described below.

[0440] Optimize storage and processing efficiency using data processing technologies and compression algorithms.

[0441] Data stream processing: Process event data streams in real time, processing data immediately instead of in batches, which can reduce latency and memory occupancy.

[0442] Data compression: Use compression algorithms to reduce the volume of data and improve storage and network transmission efficiency.

[0443] Implementation methods:

[0444] 1) Adopt a streaming processing framework: Use modern stream processing frameworks such as Apache Kafka, Apache Flink, etc. to achieve efficient data ingestion, processing, and output. 2)

[0445] Implement effective compression algorithms: This solution.

[0446] Core objectives:

[0447] Streaming processing: Use a stream processing framework (such as Apache Kafka, Apache Flink) to achieve real-time data processing. Data compression: Reduce the overhead of data storage and transmission through compression algorithms. Efficient I / O: Optimize data read and write operations to reduce system resource consumption.

[0448] Implementation methods:

[0449] Streaming processing framework: Use Apache Kafka or Apache Flink to achieve efficient data ingestion, processing, and output. Compression algorithms: Use compression algorithms such as Gzip, Zstandard, etc. to reduce data size. Combination of streaming processing and compression: Embed compression operations during the stream processing to further improve efficiency.

[0450] Note: Use the `zlib` library in Node.js to implement gzip compression. The `pipeline` function is used to compress the data stream from the source file through gzip and then output it to the target file. This process automatically manages the pressure and error handling of the stream and is an effective way to process large-scale data streams.

[0451] Specifically, this solution can achieve real-time data processing and compression, apply data processing technologies and compression algorithms to optimize storage and processing efficiency, and reduce the impact on system performance.

[0452] Specifically, the above solution can reduce performance impact, through asynchronous processing and data compression technologies, mitigate the impact of data capture and processing on the main system performance, and ensure that the user experience is not damaged.

[0453] Specifically, the technical solution of the present application can not only solve the defects of the prior art, but also bring more efficient operation review, error diagnosis, and user experience analysis capabilities, providing a powerful tool for telecommunications service providers to optimize customer relationship management and improve service quality.

[0454] Specifically, the following introduces high-fidelity playback (i.e., replay).

[0455] Use virtual DOM technology and precise time control algorithm to reconstruct and replay user operations.

[0456] Virtual DOM technology: Virtual DOM allows us to reconstruct the DOM structure in memory without directly operating on the browser's DOM, which can greatly improve operation efficiency and reduce the overhead of repainting and reflow.

[0457] Precise time control algorithm: Ensure that each event is triggered at the time interval of its original occurrence to reproduce the real user interaction rhythm.

[0458] Implementation method:

[0459] 1) Virtual DOM operation: Use JavaScript objects in memory to simulate the structure of the DOM tree. When there are changes, only update the changed parts and finally batch update them to the actual DOM to improve performance. 2) Time control: The triggering of events is managed by setting timers, and each timer is set according to the original timestamp of the event to ensure time accuracy.

[0460] Core goal:

[0461] Virtual DOM: Reduce the number of direct operations on the actual DOM and improve performance through batch updates. Time control: Trigger events in chronological order through timers to ensure the accuracy of event replay.

[0462] Implementation method:

[0463] Virtual DOM: Use JavaScript objects to simulate the DOM structure, compare changes through the diff algorithm, and batch update the actual DOM. Time control: Use setTimeout to trigger events in the order of the event timestamps.

[0464] Explanation: Use the `virtual-dom` library to create and operate the virtual DOM. The `createVirtualDOM` function creates the virtual DOM structure based on event data. The `replayEvents` function triggers events through timers in the order of the events to simulate the actual operations of the user, and finally renders the constructed virtual DOM to the page. Specific embodiment:

[0466] 1. System Configuration and Initialization

[0467] In the telecommunications customer relationship management (CRM) system, an advanced session replay function is introduced. The system first configures an automatic trigger mechanism, which includes setting event listeners at the main interaction points of the web page, such as page loading, user clicks, form submissions, front-end and back-end interactions, etc. The system utilizes the browser's event model to bind event listeners to capture user interactions and system events in real time.

[0468] 2. Capture and Reconstruction of DOM Snapshots

[0469] Automatic trigger mechanism: When the user's interaction with the system triggers a preset event, such as clicking a button or submitting a form, the system automatically initiates the capture process of the DOM snapshot and serializes it.

[0470] Snapshot data serialization:

[0471]

[0472]

[0473] Structured format description:

[0474] tagName: Indicates the type of the element, such as DIV, INPUT, BUTTON, etc.

[0475] Attributes: Contains all the attributes of the element, such as id, class, type, placeholder, etc.

[0476] Styles: Records all the CSS styles of the element, which is crucial for maintaining visual consistency during reconstruction.

[0477] Content: For text nodes or buttons, etc., records the displayed text content.

[0478] Children: An array that contains the snapshot information of all child elements, also recorded recursively according to this structure.

[0479] Events: Records the event handling functions bound to this element, which is essential information for reconstructing the interaction function.

[0480] SiblingNodeIndex: Represents the position of this node in the children array of its parent node. This index can be used to quickly locate sibling nodes, improving the traversal efficiency and the flexibility of handling the relationships between sibling nodes.

[0481] Asynchronous and non-blocking processing: Use Web Workers for DOM parsing and data capture operations to ensure that the responsiveness of the main page is not affected.

[0482] Full - state capture: The system recursively traverses the DOM tree to capture all attributes, computed styles, content, and all related event listeners of each node.

[0483] 3. Event data capture and timeline reconstruction

[0484] Multi - dimensional event capture: The system captures detailed data of user operations and system responses in real - time, such as clicks, swipes, keyboard inputs, page loads, etc., as well as the context information related to these operations.

[0485] Timeline reconstruction: Using timestamps and graph theory algorithms, the system reconstructs the order and logical relationships of events to support sequential replay based on timestamps and advanced replay options based on interaction events.

[0486] 4. Real - time data processing and session replay

[0487] Real - time data processing: By applying data processing techniques and compression algorithms, the storage and processing efficiency are optimized, reducing the impact on system performance.

[0488] High - fidelity session replay: When fault diagnosis or user experience analysis is required, the system uses virtual DOM technology and precise time - control algorithms to reconstruct events from the stored data and replay the session with high fidelity.

[0489] In summary, the main innovations of this application are as follows:

[0490] Incremental serialization and differential comparison technology: The present invention uses incremental serialization to optimize data storage and transmission efficiency, only processes and transmits the changed parts of the DOM, reducing the data volume and resource consumption. Combined with differential comparison technology, during session replay, it can accurately record and reproduce the interaction between users and the system, improving the accuracy of problem diagnosis and solving the deficiencies of the prior art in terms of data integrity and replay accuracy. By recursively traversing the DOM tree and capturing the full state of each node, including attributes, styles, event listeners, and dynamically generated content. Using asynchronous and non - blocking processing techniques to ensure that the capture process does not affect the responsiveness of the user interface. When serializing DOM snapshots, the JSON format is used, which is convenient for storage and transmission. At the same time, conditional serialization and incremental serialization algorithms are used to optimize the capture and storage processes, reducing unnecessary data volume.

[0491] Application of Hash Comparison in Multi-dimensional Event Capture: To improve the efficiency and accuracy of event capture diagnosis, the present invention adopts the hash comparison technology. This technology generates unique hash values for the captured event data, and these hash values can then be used for quick comparison to determine whether the data state has changed. Efficiency improvement significantly speeds up the comparison of event data because it only needs to compare the hash values of the data instead of all the content. Error detection is enhanced. The uniqueness of the hash values can help identify incorrect or abnormal data faster, strengthening the anomaly detection process, and thus promoting faster problem diagnosis and solution.

[0492] Multi-dimensional Event Capture: By deploying a wide range of event listeners, the present invention can capture user interactions and system events in detail, including but not limited to all operations such as clicks, swipes, key presses, page loads, front-end and back-end interactions, etc. This multi-dimensional capture method is superior to the prior art, providing richer analysis data and enhancing the capabilities of user experience management, fault diagnosis, security monitoring, and behavior analysis. Adopt event listeners to widely capture all operations of users, including but not limited to click, swipe, keyboard input, page load events, and back-end API calls triggered by user operations. By recording detailed information of events, such as event type, timestamp, target element ID, user input data, etc., ensure that user behavior and system responses can be analyzed in detail.

[0493] Timeline Reconstruction Algorithm: The present invention adopts a comprehensive method of timestamps and graph theory algorithms to accurately reconstruct the order in which events occur. This is often not fully utilized in the prior art. Through this method, the present invention can provide a logically consistent event replay arranged in chronological order, simplifying the process of fault diagnosis and improving the accurate reproduction of user interface operations. Utilize the timestamps and dependencies of events to reconstruct the accurate order in which events occur through graph theory algorithms (such as depth-first search, breadth-first search, etc.), ensuring that events can be executed in the logical order of actual occurrence during replay, improving the efficiency and accuracy of anomaly diagnosis.

[0494] Data Serialization and Real-time Compression: Apply data serialization technology to convert the captured events and DOM snapshots into a format easy to store and transmit (such as JSON), and use compression algorithms (such as gzip) to reduce the data volume, optimize storage and processing efficiency, and reduce the impact on system performance.

[0495] High-fidelity Replay: Combine virtual DOM technology and precise time control algorithms to ensure that the interface state and details of user operations at the time of each event occurrence can be accurately restored during the replay session, thus providing a highly realistic reproduction of the user experience, facilitating problem location and user experience optimization.

[0496] The embodiments of the present application further provide a session replay device. It should be noted that the session replay device in the embodiments of the present application can be used to execute the session replay method provided in the embodiments of the present application. The device is used to implement the above embodiments and preferred implementation manners, and those that have been described will not be repeated. As used hereinafter, the term "module" can be a combination of software and / or hardware that realizes a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware is also possible and contemplated.

[0497] The following introduces the session replay device provided in the embodiments of the present application.

[0498] Figure 7 It is a structural block diagram of a session replay device according to an embodiment of the present application. As Figure 7 shown, the device includes:

[0499] A monitoring unit 10, configured to monitor a browser using an event listener to determine whether a monitoring event occurs, where the monitoring event at least includes one or more of clicking, scrolling, and typing; an obtaining unit 20, configured to obtain DOM information corresponding to the monitoring event when the monitoring event is monitored to occur, where the DOM information at least includes one or more of HTML elements, CSS styles, and JavaScript states; a replay unit 30, configured to replay the DOM information corresponding to the monitoring event according to the order before and after the occurrence of the monitoring event and / or the relationship between the monitoring events when a replay request is received, where the relationship between the monitoring events at least includes an association relationship.

[0500] In a specific implementation process, the obtaining unit includes a first obtaining module and a conversion module. The first obtaining module is configured to obtain initial DOM information using a target technology, where the target technology includes one or more of Web Workers mode, traversal mode, and automatic trigger mode; the conversion module is configured to convert the initial DOM information into JSON format to obtain the DOM information.

[0501] In some embodiments, the obtaining unit includes a second obtaining module and a retention module. The second obtaining module is configured to obtain difference information, where the difference information is the change between the first DOM information and the second DOM information of the same monitoring event, the first DOM information is the DOM information monitored at a first moment, the second DOM information is the DOM information monitored at a second moment, and the first moment is earlier than the second moment; the retention module is configured to delete the first DOM information and retain the second DOM information.

[0502] In the specific implementation process, the replay unit includes a third acquisition module, a sorting module, and a first replay module. The third acquisition module is used to acquire the timestamps of all the above-mentioned monitoring events, where the above-mentioned timestamps are generated when the above-mentioned monitoring events are monitored, and the above-mentioned timestamps and the above-mentioned monitoring events correspond one by one; the sorting module is used to sort all the above-mentioned monitoring events in the order of the above-mentioned timestamps before and after to obtain the sorted above-mentioned monitoring events; the first replay module is used to traverse the above-mentioned DOM information corresponding to the sorted above-mentioned monitoring events and perform replay processing.

[0503] In some embodiments, the replay unit includes a construction module and a second replay module. The construction module is used to construct a directed graph through a graph theory algorithm, where the above-mentioned DOM information is the node of the above-mentioned directed graph, and the relationship between the above-mentioned monitoring events is the edge of the above-mentioned directed graph; the second replay module is used to traverse the above-mentioned DOM information corresponding to all the above-mentioned monitoring events in the above-mentioned directed graph and perform replay processing according to the relationship between the above-mentioned monitoring events.

[0504] In the specific implementation process, the above-mentioned device further includes a hash processing unit and a deduplication unit. The hash processing unit is used to perform hash processing on the above-mentioned DOM information through a hash function after acquiring the DOM information corresponding to the above-mentioned monitoring event to obtain the hash value corresponding to the above-mentioned DOM information; the deduplication unit is used to perform data deduplication processing on the above-mentioned DOM information through the above-mentioned hash value to obtain the deduplicated DOM information.

[0505] In some embodiments, the above-mentioned device further includes a compression unit and a storage unit. The compression unit is used to perform compression processing on the above-mentioned DOM information after acquiring the DOM information corresponding to the above-mentioned monitoring event to obtain the compressed DOM information; the storage unit is used to store the compressed DOM information.

[0506] The replay device for the above-mentioned session includes a processor and a memory. The above-mentioned monitoring unit, acquisition unit, replay unit, etc. are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to implement corresponding functions. The above-mentioned modules are all located in the same processor; or, the above-mentioned each module is located in different processors in any combination form.

[0507] The processor contains a kernel, and the kernel retrieves the corresponding program unit from the memory. One or more kernels can be set, and the problem of low accuracy of session replay in the prior art is solved by adjusting the kernel parameters.

[0508] The memory may include non-permanent memory in a computer-readable medium, forms such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM), and the memory includes at least one storage chip.

[0509] An embodiment of the present invention provides a computer-readable storage medium. The computer-readable storage medium includes a stored program. When the program runs, it controls the device where the computer-readable storage medium is located to execute the replay method of the above session.

[0510] An embodiment of the present invention provides a processor. The processor is used to run a program. When the program runs, it executes the replay method of the above session.

[0511] An embodiment of the present invention provides a device. The device includes a processor, a memory, and a program stored on the memory and executable on the processor. When the processor executes the program, it implements at least the steps of the replay method of the session. The device herein can be a server, a PC, a PAD, a mobile phone, etc.

[0512] A computer program product includes a non-volatile computer-readable storage medium. The non-volatile computer-readable storage medium stores a computer program. When the computer program is executed by a processor, it implements the steps of the replay method of the session in each embodiment of the present application.

[0513] The present application also provides a session replay system, including one or more processors, a memory, and one or more programs. The one or more programs are stored in the memory and are configured to be executed by the one or more processors. The one or more programs include those for executing any one of the above replay methods of the session.

[0514] Obviously, those skilled in the art should understand that the above modules or steps of the present invention can be implemented by a general-purpose computing device. They can be concentrated on a single computing device or distributed on a network composed of multiple computing devices. They can be implemented by program codes executable by the computing device. Thus, they can be stored in a storage device and executed by the computing device. And in some cases, the steps shown or described can be executed in a different order from here, or they can be separately made into individual integrated circuit modules, or multiple modules or steps among them can be made into a single integrated circuit module to implement. In this way, the present invention is not limited to any specific combination of hardware and software.

[0515] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memories, CD-ROMs, optical memories, etc.) containing computer-usable program codes.

[0516] This application is described with reference to the flowcharts and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the present application. It should be understood that each flow and / or block in the flowchart and / or block diagram can be implemented by computer program instructions, and the combination of flows and / or blocks in the flowchart and / or block diagram can also be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices generate means for implementing the functions specified in one Figure 1 flow or multiple flows and / or blocks Figure 1 or multiple blocks.

[0517] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory generate a manufactured article including instruction means that implement the functions specified in one Figure 1 flow or multiple flows and / or blocks Figure 1 or multiple blocks.

[0518] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one Figure 1 flow or multiple flows and / or blocks Figure 1 or multiple blocks.

[0519] In a typical configuration, a computing device includes one or more processors (CPUs), an input / output interface, a network interface, and memory.

[0520] The memory may include non-permanent memory in the form of computer-readable media, random access memory (RAM), and / or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM). The memory is an example of computer-readable media.

[0521] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0522] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0523] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A method for replaying a session, characterized in that: include: Using an event listener to monitor the browser to determine whether a monitoring event occurs, wherein the monitoring event includes at least one or more of click, scroll and type; When the listening event occurs, obtaining DOM information corresponding to the listening event, wherein the DOM information includes at least one or more of an HTML element, a CSS style, and a JavaScript state; When a replay request is received, the DOM information corresponding to the listening event is replayed according to the sequence of occurrence of the listening events and / or the relationship between the listening events, wherein the relationship between the listening events at least includes an association relationship.

2. The method according to claim 1, characterized in that: Get the DOM information corresponding to the listening event, including: Acquire initial DOM information using a target technology, wherein the target technology includes one or more of a Web Workers method, a traversal method, and an automatic triggering method; The initial DOM information is converted into JSON format to obtain the DOM information.

3. The method according to claim 1, characterized in that: Get the DOM information corresponding to the listening event, including: Obtaining difference information, wherein the difference information is a change between first DOM information and second DOM information of the same monitoring event, the first DOM information is the DOM information monitored at a first moment, the second DOM information is the DOM information monitored at a second moment, and the first moment is earlier than the second moment; The first DOM information is deleted, and the second DOM information is retained.

4. The method according to claim 1, characterized in that: Replaying the DOM information corresponding to the listening event according to the order in which the listening event occurs includes: Obtaining the timestamps of all the monitoring events, wherein the timestamps are generated when the monitoring events are monitored, and the timestamps correspond to the monitoring events one by one; Sorting all the monitoring events according to the order of the timestamps to obtain the sorted monitoring events; The DOM information corresponding to the sorted listening events is traversed and replayed.

5. The method according to claim 1, characterized in that Replaying the DOM information corresponding to the listening event according to the relationship between the listening events includes: Constructing a directed graph by using a graph theory algorithm, wherein the DOM information is a node of the directed graph, and the relationship between the monitoring events is an edge of the directed graph; The DOM information corresponding to all the monitoring events in the directed graph is traversed, and replay processing is performed according to the relationship between the monitoring events.

6. The method according to any one of claims 1 to 5, characterized in that After obtaining the DOM information corresponding to the listening event, the method further includes: Performing hash processing on the DOM information through a hash function to obtain a hash value corresponding to the DOM information; The DOM information is deduplicated using the hash value to obtain deduplicated DOM information.

7. The method according to any one of claims 1 to 5, characterized in that After obtaining the DOM information corresponding to the listening event, the method further includes: Compressing the DOM information to obtain compressed DOM information; Stores compressed DOM information.

8. A conversation playback device, characterized in that: include: A monitoring unit, used to monitor the browser using an event monitor to determine whether a monitoring event occurs, wherein the monitoring event includes at least one or more of click, scroll and type; An acquisition unit, configured to acquire DOM information corresponding to the listening event when the listening event occurs, wherein the DOM information includes at least one or more of an HTML element, a CSS style, and a JavaScript state; The replay unit is used to replay the DOM information corresponding to the listening event according to the order of occurrence of the listening events and / or the relationship between the listening events when a replay request is received, wherein the relationship between the listening events at least includes an association relationship.

9. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the conversation replay method described in any one of claims 1 to 7 are implemented.

10. A session replay system, characterized in that: include: One or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and are configured to be executed by the one or more processors, and the one or more programs include a replay method for executing a session as described in any one of claims 1 to 7.

Images