CN112256524A - Web front-end monitoring method and system based on screen recording playback - Google Patents

Web front-end monitoring method and system based on screen recording playback Download PDF

Info

Publication number
CN112256524A
CN112256524A CN202011032088.7A CN202011032088A CN112256524A CN 112256524 A CN112256524 A CN 112256524A CN 202011032088 A CN202011032088 A CN 202011032088A CN 112256524 A CN112256524 A CN 112256524A
Authority
CN
China
Prior art keywords
page
dom
background
playing
monitoring method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011032088.7A
Other languages
Chinese (zh)
Inventor
钟正阳
殷燃
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hunan Yingke Mutual Entertainment Network Information Co ltd
Original Assignee
Hunan Yingke Mutual Entertainment Network Information Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hunan Yingke Mutual Entertainment Network Information Co ltd filed Critical Hunan Yingke Mutual Entertainment Network Information Co ltd
Priority to CN202011032088.7A priority Critical patent/CN112256524A/en
Publication of CN112256524A publication Critical patent/CN112256524A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/30Monitoring
    • G06F11/3003Monitoring arrangements specially adapted to the computing system or computing system component being monitored
    • G06F11/302Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/30Monitoring
    • G06F11/34Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
    • G06F11/3466Performance evaluation by tracing or monitoring
    • G06F11/3476Data logging
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/30Monitoring
    • G06F11/34Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
    • G06F11/3466Performance evaluation by tracing or monitoring
    • G06F11/3495Performance evaluation by tracing or monitoring for systems
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10File systems; File servers
    • G06F16/11File system administration, e.g. details of archiving or snapshots
    • G06F16/128Details of file system snapshots on the file-level, e.g. snapshot creation, administration, deletion
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/433Content storage operation, e.g. storage operation in response to a pause request, caching operations
    • H04N21/4334Recording operations
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/472End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/47217End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for controlling playback functions for recorded or on-demand content, e.g. using progress bars, mode or play-point indicators or bookmarks

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Quality & Reliability (AREA)
  • Computer Hardware Design (AREA)
  • Signal Processing (AREA)
  • Multimedia (AREA)
  • Databases & Information Systems (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Mathematical Physics (AREA)
  • Debugging And Monitoring (AREA)

Abstract

The invention provides a web front end monitoring method based on screen recording playback, which comprises the following steps: the page information is obtained by recording the screen of the front end, the page information in a period of time before the problem occurs is sent to the background, and the background restores the page information and plays the page information in a video mode. A web front-end monitoring system based on screen recording playback is also provided. The monitoring method and the monitoring system can more intuitively reflect the behavior operation of the client, do not need a user to upload wrong screenshots or screen recordings, reduce feedback links, reduce communication cost and improve solution efficiency.

Description

Web front-end monitoring method and system based on screen recording playback
Technical Field
The invention relates to the technical field of networks, in particular to a web front-end monitoring method and a web front-end monitoring system.
Background
The front-end application has too many uncontrollable complex factors in the aspect of operating environment, and a relatively stable operating environment is not provided to ensure that a project cannot go wrong. Even though the self-test is sufficient, under the complex running environment and operation of different users, the problem unexpected by developers is inevitable. The key is that the link for solving the project problem by feedback is too long, information is not equal and is insufficient, the problem solving takes longer time, and the problem solving has a large negative effect on the project at the front end of the web.
For the service pain point, the method in the industry is to access some monitoring systems, and many monitoring systems on the market are provided, but basically all charge is charged, and almost only the charging is stopped on wrong text information, and specific operation and behavior of a client cannot be completely mastered. The front-end application is almost black box operation when specific operation and behavior occur at the client, the scene when the user encounters an error cannot be known, and the positioning problem is slow.
Disclosure of Invention
The invention aims to provide a method and a system for monitoring a front end of a web (webpage) capable of quickly knowing a page fault state.
The invention provides a web front end monitoring method based on screen recording playback, which comprises the following steps: the page information is obtained by recording the screen of the front end, the page information in a period of time before the problem occurs is sent to the background, and the background restores the page information and plays the page information in a video mode.
Further, the monitoring method comprises the following steps: a snapshot generation step of storing DOM (standard model used for representing objects in a document in a webpage) of a page at intervals and generating snapshots; a data conversion step, namely generating a serialized array from the change of the DOM to form quantitative data; a problem feedback step, when an error occurs, uploading quantitative data in a period of time before the problem occurs to a background; and a restoring and playing step, wherein the background restores the obtained data into a video in a time stamp mode and plays the video.
Further, the snapshot generating step includes: traversing from the top layer to the bottom layer in sequence, and storing as tree-structured objects:
1) converting the style into an inline form;
2) script (reference script) tags are converted to noscripts (elements are used to define alternate content when the script is not executed), preventing execution;
3) relative paths in href (link current page), SRC (source file), CSS (cascading style sheet) are set as absolute paths;
4) each Node (end point of network connection) Node is provided with a unique ID (identification number).
Further, the data conversion step includes: the changed DOM is generated into a snapshot, a timestamp is recorded, the DOM is finally recorded into a large array, each item is data of each frame of page change, and actions such as click events or mouse movement and the like are recorded independently.
Further, the question feedback step includes: the page information is obtained by recording the screen of the front end, and quantitative data of the page information in a period of time before the problem occurs is sent to the background so as to monitor page change in a period of time before the problem occurs.
Further, the restoring and playing step includes: according to the quantitative data fed back by the problem feedback step, a DOM and a corresponding CSS are created and placed in an iframe (floating frame) as a player, the change of the DOM is restored by the background one second by one second according to the time stamp, and the DOM player is provided with a progress bar and a speed doubling control, so that the frame and the speed to be seen at the moment can be adjusted through the time stamp in the data.
The invention also provides a web front-end monitoring system based on screen recording playback, which is characterized in that the monitoring system acquires page information by recording the screen of the front end, sends the page information within a period of time before the problem occurs to the background, and the background restores the page information and plays the page information in a video mode.
Further, the monitoring system comprises: the snapshot generating module is used for storing the DOM of the page at intervals and generating snapshots; the data conversion module is used for recording the front-end page operation information, converting the front-end page operation information into quantitative data with time stamps together with the page snapshot and recording the quantitative data; the problem feedback module is used for uploading the quantitative data in a period of time before the problem occurs to a background when the page has the problem; and the restoring and playing module is used for restoring the obtained data into a video in a timestamp mode in the background and playing the video.
Further, the snapshot generating module is configured to sequentially traverse the Dom of the page from the top layer to the bottom layer, store the Dom as an object in a tree structure, and perform the following operations:
1) converting the style into an inline form;
2) script tag is converted into noscript to prevent execution;
3) relative paths in href, SRC and CSS are set as absolute paths;
4) each Node is provided with a unique ID.
Further, the restoration playing module is configured to create a DOM and a corresponding CSS according to the quantitative data fed back in the question feedback step, and play the DOM and the corresponding CSS in an iframe.
Further, the playing back the restored playing module in the iframe includes: and restoring the DOM change by seconds according to the time stamp, and adjusting the frame and the speed to be seen at the moment by using the time stamp in the data by using the progress bar and the speed doubling control.
The web front-end monitoring method and system based on screen recording playback can more intuitively reflect the behavior operation of the client, so that rear-end monitoring personnel can quickly know the page error state without uploading error screenshots or screen recording by a user, feedback links are reduced, communication cost is reduced, and solution efficiency is improved.
Drawings
Fig. 1 is a schematic diagram illustrating delivery of page information in a web front-end monitoring method and system based on screen recording playback according to an embodiment of the present invention.
Detailed Description
The following detailed description of embodiments of the present invention is provided in connection with the accompanying drawings and examples. The following examples are intended to illustrate the invention but are not intended to limit the scope of the invention.
The invention provides a web front end monitoring method based on screen recording playback, which comprises the following steps: the page information is obtained by recording the screen of the front end, the page information in a period of time before the problem occurs is sent to the background, and the background restores the page information and plays the page information in a video mode.
In this embodiment, the monitoring method includes: a snapshot generation step of storing DOM of the page at intervals and generating snapshots; a data conversion step, namely generating a serialized array from the change of the DOM to form quantitative data; a problem feedback step, when an error occurs, uploading quantitative data in a period of time before the problem occurs to a background; and a restoring and playing step, wherein the background restores the obtained data into a video in a time stamp mode and plays the video.
In this embodiment, the snapshot generating step includes: traversing from the top layer to the bottom layer in sequence, and storing as tree-structured objects:
1) converting the style into an inline form;
2) script tag is converted into noscript to prevent execution;
3) relative path setting in href, SRC, CSS is absolute path
4) Each Node is provided with a unique ID.
The data conversion step comprises: the change of the DOM is monitored by using the MutationObserver API, the changed DOM is generated into a snapshot, a timestamp is recorded, the snapshot is finally recorded into a large array, each item is data of each frame of the page change, and simultaneously, actions such as a click event or mouse movement and the like are recorded independently (as shown in fig. 1).
The question feedback step comprises: the page information is obtained by recording the screen of the front end, and quantitative data of the page information in a period of time before the problem occurs is sent to the background so as to monitor page change in a period of time before the problem occurs.
The restoring and playing step comprises the following steps: and according to the quantitative data fed back in the problem feedback step, creating a DOM (document object model) and a corresponding CSS (cascading style sheet), putting the DOM and the corresponding CSS in an iframe as a player, restoring the change of the DOM by the background second according to a time stamp, and adjusting the frame and the speed to be seen at the moment through the time stamp in the data.
The invention provides a web front-end monitoring system based on screen recording playback, wherein the monitoring system acquires page information by recording a screen at a front end, transmits the page information within a period of time before a problem occurs to a background, and the background restores the page information and plays the page information in a video mode.
In this embodiment, the monitoring system includes the following modules: the snapshot generating module is used for storing the DOM of the page at intervals and generating snapshots; the data conversion module is used for recording the front-end page operation information, converting the front-end page operation information into quantitative data with time stamps together with the page snapshot and recording the quantitative data; the problem feedback module is used for uploading the quantitative data in a period of time before the problem occurs to a background when the page has the problem; and the restoring and playing module is used for restoring the obtained data into a video in a timestamp mode in the background and playing the video.
In this embodiment, the monitoring system includes: the snapshot generating module is used for traversing the Dom of the page from the top layer to the bottom layer in sequence, storing the Dom as an object with a tree structure, and performing the following operations:
1) converting the style into an inline form;
2) script tag is converted into noscript to prevent execution;
3) relative paths in href, SRC and CSS are set as absolute paths;
4) each Node is provided with a unique ID.
In this embodiment, the monitoring system includes: and the restoration playing module is used for creating the DOM and the corresponding CSS according to the quantitative data fed back in the problem feedback step, and playing the DOM and the corresponding CSS in the iframe.
In this embodiment, the monitoring system includes: the restoring and playing module is placed in the iframe for playing and comprises the following steps: according to the time stamp, the DOM change is restored one by one, and the frame and the speed to be seen at the moment can be adjusted through the time stamp in the data by utilizing the progress bar and the speed doubling control
In summary, the web front-end monitoring system based on screen recording playback stores the DOM of the page in a tree-shaped data structure, generates a "snapshot", stores information including tagName, class, ID, CSS style, and the like, but does not execute any JS. And then generating a serialized array by recording the change of the DOM, mouse events and touch click events. When an error occurs, the latest quantitative data is uploaded to the background. And the background creates a DOM and a corresponding CSS according to the latest quantitative data, plays the DOM and the corresponding CSS in the iframe, and continuously restores the recorded view change along the timestamp, so that the screen recording function is achieved, and the user experience is improved.
In conclusion, the monitoring background can restore and know the specific scenes met by the user, manual screen recording of butt joint personnel is not needed, or the scene of the problem is described in text, the data volume is extremely small, page performance is not affected, and user experience is further improved.
As used herein, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, including not only those elements listed, but also other elements not expressly listed.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.

Claims (10)

1. A web front-end monitoring method based on screen recording playback is characterized in that the monitoring method obtains page information by recording a screen at a front end, the page information in a period of time before a problem occurs is sent to a background, and the background restores the page information and plays the page information in a video mode.
2. The monitoring method of claim 1, comprising: a snapshot generation step of storing DOM of the page at intervals and generating snapshots; a data conversion step, recording front-end page operation information, converting the front-end page operation information into quantitative data with a time stamp together with the page snapshot and recording the quantitative data; a problem feedback step, when a problem occurs in the page, uploading the quantitative data in a period of time before the problem occurs to a background; and a restoring and playing step, namely restoring the obtained data into a video in a form of a time stamp in the background and playing the video.
3. The monitoring method of claim 2, wherein the snapshot generating step comprises: traversing the DOM of the page from the top layer to the bottom layer in sequence, storing the DOM as an object of a tree structure, and performing the following operations:
1) converting the style into an inline form;
2) script tag is converted into noscript to prevent execution;
3) relative paths in href, SRC and CSS are set as absolute paths;
4) each Node is provided with a unique ID.
4. The monitoring method of claim 2, wherein the restoring and playing step comprises: and according to the quantitative data fed back in the problem feedback step, creating a DOM and a corresponding CSS, and playing the DOM and the corresponding CSS in the iframe.
5. The monitoring method of claim 4, wherein the playing in the iframe comprises: and restoring the DOM change by seconds according to the time stamp, and adjusting the frame and the speed to be seen at the moment by using the time stamp in the data by using the progress bar and the speed doubling control.
6. A web front-end monitoring system based on screen recording playback is characterized in that the monitoring system obtains page information by recording a screen on a front end, sends the page information within a period of time before a problem occurs to a background, and the background restores the page information and plays the page information in a video mode.
7. The monitoring system of claim 6, comprising: the snapshot generating module is used for storing the DOM of the page at intervals and generating snapshots; the data conversion module is used for recording the front-end page operation information, converting the front-end page operation information into quantitative data with time stamps together with the page snapshot and recording the quantitative data; the problem feedback module is used for uploading the quantitative data in a period of time before the problem occurs to a background when the page has the problem; and the restoring and playing module is used for restoring the obtained data into a video in a timestamp mode in the background and playing the video.
8. The monitoring system of claim 7, wherein the snapshot generating module is configured to traverse the doms of the pages sequentially from top to bottom, store the objects as tree-structured objects, and perform the following operations:
1) converting the style into an inline form;
2) script tag is converted into noscript to prevent execution;
3) relative paths in href, SRC and CSS are set as absolute paths;
4) each Node is provided with a unique ID.
9. The monitoring method of claim 7, wherein the restoration playing module is configured to create a DOM and a corresponding CSS according to the quantitative data fed back by the question feedback step, and play the DOM and the corresponding CSS in an iframe.
10. The monitoring method of claim 9, wherein the playing back the restore playback module in the iframe comprises: and restoring the DOM change by seconds according to the time stamp, and adjusting the frame and the speed to be seen at the moment by using the time stamp in the data by using the progress bar and the speed doubling control.
CN202011032088.7A 2020-09-27 2020-09-27 Web front-end monitoring method and system based on screen recording playback Pending CN112256524A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011032088.7A CN112256524A (en) 2020-09-27 2020-09-27 Web front-end monitoring method and system based on screen recording playback

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011032088.7A CN112256524A (en) 2020-09-27 2020-09-27 Web front-end monitoring method and system based on screen recording playback

Publications (1)

Publication Number Publication Date
CN112256524A true CN112256524A (en) 2021-01-22

Family

ID=74234333

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011032088.7A Pending CN112256524A (en) 2020-09-27 2020-09-27 Web front-end monitoring method and system based on screen recording playback

Country Status (1)

Country Link
CN (1) CN112256524A (en)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113613063A (en) * 2021-07-16 2021-11-05 深圳市明源云科技有限公司 Application exception recovery method, device, computer program product and storage medium
CN116756053A (en) * 2023-08-22 2023-09-15 青岛民航凯亚系统集成有限公司 Front-end project test problem reporting distribution method and system based on screen recording playback
US20230325270A1 (en) * 2022-04-11 2023-10-12 Capital One Services, Llc Systems and methods for detecting software errors

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108334429A (en) * 2017-01-19 2018-07-27 阿里巴巴集团控股有限公司 Method, apparatus and system for investigating front end page problem
CN111078519A (en) * 2019-12-13 2020-04-28 杭州安恒信息技术股份有限公司 Method and device for backtracking abnormal monitoring behaviors and electronic equipment
CN111309547A (en) * 2020-01-21 2020-06-19 北京百度网讯科技有限公司 Webpage information acquisition method and device and electronic equipment
CN111443969A (en) * 2020-03-24 2020-07-24 深圳前海微众银行股份有限公司 Method and device for recording webpage
CN111488259A (en) * 2019-01-29 2020-08-04 阿里巴巴集团控股有限公司 Recording method for webpage and playback method for recorded file

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108334429A (en) * 2017-01-19 2018-07-27 阿里巴巴集团控股有限公司 Method, apparatus and system for investigating front end page problem
CN111488259A (en) * 2019-01-29 2020-08-04 阿里巴巴集团控股有限公司 Recording method for webpage and playback method for recorded file
CN111078519A (en) * 2019-12-13 2020-04-28 杭州安恒信息技术股份有限公司 Method and device for backtracking abnormal monitoring behaviors and electronic equipment
CN111309547A (en) * 2020-01-21 2020-06-19 北京百度网讯科技有限公司 Webpage information acquisition method and device and electronic equipment
CN111443969A (en) * 2020-03-24 2020-07-24 深圳前海微众银行股份有限公司 Method and device for recording webpage

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113613063A (en) * 2021-07-16 2021-11-05 深圳市明源云科技有限公司 Application exception recovery method, device, computer program product and storage medium
CN113613063B (en) * 2021-07-16 2023-08-04 深圳市明源云科技有限公司 Application anomaly reduction method, device and storage medium
US20230325270A1 (en) * 2022-04-11 2023-10-12 Capital One Services, Llc Systems and methods for detecting software errors
US11899529B2 (en) * 2022-04-11 2024-02-13 Capital One Services, Llc Systems and methods for detecting software errors
CN116756053A (en) * 2023-08-22 2023-09-15 青岛民航凯亚系统集成有限公司 Front-end project test problem reporting distribution method and system based on screen recording playback

Similar Documents

Publication Publication Date Title
CN112256524A (en) Web front-end monitoring method and system based on screen recording playback
EP2650790B1 (en) Method for remote tracking and replay of user interaction with a webpage
CN111177618B (en) Website construction method, device, equipment and computer readable storage medium
US9154365B1 (en) Replaying events collected from a client computer
CN105550184A (en) Information obtaining method and device
CN105912587A (en) Data acquisition method and system
US7739697B2 (en) System and method for creating web services from an existing web site
CN106897347A (en) A kind of web page display method, Action Events recording method and device
CN111898055A (en) Screen recording and playback method for browser webpage
CN106709069A (en) High-reliability big data logging collection and transmission method
CN105490854A (en) Real-time log collection method and system, and application server cluster
CN111818123A (en) Network front-end remote playback method, device, equipment and storage medium
CN111078519A (en) Method and device for backtracking abnormal monitoring behaviors and electronic equipment
CN106294116A (en) Record and the methods, devices and systems of reproduction process process
Manohar et al. The session capture and replay paradigm for asynchronous collaboration
CN110059269A (en) Page method for tracing, device, electronic equipment and computer readable storage medium
JP4921904B2 (en) Plant disaster drill
CN105589782A (en) User behavior collection method based on browser
CN114398243A (en) Backtracking method and system about user operation track
US20060149771A1 (en) Information processing system and communication retry method
CN111339357A (en) Recommendation method and device based on live user behaviors
CN116739647A (en) Marketing data intelligent analysis method and system
CN106383765A (en) Data monitoring method and apparatus
CN115292636A (en) H5 page recording method, device and equipment and storage medium
CN105099764A (en) Log processing method and log processing device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210122