Lightweight customer service operation backtracking analysis method and system based on event stream snapshot

Abstract

The invention discloses a lightweight customer service operation backtracking analysis method and system based on an event stream snapshot, and relates to the technical field of backtracking recording, and the method comprises the steps: recording a DOM state of an initial page, traversing a DOM Tree of the whole page, converting the DOM Tree into JSON structure data through nodeType mapping, and generating a first screen DOM snapshot; updating incremental data after first screen snapshot, hijacking incremental change data by monitoring DOM incremental change, and storing the data into JSON structure data; and on the basis of the timestamp, assembling and restoring an event queue of the snapshots after analyzing by querying a screen recording index JSON file, reconstructing the snapshots into a corresponding DOM tree, and reproducing customer service operations covered in the timestamp. According to the invention, the technical design of event stream traceable recording is realized, and a new thought is provided for the application of the traceable recording technology.

Description

Technical Field

[0001] The present invention relates to the technical field of retrospective recording, and in particular to a lightweight customer service operation retrospective analysis method and system based on event stream snapshots. Background Art

[0002] In the computer field, retroactive recording usually refers to a recording function provided in scenarios such as live broadcasts or meetings, allowing viewers or participants to go back and record part of the content.

[0003] The existing technology has the following shortcomings: Defect 1: Large size and poor performance: Screenshots or WebRTC capture bitmaps frame by frame, which have low compression rates and cannot be updated incrementally; the browser needs to continuously allocate video memory / memory. Defect 2: Coarse retrieval granularity: The video timeline can only be located by keyframes at the second level; log tracking lacks continuous DOM snapshots and cannot accurately timestamp events to the millisecond level. Defect 3: Sensitive information leakage: The video recording will also capture the customer service personal desktop and the customer's plaintext mobile phone number; the existing technology lacks an element-level desensitization mechanism and can only be manually coded afterwards. Defect 4: Incomplete reproduction scenario: Screenshots cannot record localStorage and interface response bodies; log tracking ignores details such as user scrolling, hovering, and pop-up windows, resulting in "only seeing the results, not the process." Summary of the Invention

[0004] In order to solve the above problems, the purpose of the present invention is to provide a lightweight customer service operation retrospective analysis technology based on event stream snapshots, aiming to solve the problems existing in the existing technology such as excessive session-level data volume and performance bottlenecks, incomplete reproduction scenarios, risks of sensitive information leakage, and high implementation and maintenance costs.

[0005] To achieve the above technical objectives, this application provides a lightweight customer service operation retrospective analysis method based on event stream snapshots, including the following steps: Record the DOM state of the initial page, traverse the DOM Tree of the entire page and convert it into JSON structure data through nodeType mapping to generate a DOM snapshot of the first screen; Update the incremental data after the first screen snapshot, hijack the incremental change data by monitoring the DOM incremental changes, and store it in JSON structure data; Based on the timestamp, the screen recording index JSON file is queried, parsed, assembled, and restored to the snapshot events queue. The snapshot is then rebuilt into the corresponding DOM tree to reproduce the customer service operations covered by the timestamp.

[0006] Preferably, when monitoring DOM incremental changes, the browser Mutation Observer monitors and obtains DOM incremental changes, generates Mutation Observer record data for each change, cleans and converts it into a storable JSON data object, and outputs events.

[0007] Preferably, when monitoring, the monitoring behaviors include: DOM changes, mouse movement, mouse interaction, page or element scrolling, window size change, and input, wherein DOM changes include node creation, destruction, node attribute changes, and text changes.

[0008] Preferably, when hijacking and storing data, the incrementally changed events data packets are merged every 10 seconds for OSS upload and storage, and a screen recording events index JSON is constructed. When the screen recording ends, the complete screen recording index JSON file is uploaded.

[0009] Preferably, when recording the screen, inject a screen recording cdn js script into the workbench project and enable DOM snapshot collection when the business scenario is met.

[0010] Preferably, when rebuilding the snapshot into the corresponding DOM tree, the snapshot is rebuilt into the corresponding DOM tree in a sandbox environment according to the processing rules of the nodeType mapping.

[0011] Preferably, when replaying customer service operations, a special class is marked on the rendered DOM element for the recorded sensitive information, and the DOM rendering is ignored during redrawing to achieve sensitive information hiding.

[0012] The present invention also discloses a lightweight customer service operation retrospective analysis system based on event stream snapshots, including: The snapshot generation module is used to record the DOM state of the initial page, traverse the DOM Tree of the entire page, and convert it into JSON structure data through nodeType mapping to generate a DOM snapshot of the first screen; The incremental update module is used to update the incremental data after the first screen snapshot. By monitoring the incremental changes of DOM, the incremental change data is hijacked and stored in JSON structure data; The playback module is used to query the screen recording index JSON file based on the timestamp, parse and assemble the restored snapshot events queue, and rebuild the snapshot into the corresponding DOM tree to reproduce the customer service operations covered by the timestamp.

[0013] Preferably, the snapshot generation module, when monitoring DOM incremental changes, obtains DOM incremental changes through the browser mutation Observer, generates Mutation Observer record data for each change, cleans and converts it into a storable JSON data object, and outputs events; when monitoring, the monitoring behavior includes: DOM changes, mouse movement, mouse interaction, page or element scrolling, window size change, input, among which DOM changes include node creation, destruction, node attribute changes and text changes.

[0014] Preferably, when hijacking and storing data, the incremental update module merges the incrementally changed events data packets every 10 seconds for OSS upload and storage, constructs a screen recording events index JSON, and uploads the complete screen recording index JSON file when the screen recording ends. During screen recording, a screen recording cdn js script is injected into the workbench project, and DOM snapshot collection is enabled when the business scenario is met. When rebuilding the snapshot into the corresponding DOM tree, the snapshot is rebuilt into the corresponding DOM tree in a sandbox environment according to the nodeType mapping processing rules. The playback module, when replaying customer service operations, marks the recorded sensitive information with a special class on the rendered DOM element, and ignores the DOM rendering during redrawing to hide the sensitive information.

[0015] The present invention discloses the following technical effects: The present invention uses "event stream snapshots" to record only DOM changes, interface requests, and incremental log instructions. After binary incremental compression, the memory usage is only ≈10MB in 10 minutes and the memory peak is <30MB, solving the dual bottlenecks of size and performance.

[0016] The present invention serializes DOM changes, network round trips, console logs, and local storage snapshots into the same event stream, which can 100% reconstruct the complete scene of the customer service at that time.

[0017] The present invention performs local real-time erasure of marked elements and sensitive fields hit by regular expressions on the browser side to ensure that sensitive data is not uploaded and meet security compliance requirements.

[0018] The present invention can be injected through two lines of script, with zero plug-ins and zero embedded points, and supports rapid access to any Web customer service system and subsequent seamless upgrades. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0020] Figure 1 This is a timing diagram of the screen recording script running according to the present invention; Figure 2 It is a schematic flow chart of the method described in the present invention. DETAILED DESCRIPTION

[0021] In order to make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with 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. The components of the embodiments of the present application generally described and shown in the drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the application for protection, but merely represents the selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without making creative work are within the scope of protection of this application.

[0022] like Figure 1-Figure 2 As shown, the present invention provides a lightweight customer service operation retrospective analysis technology based on event stream snapshots, including the following contents: When recording, the DOM state of the initial page will be recorded first, the DOM Tree of the entire page will be traversed and converted into JSON structure data through nodeType mapping, and a DOM snapshot of the first screen will be generated.

[0023] For incremental data updates after the initial snapshot, the browser uses mutation observers to monitor incremental DOM changes. Method (attribute) hijacking is performed through global event monitoring and event (attribute) proxying, and the hijacked incremental change data is stored in a JSON structure. A unique ID is generated throughout the recording process to identify the DOM node corresponding to the incremental data, and timestamps are used to ensure playback order.

[0024] Mutation Observer listens to behaviors including: DOM mutation (node creation, destruction, node attribute change, text change), mouse movement, mouse interaction, page or element scrolling, window size change, input. When we try to change the attributes of the page DOM, or add new DOM nodes, a Mutation Observer record will be generated. The Mutation Observer record (record) data is cleaned and converted into a storable JSON structure data object, and the events (events) are output.

[0025] For example, the application merges the incremental change events data packet every 10 seconds for OSS upload storage, and constructs a screen recording events index JSON. When the screen recording is finished, the complete screen recording index JSON file is uploaded and the file key is stored to the customer service service. Affected by the operation frequency, the more frequent the page changes, the more events generated, about 5M~10M incremental file size is generated in 10 minutes, which is extremely small compared to video screen recording storage. Storing once every 10 seconds realizes small volume and fast uploading, which ensures that it does not block and does not occupy the browser performance, and increases the stability of the workbench.

[0026] When recording is performed, only one screen recordingcdnjs script needs to be injected in the workbench project, and the DOM snapshot collection is started when the business scenario is met. The script runs without user awareness, and does not need user authorization, and is executed in the background. The system memory occupied is only 10~20M, which is almost zero performance loss.

[0027] The playback principle is: according to the associated session identifier, the screen recording index JSON file is queried from the customer service service. After parsing, the snapshot events queue is assembled and restored, and then the JSON product is traversed while the events are taken out and reproduced by starting a timer.

[0028] Recording sensitive information processing, special class needs to be developed on the rendered DOM element to mark, ignore the DOM rendering when redrawing, and realize sensitive information hiding.

[0029] The application is aimed at the problem of large volume of session-level data and performance bottleneck: the prior art adopts frame-by-frame screenshot or WebRTC bitmap collection, which has low compression rate and cannot be incrementally updated, resulting in hundreds of megabytes of files and hundreds of megabytes of memory occupied in 10 minutes. The application only records the incremental instructions of DOM changes, interface requests and logs through "event stream snapshot", and after binary incremental compression, only about 10MB and memory peak <30MB in 10 minutes, solving the dual bottleneck of volume and performance.

[0030] This invention addresses incomplete scenarios: screenshots fail to restore interface responses and local states; logging misses details like scrolling, hovering, and pop-up windows. By serializing DOM changes, network round trips, console logs, and local storage snapshots into a single event stream, this invention can 100% recreate the complete customer service scene.

[0031] This invention addresses the risk of sensitive information leakage: existing recordings or embedded points upload customer service desktops and plain text customer data, lacking real-time desensitization. This invention performs local, real-time erasure of marked elements and sensitive fields matched by regular expressions on the browser side, ensuring that sensitive data is not uploaded and meeting security compliance requirements.

[0032] This invention addresses the high implementation and maintenance costs of traditional solutions, which require plugin installation or extensive manual tracking, and repeated work after version iterations. This invention can be injected with just two lines of script, eliminating plugin and tracking requirements, and supports rapid integration and subsequent seamless upgrades of any web customer service system.

[0033] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0034] In the description of the present invention, it should be understood that the terms "first" and "second" are used for descriptive purposes only and should not be understood to indicate or imply relative importance or implicitly specify the number of the technical features indicated. Therefore, a feature specified as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the present invention, "plurality" means two or more, unless otherwise specifically defined.

[0035] Obviously, those skilled in the art may make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if such changes and modifications fall within the scope of the claims and their equivalents, the present invention is intended to include such changes and modifications.

Claims

1. A lightweight customer service operation retrospective analysis method based on event stream snapshots, characterized by: The following steps are involved: Record the DOM state of the initial page, traverse the DOM Tree of the entire page and convert it into JSON structure data through nodeType mapping to generate a DOM snapshot of the first screen; Update the incremental data after the first screen snapshot, hijack the incremental change data by monitoring the DOM incremental changes, and store it in JSON structure data; Based on the timestamp, by querying the screen recording index JSON file, parsing and assembling the restored snapshot events queue, and reconstructing the snapshot into the corresponding DOM tree, the customer service operations covered by the timestamp are reproduced.

2. The lightweight customer service operation retrospective analysis method based on event stream snapshots according to claim 1 is characterized by: When monitoring DOM incremental changes, the browser Mutation Observer monitors DOM incremental changes, generates Mutation Observer record data for each change, cleans and converts it into a storable JSON data object, and outputs events.

3. The lightweight customer service operation retrospective analysis method based on event stream snapshots according to claim 2 is characterized by: When monitoring, the monitoring behaviors include: DOM changes, mouse movement, mouse interaction, page or element scrolling, window size change, and input. The DOM changes include node creation, destruction, node attribute changes, and text changes.

4. The lightweight customer service operation retrospective analysis method based on event stream snapshots according to claim 3 is characterized by: The method of hijacking the incremental change data by monitoring the incremental changes of DOM and storing it in JSON structure data specifically includes merging the incremental change events data packets every 10 seconds for OSS upload and storage, constructing the screen recording events index JSON, and uploading the complete screen recording index JSON file when the screen recording ends.

5. The lightweight customer service operation retrospective analysis method based on event stream snapshots according to claim 4 is characterized by: When recording the screen, inject a screen recording CDN JS script into the workbench project to enable DOM snapshot collection when the business scenario is met.

6. The lightweight customer service operation retrospective analysis method based on event stream snapshots according to claim 5 is characterized by: The step of reconstructing the snapshot into the corresponding DOM tree specifically involves, in a sandbox environment, reconstructing the snapshot into the corresponding DOM tree according to a processing rule of nodeType mapping.

7. The lightweight customer service operation retrospective analysis method based on event stream snapshots according to claim 6 is characterized by: When replaying customer service operations, for recorded sensitive information, a special class is marked on the rendered DOM element, and the DOM rendering is ignored during redrawing to hide the sensitive information.

8. A lightweight customer service operation retrospective analysis system based on event stream snapshots, characterized by: include: The snapshot generation module is used to record the DOM state of the initial page, traverse the DOM Tree of the entire page, and convert it into JSON structure data through nodeType mapping to generate a DOM snapshot of the first screen; The incremental update module is used to update the incremental data after the first screen snapshot. By monitoring the incremental changes of DOM, the incremental change data is hijacked and stored in JSON structure data; The playback module is used to query the screen recording index JSON file based on the timestamp, parse and assemble the restored snapshot events queue, and rebuild the snapshot into the corresponding DOM tree to reproduce the customer service operations covered by the timestamp.

9. The lightweight customer service operation retrospective analysis system based on event stream snapshots according to claim 8 is characterized by: The snapshot generation module, when monitoring DOM incremental changes, obtains DOM incremental changes through the browser mutation Observer, generates Mutation Observer record data for each change, cleans and converts it into a storable JSON data object, and outputs events; When monitoring, the monitoring behaviors include: DOM changes, mouse movement, mouse interaction, page or element scrolling, window size change, and input. The DOM changes include node creation, destruction, node attribute changes, and text changes.

10. The lightweight customer service operation retrospective analysis system based on event stream snapshots according to claim 9 is characterized by: When hijacking and storing data, the incremental update module merges incrementally changed event data packets every 10 seconds for OSS upload and storage, constructs a screen recording events index JSON, and uploads the complete screen recording index JSON file when the screen recording ends. During screen recording, a screen recording cdn js script is injected into the workbench project, and DOM snapshot collection is enabled when the business scenario is met. When rebuilding the snapshot into the corresponding DOM tree, the snapshot is rebuilt into the corresponding DOM tree in a sandbox environment according to the nodeType mapping processing rules. When replaying customer service operations, the playback module marks a special class on the rendered DOM element for recorded sensitive information, and ignores the DOM rendering during redrawing to hide the sensitive information.

Images