Program fault backtracking method and device based on webpage monitoring, medium and equipment

Abstract

The invention discloses a program fault backtracking method and device based on webpage monitoring, a medium and equipment, and the method comprises the steps that a client creates an initial DOM structure snapshot of a target page in response to an access signal of the target page, and monitors a trigger event of the target page; when the client monitors a trigger event on the target page, recording DOM structure change information generated by the trigger event, event information and an event timestamp; the client reports the initial DOM structure snapshot, and DOM structure change information, event information and event timestamp corresponding to each trigger event to a server; and the server reconstructs a DOM structure and a trigger event based on the received report information to restore and record a use playback video of the target page so as to perform program fault backtracking on the target page based on the use playback video.

Description

Technical Field

[0001] This application relates to the field of web development technologies, and particularly to a method, apparatus, storage medium, and computer device for program fault backtracking based on web monitoring. Background Art

[0002] In the traditional process of page development and maintenance, the discovery and repair of page errors often rely on user feedback and manual debugging by developers. However, this method has significant limitations because it is difficult to comprehensively capture the specific operation details of users on the page, resulting in problems being difficult to accurately reproduce. Although existing technologies use front-end screen recording to record page content in an attempt to solve this problem, this method not only generates a large amount of data, imposing an additional burden on network bandwidth, but also it is difficult to deeply analyze the DOM structure and its interaction information of the page by simply observing the problem through video playback, thus limiting the fundamental solution to the problem. Summary of the Invention

[0003] In view of this, embodiments of this application provide a method, apparatus, storage medium, and computer device for program fault backtracking based on web monitoring. By comprehensively recording DOM structure changes, event information, and timestamps, the server-side can reconstruct the DOM structure and trigger events to record and play back videos, which can accurately restore every operation of users on the web page. Developers can intuitively view the problem reproduction process, thereby helping developers accurately find the problem and shortening the time to solve the problem.

[0004] According to one aspect of this application, a method for program fault backtracking based on web monitoring is provided. The method includes:

[0005] The client, in response to an access signal to a target page, creates an initial DOM structure snapshot of the target page and listens for trigger events on the target page;

[0006] When the client listens for a trigger event on the target page, it records the DOM structure change information, event information, and event timestamp generated by the trigger event;

[0007] The client reports the initial DOM structure snapshot, as well as the DOM structure change information, event information, and event timestamp corresponding to each trigger event, to the server;

[0008] The server reconstructs the DOM structure and trigger events based on the received reported information to restore and record the usage playback video of the target page, and performs program fault backtracking on the target web page based on the usage playback video.

[0009] In an alternative embodiment, the client reports the initial DOM structure snapshot, as well as the DOM structure change information, event information, and event timestamp corresponding to each triggered event to the server, including:

[0010] Identify whether the target page is in an idle state;

[0011] If the target page is not in an idle state, then store the initial DOM structure snapshot, as well as the DOM structure change information, event information, and event timestamp corresponding to each triggered event as information to be reported in JSON format and cache it locally on the client;

[0012] If the target page is in an idle state, then report the information to be reported cached locally on the client to the server.

[0013] In an alternative embodiment, reporting the information to be reported cached locally on the client to the server includes:

[0014] In the case where the target page is unloaded, closed, or crashed, report the information to be reported cached locally on the client to the server by the sendBeacon method; otherwise, query whether the information to be reported cached locally on the client exceeds a preset data volume;

[0015] If the information to be reported exceeds the preset data volume, then report the information to be reported cached locally on the client to the server by the post method;

[0016] If the information to be reported does not exceed the preset data volume, then report the information to be reported cached locally on the client to the server by the img.src method.

[0017] In an alternative embodiment, when the client monitors a triggered event on the target page, recording the DOM structure change information, event information, and event timestamp generated by the triggered event includes:

[0018] When the client monitors a triggered event on the target page, calculate the time interval between the event timestamp of the previous triggered event and the event timestamp of the current triggered event;

[0019] If the time interval is within the time of one frame of the browser, then in the case where the content of the current triggered event is the same as that of the previous triggered event, ignore the current triggered event, and in the case where the content of the current triggered event is different from that of the previous triggered event, determine that the current triggered event and the previous triggered event are consecutive events, merge the current triggered event and the previous triggered event into one event, and update the DOM structure change information and event information corresponding to the previous triggered event based on the current triggered event;

[0020] If the time interval is not within the events of one frame of the browser, record the DOM structure change information, event information, and event timestamp generated by the trigger event.

[0021] In an alternative embodiment, before recording the DOM structure change information, event information, and event timestamp generated by the trigger event, the method further includes:

[0022] Identify whether the event information contains sensitive information, and when sensitive information is included, perform character encryption or replacement on the sensitive information in the event information to achieve desensitization processing of the event information.

[0023] In an alternative embodiment, the server reconstructs the DOM structure and trigger events based on the received reported information to restore and record the usage playback video of the target page, including:

[0024] Load the reported information of the client, traverse the event information in the reported information, and determine the maximum width and maximum height of the target page;

[0025] Create a headless browser instance, set the browser window size of the headless browser instance based on the maximum width and the maximum height, and set the video save directory;

[0026] Based on the initial DOM structure information in the reported information, load the HTML content in the headless browser instance, and through the browser callback function, based on the event timestamp in the reported information, reconstruct the DOM structure and trigger events for the event information, and record the reconstruction process to obtain the usage playback video of the target page;

[0027] After the recording ends, save the usage playback video in the video save directory.

[0028] In an alternative embodiment, the recording the reconstruction process to obtain the usage playback video of the target page includes:

[0029] Record the reconstruction process, and mark the corresponding trigger event according to the reconstruction progress during the recording process to obtain a usage playback video with trigger event marks;

[0030] After saving the usage playback video in the video save directory, the method further includes:

[0031] In response to a video backtracking instruction, read the target usage playback video indicated by the video backtracking instruction in the video save directory;

[0032] Play the target usage playback video and synchronously display the corresponding trigger event markers during the playback process.

[0033] According to another aspect of the present application, there is provided a program fault backtracking device based on web page monitoring, the device comprising:

[0034] A page monitoring module, configured to create an initial DOM structure snapshot of a target page in response to an access signal to the target page by a client, and monitor trigger events of the target page;

[0035] An event recording module, configured to record DOM structure change information, event information, and event timestamps generated by the trigger event when the client monitors the trigger event on the target page;

[0036] A reporting module, configured to report the initial DOM structure snapshot, and DOM structure change information, event information, and event timestamps corresponding to each trigger event by the client to a server;

[0037] A video generation module, configured to reconstruct the DOM structure and trigger events by the server based on the received reporting information to restore and record a usage playback video of the target page, so as to perform program fault backtracking on the target web page based on the usage playback video.

[0038] In an optional implementation manner, the reporting module is further configured to:

[0039] Identify whether the target page is in an idle state;

[0040] If the target page is not in an idle state, store the initial DOM structure snapshot, and DOM structure change information, event information, and event timestamps corresponding to each trigger event as to-be-reported information in JSON format, and cache it locally on the client;

[0041] If the target page is in an idle state, report the to-be-reported information cached locally on the client to the server.

[0042] In an optional implementation manner, the reporting module is further configured to:

[0043] In the case where the target page is unloaded, closed, or crashed, report the to-be-reported information cached locally on the client to the server by means of sendBeacon, otherwise query whether the to-be-reported information cached locally on the client exceeds a preset data volume;

[0044] If the to-be-reported information exceeds the preset data volume, report the to-be-reported information cached locally on the client to the server by means of post;

[0045] If the information to be reported does not exceed the preset data volume, report the information to be reported cached locally on the client to the server by means of img.src.

[0046] In an alternative embodiment, the event recording module is further configured to:

[0047] When the client detects a trigger event on the target page, calculate the time interval between the event timestamp of the previous trigger event and the event timestamp of the current trigger event;

[0048] If the time interval is within the time of one frame of the browser, when the content of the current trigger event is the same as that of the previous trigger event, ignore the current trigger event, and when the content of the current trigger event is different from that of the previous trigger event, determine that the current trigger event and the previous trigger event are consecutive events, merge the current trigger event and the previous trigger event into one event, and update the DOM structure change information and event information corresponding to the previous trigger event based on the current trigger event;

[0049] If the time interval is not within the event of one frame of the browser, record the DOM structure change information, event information and event timestamp generated by the trigger event.

[0050] In an alternative embodiment, the event recording module is further configured to:

[0051] Identify whether the event information contains sensitive information, and when sensitive information is included, encrypt or replace the sensitive information in the event information to implement desensitization processing of the event information.

[0052] In an alternative embodiment, the video generation module is further configured to:

[0053] Load the reported information of the client, traverse the event information in the reported information, and determine the maximum width and maximum height of the target page;

[0054] Create a headless browser instance, set the browser window size of the headless browser instance based on the maximum width and the maximum height, and set the video save directory;

[0055] Based on the initial DOM structure information in the reported information, load the HTML content in the headless browser instance, and through the browser callback function, reconstruct the DOM structure and trigger events for the event information based on the event timestamp in the reported information, and record the reconstruction process to obtain the usage playback video of the target page;

[0056] After the recording is completed, save the usage playback video in the video save directory.

[0057] In an alternative embodiment, the video generation module is further configured to:

[0058] Record the reconstruction process, and mark the corresponding trigger event according to the reconstruction progress during the recording process to obtain a usage playback video with trigger event marks;

[0059] The apparatus further includes: a video backtracking module, configured to:

[0060] In response to a video backtracking instruction, read the target usage playback video indicated by the video backtracking instruction in the video storage directory;

[0061] Play the target usage playback video, and synchronously display the corresponding trigger event marks during the playing process.

[0062] According to another aspect of the present application, there is provided a storage medium, on which a computer program is stored, and when the program is executed by a processor, the above-mentioned program fault backtracking method based on web page monitoring is implemented.

[0063] According to still another aspect of the present application, there is provided a computer device, including a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor. When the processor executes the program, the above-mentioned program fault backtracking method based on web page monitoring is implemented.

[0064] By means of the above technical solutions, a program fault backtracking method, apparatus, storage medium and computer device based on web page monitoring provided by an embodiment of the present application. The client creates an initial DOM structure snapshot of the target page in response to an access signal to the target page, and monitors the trigger events of the target page; when the client monitors a trigger event on the target page, it records the DOM structure change information, event information, and event timestamp generated by the trigger event; the client reports the initial DOM structure snapshot, as well as the DOM structure change information, event information, and event timestamp corresponding to each trigger event, to the server; the server reconstructs the DOM structure and trigger events based on the received reported information to restore and record the usage playback video of the target page, so as to perform program fault backtracking on the target web page based on the usage playback video. The present application comprehensively records DOM structure changes, event information, and timestamps, so that the server-side reconstructs the DOM structure and trigger events to record the usage playback video, which can accurately restore every operation of the user on the web page. Developers can intuitively view the problem reproduction process, thereby helping developers accurately find the problem and shortening the problem-solving time. And compared with front-end screen recording and other solutions, these data are more efficient in storage and transmission because they only contain the necessary DOM structure changes and event information, rather than the video content of the entire page.

[0065] The above description is only an overview of the technical solution of this application. In order to understand the technical means of this application more clearly, it can be implemented according to the content of the specification. And in order to make the above and other purposes, features and advantages of this application more obvious and understandable, the following specifically gives the specific implementation manners of this application. BRIEF DESCRIPTION OF THE DRAWINGS

[0066] The drawings described herein are used to provide a further understanding of this application and constitute a part of this application. The schematic embodiments of this application and their descriptions are used to explain this application and do not constitute an improper limitation to this application. In the drawings:

[0067] Figure 1 shows a schematic flowchart of a program fault backtracking method based on web page monitoring provided by an embodiment of this application;

[0068] Figure 2 shows a schematic flowchart of another program fault backtracking method based on web page monitoring provided by an embodiment of this application;

[0069] Figure 3 shows a schematic structural diagram of a program fault backtracking device based on web page monitoring provided by an embodiment of this application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0070] The following will refer to the drawings and describe this application in detail with reference to the embodiments. It should be noted that, without conflict, the embodiments in this application and the features in the embodiments can be combined with each other.

[0071] In this embodiment, a program fault backtracking method based on web page monitoring is provided. As Figure 1 shown, the method includes:

[0072] Step 101, the client creates an initial DOM structure snapshot of the target page in response to an access signal to the target page, and monitors trigger events of the target page.

[0073] Step 102, when the client monitors a trigger event on the target page, record DOM structure change information, event information, and event timestamps generated by the trigger event.

[0074] Step 103, the client reports the initial DOM structure snapshot, and DOM structure change information, event information, and event timestamps corresponding to each trigger event to the server.

[0075] Step 104: The server reconstructs the DOM structure and triggers events based on the received reported information to restore and record the usage playback video of the target page, so as to perform program fault backtracking on the target web page based on the usage playback video.

[0076] An embodiment of the present application proposes a program fault backtracking method based on web page monitoring. Through the comprehensive monitoring of the target web page by the client, accurate recording of the DOM structure changes, triggered events and their timestamps during the web page usage process is achieved. Furthermore, through data reconstruction and playback on the server side, accurate backtracking of program faults is realized. The client refers to the user's browser or other client software capable of accessing and rendering web pages. The target page is the web page that the user hopes to access or interact with. After receiving the access signal to the target page, the client first creates an initial DOM structure snapshot of the page. The DOM (Document Object Model) structure is the foundation of the web page, which defines the structure and relationships of all elements in the web page. At the same time, the client starts to listen for various triggered events on the page, such as clicks, inputs, scrolls, etc. Whenever the client monitors a triggered event on the target page, it records the change information of the event on the DOM structure, the detailed information of the event itself (such as event type, triggering element, etc.) and the timestamp of the event, for subsequent reconstruction of the DOM structure and restoration of the web page usage process. Specifically, the MutationObserver API can be used to listen for changes in each attribute of the page nodes, record the changed attributes in the cache, compare with the DOM structure snapshot (existing in the data structure of a json tree), record the different parts from the previous snapshot, and only report the difference between the initial DOM structure and each recorded part, that is, the DOM structure change information, when reporting, reducing the reporting volume. Further, the client reports the initial DOM structure snapshot, the DOM structure change information, event information and event timestamp corresponding to each triggered event to the server for subsequent use. After receiving the reported information, the server uses this information to reconstruct the DOM structure and trigger events, thereby restoring and recording the usage playback video of the target page. By playing this video, developers can intuitively see each step of the user's operations on the web page, and how these operations affect the DOM structure and trigger events, simplifying the process of program fault backtracking and improving the efficiency and accuracy of problem solving.

[0077] By applying the technical solution of this embodiment, by comprehensively recording DOM structure changes, event information, and timestamps, the server-side can reconstruct the DOM structure and trigger events to record and play back videos, enabling precise restoration of every user operation on the web page. Developers can intuitively view the process of problem reproduction, thus helping them accurately locate the problem and shortening the time to solve the problem. Moreover, compared with front-end screen recording and other solutions, this data is more efficient in storage and transmission because it only contains the necessary DOM structure changes and event information, rather than the video content of the entire page.

[0078] Further, as a refinement and extension of the specific implementation manner of the above embodiment, to fully illustrate the specific implementation process of this embodiment, another program fault backtracking method based on web page monitoring is provided. As Figure 2 shown, this method includes:

[0079] Step 201, the client responds to the access signal for the target page, creates an initial DOM structure snapshot of the target page, and listens for trigger events on the target page.

[0080] Step 202, when the client listens for a trigger event on the target page, calculate the time interval between the event timestamp of the previous trigger event and the event timestamp of the current trigger event.

[0081] Step 203, if the time interval is within the time of one frame of the browser, in the case where the content of the current trigger event is the same as that of the previous trigger event, ignore the current trigger event, and in the case where the content of the current trigger event is different from that of the previous trigger event, determine that the current trigger event and the previous trigger event are consecutive events, merge the current trigger event and the previous trigger event into one event, and update the DOM structure change information and event information corresponding to the previous trigger event based on the current trigger event.

[0082] Step 204, if the time interval is not within the time of one frame of the browser, record the DOM structure change information, event information, and event timestamp generated by the trigger event.

[0083] In this embodiment, when the client first loads the target page, a snapshot of the DOM structure of this page is created, and this snapshot is a copy of the DOM state when the page loading is completed. Meanwhile, the client will set up listeners to capture various events (such as clicks, inputs, scrolls, etc.) occurring on the target page. When the client detects an event on the target page, it will record the timestamp of this event. Additionally, it will calculate the time interval between the current event and the previous triggered event. If the time interval between two consecutive events is within the time of one frame of the browser and the content is the same, the client will ignore this event to avoid unnecessary processing. Among them, the time of one frame of the browser usually refers to the time required for the browser to render one frame, which is approximately 16 milliseconds (for a 60Hz refresh rate). And if the content of two consecutive events is different but the time interval is still within the time of one frame of the browser, the client will regard these two events as a continuous event and merge them. Meanwhile, the client will update the DOM structure change information and event information corresponding to the previous triggered event to reflect the impact of this event. And if the time interval between two events exceeds the time of one frame of the browser, then these two events are considered independent. For such independent events, the client will record the generated DOM structure change information, event information, and event timestamp for subsequent processing, analysis, or debugging. Through these steps, the client can more effectively process the events on the target page, reduce unnecessary DOM updates and event processing, thereby improving the performance and response speed of the page.

[0084] In an alternative embodiment, before recording the DOM structure change information, event information, and event timestamp generated by the triggered event, the method further includes: identifying whether the event information contains sensitive information, and when it contains sensitive information, performing character encryption or replacement on the sensitive information in the event information to achieve the desensitization processing of the event information.

[0085] Exemplarily, before recording the DOM structure change information, event information, and event timestamp generated by the trigger event, the client first checks whether any sensitive information is included in this event information. Sensitive information may include, but is not limited to, the user's personal information (such as name, address, phone number), password, payment information, privacy settings, etc. If the system detects that the event information contains sensitive information, it will perform desensitization processing on this sensitive information. The specific method of desensitization processing can be character encryption or replacement. After desensitization processing, record the desensitized event information, as well as the associated DOM structure change information and event timestamp. In this way, subsequent analysis, playback, or reporting processes can be carried out without leaking user privacy. Through desensitization processing, even if the data is improperly obtained, the user's sensitive information will not be leaked, thus effectively protecting the user's privacy and data security. The desensitized data can still be used in scenarios such as analyzing user behavior, debugging page problems, or demonstrating page functions, without being restricted by privacy protection.

[0086] Step 205: Identify whether the target page is in an idle state.

[0087] Step 206: If the target page is not in an idle state, store the initial DOM structure snapshot, as well as the DOM structure change information, event information, and event timestamp corresponding to each trigger event, as the information to be reported in JSON format, and then cache it locally on the client.

[0088] Step 207: If the target page is in an idle state, report the information to be reported cached locally on the client to the server.

[0089] In this embodiment, the idle state refers to the situation where the user has not performed any interaction operations on the target page for a period of time, and there is no ongoing animation or script execution on the page. It can be understood that the user is currently not interacting with the page or has left the page. The client can determine whether the page is in the idle state by monitoring parameters such as user input (e.g., keyboard and mouse activities), the animation frame rate on the page, and the script execution time. If the target page is not in the idle state, it indicates that the user may still be interacting with the page or the page is still performing certain operations. In this case, the client does not immediately report all the previously recorded events and DOM structure change information, but stores this information (including the initial DOM structure snapshot, the DOM structure change information corresponding to each triggered event, event information, and event timestamps) as information to be reported in JSON format. This information to be reported is cached locally on the client for later reporting. The caching mechanism helps reduce the frequency of network transmissions and lower the network load. Once the target page enters the idle state, the client checks whether there is information to be reported in its local cache. If there is, the client reports this information to the server. The server will receive this information and perform subsequent processing (such as storage, analysis, or for fault backtracking). By introducing the idle state detection mechanism, the embodiment of the present application can more effectively manage the data reporting process, avoid network congestion and performance degradation caused by frequent data uploads during user activity. At the same time, this also ensures that all important information can be reported in a timely manner for subsequent analysis and processing.

[0090] In an alternative embodiment, the reporting of the information to be reported cached locally on the client to the server includes: in the case where the target page is unloaded, closed, or crashed, reporting the information to be reported cached locally on the client to the server by the sendBeacon method; otherwise, querying whether the information to be reported cached locally on the client exceeds a preset data volume; if the information to be reported exceeds the preset data volume, reporting the information to be reported cached locally on the client to the server by the post method; if the information to be reported does not exceed the preset data volume, reporting the information to be reported cached locally on the client to the server by the img.src method.

[0091] Exemplarily, when the target page is unloaded, closed, or crashes, these events usually mean that the user has left the page, or the page can no longer be displayed properly. In this case, to ensure that the information to be reported can be uploaded in a timely manner, the sendBeacon method can be used to report the information to be reported cached locally on the client to the server. sendBeacon is a browser API that sends data to the server when the page is unloaded. It can asynchronously send a small amount of data before the page is closed and does not block the page unloading process. If the target page is in a normal state (i.e., not unloaded, closed, or crashed), it is necessary to determine whether the information to be reported cached locally on the client exceeds a preset data volume. If the data volume of the information to be reported exceeds the preset data volume, the post method can be used to report the information to the server. The post method can handle a large amount of data and can send the data as a request body to the server, which is suitable for transmitting a large amount of structured data. If the data volume of the information to be reported does not exceed the preset threshold, the img.src method can be used to report the information to the server. The img.src method is a technique for sending data by modifying the src attribute of an image element. It is usually used to send a small amount of unstructured data and is not restricted by the same-origin policy. By encoding the information to be reported as URL parameters and setting them as the src attribute of the image element, the behavior of the browser loading the image can be used to send the data to the server. By introducing multiple reporting strategies in the embodiments of the present application, it is possible to select an appropriate method to report the information to be reported according to different scenarios and requirements, improving the flexibility and adaptability of reporting. Using the sendBeacon method in the case of an abnormal target page can ensure that the data is uploaded in a timely manner before the page is unloaded; while selecting an appropriate reporting method according to the data volume in the normal state can balance the timeliness of reporting and network load, avoiding unnecessary resource waste.

[0092] Step 208: The server loads the reporting information of the client, traverses the event information in the reporting information, and determines the maximum width and maximum height of the target page; creates a headless browser instance, and sets the browser window size of the headless browser instance based on the maximum width and the maximum height, and sets the video saving directory; based on the initial DOM structure information in the reporting information, loads the HTML content in the headless browser instance, and through the browser callback function, based on the event timestamp in the reporting information, reconstructs the DOM structure and the triggered events of the event information, and records the reconstruction process to obtain the usage playback video of the target page.

[0093] Step 209: After the recording ends, save the usage playback video in the video saving directory.

[0094] In this embodiment, the server loads the initial DOM structure information, all event information, relevant DOM structure change data, and event timestamps reported by the client. It traverses the event information in the reported information, analyzes and records the maximum width and maximum height reached by the target page during user interaction to ensure that the video resolution adapts to the user operation area. It initializes a headless browser instance (for example, starts chromium using playwright). A headless browser is a browser that does not display a graphical user interface and is suitable for automated testing and page rendering. According to the determined maximum width and maximum height, it sets the browser window size of the headless browser instance. It designates a directory for saving the recorded usage playback video. Then, in the headless browser instance, it loads the initial DOM structure information in the reported information, constructs the initial state of the page, and through the callback function provided by the browser (for example, defines a callback within the browser using the exposeFunction method of playwright), gradually reconstructs the DOM structure changes and triggers events according to the order of the event timestamps in the reported information. Using the recording function of the headless browser, it records the entire process of DOM structure and event reconstruction, generates a video file, and shows the dynamic changes of the target page under user interaction. When all events are reconstructed in the order of the timestamps in the reported information and the recording process is completed, the generated usage playback video file is saved to the designated video saving directory. Through this step, the interaction process between the user and the target page can be recorded in the form of a video, so that web developers can subsequently analyze user behavior, debug page problems, or demonstrate page functions, etc.

[0095] In an alternative embodiment, obtaining the usage playback video of the target page in the recording and reconstruction process includes: recording the reconstruction process and marking the corresponding triggered events according to the reconstruction progress during the recording process to obtain a usage playback video with triggered event marks;

[0096] After saving the usage playback video in the video saving directory, the method further includes: in response to a video backtracking instruction, reading the target usage playback video indicated by the video backtracking instruction in the video saving directory; playing the target usage playback video and synchronously displaying the corresponding triggered event marks during the playing process.

[0097] Exemplarily, in a headless browser, according to the initial DOM structure information and event information in the reported information, gradually reconstruct the usage scenario of the target page, and record this reconstruction process. During the recording process, according to the reconstruction progress and the event timestamps in the reported information, mark the corresponding triggering events. These marks can be in the form of timestamps in the video, highlighted areas, text prompts, etc., used to indicate which user interaction events occurred at what time and where. After recording and marking, a usage playback video with triggering event marks can be obtained. This video not only shows the dynamic changes of the page but also clearly marks the key points of user interaction. When it is necessary to trace back the usage scenario of a specific time period or a specific event, the target usage playback video can be specified through a video traceback instruction, and the system will read this video in the video save directory. Further, during the playback of the target usage playback video, the system will synchronously display the corresponding triggering event marks. Users can not only watch the dynamic changes of the page but also intuitively see which user interaction events occurred at what time and where. By marking the triggering events in the embodiments of the present application, the playback video can be made more intuitive and easier to understand. For developers, the playback video with triggering event marks can help them quickly locate problems, understand user behavior, and optimize page performance.

[0098] Further, as Figure 1 a specific implementation of the method, the embodiments of the present application provide a program fault traceback device based on web page monitoring, as Figure 3 shown, the device includes:

[0099] A page monitoring module, configured to create an initial DOM structure snapshot of the target page when the client responds to an access signal to the target page, and monitor the triggering events of the target page;

[0100] An event recording module, configured to record the DOM structure change information, event information, and event timestamp generated by the triggering event when the client monitors the triggering event on the target page;

[0101] A reporting module, configured to report the initial DOM structure snapshot, and the DOM structure change information, event information, and event timestamp corresponding to each triggering event by the client to the server;

[0102] A video generation module, configured to reconstruct the DOM structure and triggering events by the server based on the received reported information to restore and record the usage playback video of the target page, so as to perform program fault traceback on the target web page based on the usage playback video.

[0103] In an alternative implementation, the reporting module is further configured to:

[0104] Identify whether the target page is in an idle state;

[0105] If the target page is not in an idle state, store the initial DOM structure snapshot, the DOM structure change information, event information, and event timestamp corresponding to each triggered event as information to be reported in JSON format, and then cache it locally on the client;

[0106] If the target page is in an idle state, report the information to be reported cached locally on the client to the server.

[0107] In an alternative embodiment, the reporting module is further configured to:

[0108] In the case where the target page is unloaded, closed, or crashed, report the information to be reported cached locally on the client to the server by the sendBeacon method, otherwise query whether the information to be reported cached locally on the client exceeds a preset data volume;

[0109] If the information to be reported exceeds the preset data volume, report the information to be reported cached locally on the client to the server by the post method;

[0110] If the information to be reported does not exceed the preset data volume, report the information to be reported cached locally on the client to the server by the img.src method.

[0111] In an alternative embodiment, the event recording module is further configured to:

[0112] When the client monitors a triggered event on the target page, calculate the time interval between the event timestamp of the previous triggered event and the event timestamp of the current triggered event;

[0113] If the time interval is within the time of one frame of the browser, in the case where the content of the current triggered event is the same as that of the previous triggered event, ignore the current triggered event, and in the case where the content of the current triggered event is different from that of the previous triggered event, determine that the current triggered event and the previous triggered event are consecutive events, merge the current triggered event and the previous triggered event into one event, and update the DOM structure change information and event information corresponding to the previous triggered event based on the current triggered event;

[0114] If the time interval is not within the event of one frame of the browser, record the DOM structure change information, event information, and event timestamp generated by the triggered event.

[0115] In an alternative embodiment, the event recording module is further configured to:

[0116] Identify whether the event information contains sensitive information, and when sensitive information is included, encrypt or replace the sensitive information in the event information to implement desensitization processing of the event information.

[0117] In an alternative embodiment, the video generation module is further configured to:

[0118] Load the reported information of the client, traverse the event information in the reported information, and determine the maximum width and maximum height of the target page;

[0119] Create a headless browser instance, set the browser window size of the headless browser instance based on the maximum width and the maximum height, and set the video saving directory;

[0120] Based on the initial DOM structure information in the reported information, load the HTML content in the headless browser instance, and through the browser callback function, reconstruct the DOM structure and trigger events of the event information based on the event timestamp in the reported information, and record the reconstruction process to obtain the usage playback video of the target page;

[0121] After the recording ends, save the usage playback video in the video saving directory.

[0122] In an alternative embodiment, the video generation module is further configured to:

[0123] Record the reconstruction process, and mark the corresponding trigger events according to the reconstruction progress during the recording process to obtain a usage playback video with trigger event marks;

[0124] The device further includes: a video backtracking module, configured to:

[0125] In response to a video backtracking instruction, read the target usage playback video indicated by the video backtracking instruction in the video saving directory;

[0126] Play the target usage playback video, and synchronously display the corresponding trigger event marks during the playback process.

[0127] It should be noted that for other corresponding descriptions of each functional unit involved in a program fault backtracking device based on web page monitoring provided in the embodiments of the present application, reference can be made to Figures 1 to 2 The corresponding description in the method, which will not be elaborated here.

[0128] The embodiments of the present application also provide a computer device, which may specifically be a personal computer, a server, a network device, etc. The computer device includes a bus, a processor, a memory, and a communication interface, and may further include an input / output interface and a display device. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store location information. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, the steps in the method embodiments are implemented.

[0129] Those skilled in the art can understand that the structure of the above computer device is only a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components, or combine certain components, or have different component arrangements.

[0130] In one embodiment, a computer-readable storage medium is provided. The computer-readable storage medium may be non-volatile or volatile, and has a computer program stored thereon. When the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0131] In one embodiment, a computer program product is provided, including a computer program. When the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0132] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in the present application are all information and data that have been authorized by the user or fully authorized by all parties.

[0133] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, database, or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memories. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc. The databases involved in the embodiments provided in the present application can include at least one of relational databases and non-relational databases. Non-relational databases can include distributed databases based on blockchain, etc., without limitation. The processors involved in the embodiments provided in the present application can be general-purpose processors, graphics processors, digital signal processors, programmable logic devices, data processing logics based on quantum computing, etc., without limitation.

[0134] The technical features of the above embodiments can be combined arbitrarily. For the sake of concise description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope described in this specification.

[0135] The above-described embodiments merely represent several implementation manners of the present application. The description is relatively specific and detailed, but it should not be construed as a limitation on the patent scope of the present application. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the appended claims.

Claims

1. A program fault backtracking method based on web page monitoring, characterized in that: The method comprises: The client creates an initial DOM structure snapshot of the target page in response to an access signal to the target page, and monitors trigger events of the target page; When the client monitors the trigger event on the target page, the DOM structure change information, event information and event timestamp generated by the trigger event are recorded; The client reports the initial DOM structure snapshot, as well as DOM structure change information, event information and event timestamp corresponding to each triggering event to the server; The server rebuilds the DOM structure and triggers events based on the received reporting information to restore and record the usage playback video of the target page, so as to perform program fault backtracing on the target web page based on the usage playback video.

2. The method according to claim 1, characterized in that The client reports the initial DOM structure snapshot, as well as the DOM structure change information, event information and event timestamp corresponding to each triggering event to the server, including: Identify whether the target page is in an idle state; If the target page is not in an idle state, the initial DOM structure snapshot, as well as the DOM structure change information, event information and event timestamp corresponding to each triggering event are stored as information to be reported in JOSN format and cached locally on the client; If the target page is in an idle state, the information to be reported that is cached locally on the client is reported to the server.

3. The method according to claim 2, characterized in that The step of reporting the information to be reported cached locally on the client to the server includes: When the target page is uninstalled, closed or crashed, the information to be reported cached locally on the client is reported to the server by sendBeacon, otherwise the information to be reported locally on the client is checked to see if it exceeds a preset data volume; If the information to be reported exceeds the preset data volume, the information to be reported cached locally on the client is reported to the server via a post method; If the information to be reported does not exceed the preset data volume, the information to be reported cached locally on the client is reported to the server through the img.src method.

4. The method according to claim 1, characterized in that: When the client monitors the trigger event on the target page, the DOM structure change information, event information and event timestamp generated by the trigger event are recorded, including: When the client monitors the trigger event on the target page, the time interval between the event timestamp of the last trigger event and the event timestamp of the current trigger event is calculated; If the time interval is within the time of one frame of the browser, then if the content of this trigger event is the same as that of the previous trigger event, ignore this trigger event; if the content of this trigger event is different from that of the previous trigger event, determine that the current trigger event and the previous trigger event are continuous events, merge the current trigger event and the previous trigger event into one event, and update the DOM structure change information and event information corresponding to the previous trigger event based on this trigger event; If the time interval is not within the event of one frame of the browser, the DOM structure change information, event information and event timestamp generated by the triggering event are recorded.

5. The method according to claim 1, characterized in that Before recording the DOM structure change information, event information and event timestamp generated by the triggering event, the method further includes: Identify whether the event information contains sensitive information, and if so, encrypt or replace characters of the sensitive information in the event information to achieve desensitization processing of the event information.

6. The method according to any one of claims 1 to 5, characterized in that The server rebuilds the DOM structure and triggers events based on the received reporting information to restore and record the playback video of the target page, including: Loading the reported information of the client, traversing the event information in the reported information, and determining the maximum width and maximum height of the target page; Create a headless browser instance, and set a browser window size of the headless browser instance based on the maximum width and the maximum height, and set a video saving directory; Based on the initial DOM structure information in the reported information, HTML content is loaded in the headless browser instance, and through the browser callback function, based on the event timestamp in the reported information, the DOM structure and triggering event of the event information are reconstructed, and the reconstruction process is recorded to obtain the usage playback video of the target page; After recording is completed, the playback video is saved in the video saving directory.

7. The method according to claim 6, characterized in that The recording and reconstruction process obtains the usage playback video of the target page, including: Recording the reconstruction process, and obtaining a playback video with a trigger event mark according to the trigger event corresponding to the reconstruction progress mark during the recording process; After saving the playback video in the video storage directory, the method further includes: In response to the video retracing instruction, reading the target use playback video indicated by the video retracing instruction in the video storage directory; Play the target video using the playback video, and synchronously display the corresponding trigger event mark during the playback process.

8. A program fault backtracking device based on web page monitoring, characterized in that: The device comprises: A page monitoring module, used for the client to respond to the access signal of the target page, create an initial DOM structure snapshot of the target page, and monitor the triggering event of the target page; An event recording module, used for recording DOM structure change information, event information and event timestamp generated by the triggering event when the client monitors the triggering event on the target page; A reporting module, used for the client to report the initial DOM structure snapshot, as well as DOM structure change information, event information and event timestamp corresponding to each triggering event to the server; The video generation module is used for the server to rebuild the DOM structure and trigger events based on the received reporting information to restore and record the usage playback video of the target page, so as to perform program fault backtracing on the target web page based on the usage playback video.

9. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. A computer device comprising a storage medium, a processor, and a computer program stored in the storage medium and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

Images