Front-end monitoring collection method, front-end monitoring playback method and electronic device

Abstract

This application discloses a front-end monitoring data acquisition method, a front-end monitoring playback method, and an electronic device, belonging to the field of computer technology. The front-end monitoring data acquisition method includes: acquiring the target session record corresponding to the current page; the target session record includes a session identifier and multiple historical page records; determining the page number of the current page based on the number of historical page records in the target session record; searching for the previous historical page record corresponding to the current page based on the page number of the current page; if the current page has a corresponding previous historical page record, calculating the time offset of the current page relative to the previous historical page; if the current page does not have a corresponding previous historical page record, setting the time offset to 0; when an event is detected, calculating the global timestamp of the event based on the time offset; and generating a page log based on the session identifier, page number, and global timestamp. This application can improve the efficiency of troubleshooting front-end problems.

Description

Technical Field

[0001] This application belongs to the field of computer technology, and in particular relates to a front-end monitoring and acquisition method, a front-end monitoring playback method, and an electronic device. Background Technology

[0002] In the field of computer technology, to improve application development efficiency and maintainability, a front-end / back-end separation architecture is typically adopted. The front-end handles user interaction and interface display tasks, while the back-end handles business data computation and storage tasks. However, as application complexity and the variety of user devices increase, developers often find it difficult to reproduce problems encountered on the front-end during user interactions with the application. Therefore, it is necessary to continuously monitor user input actions, changes in the state of front-end components, and other events, and generate logs to enable developers to troubleshoot front-end issues based on these logs.

[0003] In related technologies, monitoring is typically performed on a page-by-page basis. Recording begins when a page finishes loading and ends when the page is closed, generating and uploading logs. However, users may interact with multiple pages during the same session, such as refreshing or opening a new tab to navigate to a new page and continue the session. Monitoring only on a page-by-page basis results in a series of scattered logs, each containing only events from the same page. This makes it difficult for developers to reconstruct the complete user session path when troubleshooting front-end issues, severely impacting problem localization and analysis efficiency. Summary of the Invention

[0004] This application aims to address at least one of the technical problems existing in the prior art. To this end, this application proposes a front-end monitoring data acquisition method, a front-end monitoring playback method, and an electronic device to improve the efficiency of troubleshooting front-end problems.

[0005] Firstly, this application provides a front-end monitoring and data collection method, including: Obtain the target session record corresponding to the current page; the target session record includes a session identifier and multiple historical page records; The page number of the current page is determined based on the number of historical page records in the target session record; Based on the page number of the current page, search for the previous historical page record corresponding to the current page. If the current page has a corresponding previous historical page record, calculate the time offset of the current page relative to the previous historical page. If the current page does not have a corresponding previous historical page record, set the time offset to 0. When an event is detected, a global timestamp of the event is calculated based on the time offset. Page logs are generated based on the session identifier, the page sequence number, and the global timestamp.

[0006] The front-end monitoring and data collection method provided in this application enables developers to aggregate logs from different pages in a session by acquiring the target session record corresponding to the current page and aggregating logs from different pages in the session based on the session identifier. By calculating the page sequence number of the current page and the time offset relative to the previous historical page, and calculating the global timestamp of each event based on the time offset, the event timestamps of each page in the same session can be made continuous. As a result, developers can reconstruct the complete user session path based on the page logs, thereby improving the efficiency of front-end problem troubleshooting.

[0007] According to one embodiment of this application, obtaining the target session record corresponding to the current page includes: Search the session record storage space to see if there is a valid session at the current time; If a valid session exists at the current time, the session record of the valid session will be determined as the target session record; If no valid session exists at the current time, create the target session record in the session record storage space.

[0008] In this embodiment, by creating a target session record when no valid session exists at the current time, the failure to obtain the target session record can be reduced.

[0009] According to one embodiment of this application, creating a target session record in the session record storage space includes: If at least one of cross-domain redirection or direct access is detected, a breakpoint marker is generated; the previous historical session record is retrieved from the session record storage space, and the session identifier of the previous historical session record is used as the reference session identifier; a session record is created, and the breakpoint marker and the reference session identifier are written into the session record to obtain the target session record; And / or, if storage space failure is detected, a storage failure flag is generated; a session record is created, and the storage failure flag is written into the session record to obtain the target session record.

[0010] In this embodiment, by generating breakpoint markers and referencing session identifiers and writing them into the session record when an anomaly is detected, developers can learn about the context state when the anomaly occurs based on the playback, reducing the possibility of misjudgment of the user journey caused by incorrect splicing, thereby improving the efficiency of troubleshooting front-end issues.

[0011] According to one embodiment of this application, the target session record further includes: a session reference time; the method further includes: The current time is compared with the session reference time. If the current time is less than the session reference time, an error is triggered.

[0012] In this embodiment, by comparing the current time with the session reference time and triggering an error when the current time is less than the session reference time, the situation where abnormal client time leads to playback data errors can be reduced.

[0013] According to one embodiment of this application, based on the formula: TimeOffset = _last_timestamp + GapBuffer Calculate the time offset; Where TimeOffset is the time offset, _last_timestamp is the last timestamp of the preceding historical page, and GapBuffer is the page load time.

[0014] According to one embodiment of this application, based on the formula: GlobalTimestamp = CurrentTime - PageStartTime + TimeOffset Calculate the global timestamp; Where GlobalTimestamp is the global timestamp, CurrentTime is the occurrence time of the event, PageStartTime is the creation time of the current page, and TimeOffset is the time offset.

[0015] According to one embodiment of this application, the page log includes visual data and / or logical data; The method further includes: Obtain the state of each visual component on the current page and generate the visual data; And / or, obtain the state of each logical variable in the current page and generate the logical data.

[0016] In this embodiment, by recording the visual and logical data of the current page in the page log, it is possible to generate front-end visual playback and front-end logical playback based on the logs of each page, enabling developers to comprehensively check front-end errors by combining visual and logical playback.

[0017] According to one embodiment of this application, the logical data includes at least one of the following: The attribute path of the target logical variable that has changed; The action identifier that triggered the change; The old and new values ​​of the target logical variable.

[0018] In this embodiment, by recording only key information related to the target logical variable that has changed, rather than recording the entire variable, the performance and memory overhead required for the monitoring and acquisition process can be reduced.

[0019] Secondly, this application provides a front-end monitoring playback method, including: Multiple page logs are obtained; wherein each page log is generated according to the front-end monitoring collection method described in the first aspect. Obtain the target session identifier and target time; Retrieve multiple target page logs from the multiple page logs that have the target session identifier and whose global timestamp is less than the target time; Based on the visual data in the logs of each target page, generate a front-end visual replay; based on the logical data in the logs of each target page, generate a front-end logical replay. The front-end visual playback and the front-end logic playback are displayed simultaneously.

[0020] The front-end monitoring playback method provided in this application generates and synchronously displays front-end visual playback and front-end logic playback, enabling developers to intuitively understand the status of each visual component and logical variable at the target time, saving the steps of reproduction and the work of code breakpoint debugging, thereby improving the efficiency of front-end problem investigation.

[0021] Thirdly, this application provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the methods described in the first and / or second aspects above.

[0022] Fourthly, this application provides a front-end monitoring and data acquisition device, comprising: The acquisition module is used to acquire the target session record corresponding to the current page; the target session record includes a session identifier and multiple historical page records; The determination module is used to determine the page number of the current page based on the number of historical page records in the target session record; The first calculation module is used to find the previous historical page record corresponding to the current page according to the page number of the current page. If the current page has a corresponding previous historical page record, the time offset of the current page relative to the previous historical page is calculated. If the current page does not have a corresponding previous historical page record, the time offset is determined to be 0. The second calculation module is used to calculate the global timestamp of the event based on the time offset when the event is detected. The generation module is used to generate page logs based on the session identifier, the page sequence number, and the global timestamp.

[0023] According to the front-end monitoring and data collection device of this application, by acquiring the target session record corresponding to the current page, developers can aggregate logs of different pages in the session based on the session identifier; by calculating the page sequence number of the current page and the time offset relative to the previous historical page, and calculating the global timestamp of each event based on the time offset, the event timestamps of each page in the same session can be made continuous; thus, developers can reconstruct the complete user session path based on the page logs, thereby improving the efficiency of front-end problem investigation.

[0024] Fifthly, this application provides a front-end monitoring playback device, comprising: The first acquisition module is used to acquire multiple page logs; wherein each page log is generated according to the front-end monitoring acquisition method described in the first aspect; The second acquisition module is used to acquire the target session identifier and the target time; The retrieval module is used to retrieve multiple target page logs from multiple page logs that have the target session identifier and whose global timestamp is less than the target time; The generation module is used to generate front-end visual playback based on the visual data in the logs of each target page; and to generate front-end logical playback based on the logical data in the logs of each target page. The display module is used to simultaneously display the front-end visual playback and the front-end logic playback.

[0025] According to the front-end monitoring and playback device of this application, by generating and synchronously displaying front-end visual playback and front-end logic playback, developers can intuitively know the status of each visual component and logical variable at the target time, saving the work of reproduction steps and code breakpoint debugging, thereby improving the efficiency of front-end problem investigation.

[0026] In a sixth aspect, this application provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the front-end monitoring and acquisition method as described in the first aspect above.

[0027] In a seventh aspect, this application provides a chip including a processor and a communication interface, the communication interface being coupled to the processor, the processor being used to run programs or instructions to implement the methods described in the first aspect and / or the second aspect.

[0028] Eighthly, this application provides a computer program product including a computer program that, when executed by a processor, implements the methods described in the first and / or second aspects.

[0029] The above-described one or more technical solutions in the embodiments of this application have at least one of the following technical effects: According to the front-end monitoring and data collection method of this application, by obtaining the target session record corresponding to the current page, developers can aggregate logs of different pages in the session based on the session identifier; by calculating the page number of the current page and the time offset relative to the previous historical page, and calculating the global timestamp of each event based on the time offset, the event timestamps of each page in the same session can be made continuous; thus, developers can reconstruct the complete user session path based on the page logs, thereby improving the efficiency of front-end problem investigation.

[0030] In some embodiments, creating a target session record when no valid session exists at the current time can reduce the likelihood of target session record retrieval failures.

[0031] In some embodiments, by generating breakpoint markers and referencing session identifiers and writing them to the session record when an anomaly is detected, developers can learn about the context state when the anomaly occurs based on the playback, reducing the possibility of misjudgment of the user journey caused by incorrect splicing, thereby improving the efficiency of troubleshooting front-end issues.

[0032] In some embodiments, by comparing the current time with the session base time and triggering an error when the current time is less than the session base time, the occurrence of playback data errors caused by abnormal client time can be reduced.

[0033] In some embodiments, by recording visual and logical data of the current page in the page log, front-end visual playback and front-end logical playback can be generated based on the logs of each page, enabling developers to troubleshoot front-end errors by combining visual and logical playback.

[0034] In some embodiments, by recording only key information related to the target logical variable that has changed, rather than recording the entire variable, the performance and memory overhead required for the monitoring and acquisition process can be reduced.

[0035] According to the front-end monitoring and playback method of this application, by generating and synchronously displaying front-end visual playback and front-end logic playback, developers can intuitively know the status of each visual component and logical variable at the target time, saving the steps of reproduction and code breakpoint debugging, thereby improving the efficiency of front-end problem investigation.

[0036] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description

[0037] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0038] Figure 1 This is a flowchart illustrating the front-end monitoring and data collection method provided in an embodiment of this application; Figure 2 This is a flowchart illustrating the front-end monitoring playback method provided in an embodiment of this application; Figure 3 This is a schematic diagram of the front-end monitoring and data collection process provided in an embodiment of this application; Figure 4 This is a schematic diagram of the front-end monitoring playback process provided in an embodiment of this application; Figure 5 This is a schematic diagram of the front-end monitoring and acquisition device provided in the embodiments of this application; Figure 6 This is a schematic diagram of the front-end monitoring and playback device provided in the embodiments of this application; Figure 7 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0039] The technical solutions of the embodiments of this application will be clearly described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application are within the scope of protection of this application.

[0040] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first object can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0041] In the field of computer technology, to improve application development efficiency and maintainability, a front-end / back-end separation architecture is typically adopted. The front-end handles user interaction and interface display tasks, while the back-end handles business data computation and storage tasks. However, as application complexity and the variety of user devices increase, developers often find it difficult to reproduce problems encountered on the front-end during user interactions with the application. Therefore, it is necessary to continuously monitor user input actions, front-end component state changes, and other events during the interaction and generate logs, enabling developers to troubleshoot front-end issues based on these logs.

[0042] In related technologies, monitoring is typically performed on a page-by-page basis. Recording begins when the page finishes loading and ends when the page is closed, generating and uploading logs. However, users may interact with multiple pages within the same session. For example, when shopping on a shopping app, after entering the app's homepage, a user might click a product link to navigate to the product details page, then click a purchase link to navigate to the checkout page, and refresh the checkout page if an error occurs.

[0043] Monitoring only on a page-by-page basis will only result in a series of scattered logs, each containing only event records from the same page, such as logs from the homepage, product details page, original checkout page, and new checkout page. This makes it difficult for developers to reconstruct the complete user session path from the scattered logs when troubleshooting front-end issues, severely impacting the efficiency of problem localization and analysis.

[0044] To address at least one of the aforementioned technical problems, embodiments of this application provide a front-end monitoring data collection method, a front-end monitoring playback method, and an electronic device. The front-end monitoring data collection method, front-end monitoring playback method, and electronic device provided in these embodiments can be applied to any single-domain or shared-root-domain single-page or multi-page application, such as web applications, mobile applications, desktop applications, and other applications; these embodiments are not limited thereto. In some embodiments, a back-end session synchronization mechanism can also be used to monitor cross-domain applications.

[0045] The front-end monitoring acquisition method, front-end monitoring playback method, and electronic device provided in this application will be described in detail below with reference to the accompanying drawings and through specific embodiments and application scenarios.

[0046] Among them, the front-end monitoring and data collection method can be applied to the terminal, and can be executed by the hardware or software in the terminal.

[0047] The terminal includes, but is not limited to, portable communication devices such as mobile phones or tablets with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads). It should also be understood that, in some embodiments, the terminal may not be a portable communication device, but rather a desktop computer with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads).

[0048] The following embodiments describe a terminal including a display and a touch-sensitive surface. However, it should be understood that the terminal may include one or more other physical user interface devices such as a physical keyboard, mouse, and joystick.

[0049] The execution subject of the front-end monitoring and acquisition method provided in this application embodiment can be an electronic device or a functional module or functional entity in an electronic device that can implement the front-end monitoring and acquisition method. The electronic devices mentioned in this application embodiment include, but are not limited to, mobile phones, tablets, computers, etc. The front-end monitoring and acquisition method provided in this application embodiment is described below using an electronic device as the execution subject.

[0050] like Figure 1 As shown, the front-end monitoring and data collection method includes steps 110, 120, 130, 140, and 150.

[0051] Step 110: Obtain the target session record corresponding to the current page; the target session record includes the session identifier and multiple historical page records.

[0052] In this embodiment of the application, a session refers to a continuous interaction process between the same user and an application within a certain period of time. The developer can pre-set the boundary conditions of the session, such as marking the start of the session when the user first accesses the application, and marking the end of the session when the user closes the application and the application is inactive for a period of time.

[0053] A page is a unit of content within an application. It can be a single document or a group of documents with specific identifiers that can be loaded and rendered individually. For example, in a web application running in a browser, a web application's page can be identified by a URL (Uniform Resource Locator) and can consist of components such as an HTML (Hypertext Markup Language) document that defines the page structure, a CSS (Cascading Style Sheets) document that controls graphic styles, and JavaScript scripts that implement interactive logic.

[0054] Of course, for different types of applications, the application pages can also be of other architectures. For example, for mobile applications built using ReactNative, Flutter, etc., each page corresponds to a code file or component; and for desktop application pages built using web frameworks such as Electron or native desktop frameworks, etc. This application embodiment does not limit this.

[0055] A session record is a data structure that records session-related information, including a session identifier and multiple historical page records. Historical pages are the pages accessed by the user within the same session up to the current moment. Historical page records are data structures that record information related to historical pages, which may include page identifiers, access times, etc.

[0056] Of course, the session record may also include other items, such as the session's activity status and performance statistics; the historical page record may also include other items, such as resource usage, etc., but this application embodiment does not limit this.

[0057] Step 120: Determine the page number of the current page based on the number of historical page records in the target session record.

[0058] In this embodiment, the page sequence number represents the order in which a user accesses the corresponding page; a larger page sequence number indicates that the user accessed the corresponding page later in the order. For example, if the number of historical page records in the target session record is PageCount = n, then the page sequence number of the current page can be set to PageSequence = n+1.

[0059] After determining the page number of the current page, you can also update the target session record based on the relevant information of the current page. For example, you can generate a page record based on the relevant information of the current page and add it to the target session record.

[0060] Step 130: Based on the page number of the current page, find the previous historical page record corresponding to the current page. If the current page has a corresponding previous historical page record, calculate the time offset of the current page relative to the previous historical page; if the current page does not have a corresponding previous historical page record, set the time offset to 0.

[0061] For example, if the current page's page number is n+1, then the historical page record with page number n can be identified as the preceding historical page record for the current page. If n=0, it indicates that the current page is the first page of this session, and there is no corresponding preceding historical page record; therefore, the time offset can be directly set to 0.

[0062] In some embodiments, according to the formula: TimeOffset = _last_timestamp + GapBuffer Calculate the time offset; Where TimeOffset is the time offset, _last_timestamp is the last timestamp of the preceding historical page, and GapBuffer is the page load time.

[0063] In this embodiment, the last timestamp of a previous historical page is a time value called _last_timestamp, which describes the time when the latest event occurred in the previous historical page. It can be a global timestamp. The developer can pre-define the method for determining _last_timestamp. For example, if a user clicks a link in Page 0 and jumps to the current page Page 1, the global timestamp corresponding to the event that triggered the page jump can be used as the event's _last_timestamp and written into the historical page record when collecting front-end monitoring data from Page 0. If the user refreshes Page 0 to get the current page Page 1, the page unload event beforeunload of Page 0 can be listened to, and the global timestamp of the beforeunload event can be used as _last_timestamp. Of course, other methods can also be used to determine the last timestamp of each historical page, and this embodiment does not limit this method.

[0064] In this embodiment, the page load time GapBuffer refers to the duration from the start of page loading to its completion. The developer can pre-define the acquisition and calculation method of GapBuffer. For example, the DOMContentLoaded event can be used as a marker of page completion, and the browser's Performance tool can be used to calculate the time elapsed from the start of page loading to the occurrence of the DOMContentLoaded event. Alternatively, GapBuffer can be calculated in other ways. For instance, a safety buffer time, SafetyBuffer, preset by the developer (e.g., SafetyBuffer=50ms), can be added to GapBuffer to reduce timing errors. If the current page is refreshed from a previous historical page, the time spent unloading the previous historical page can also be added to GapBuffer. GapBuffer can also contain other items and can be calculated using other tools; this embodiment does not limit this.

[0065] Step 140: When an event is detected, calculate the global timestamp of the event based on the time offset.

[0066] In the embodiments of this application, an event refers to an action or signal triggered by user input, user device, application internal code, etc., such as a user clicking a button, a user device clearing memory, or an application backend transmitting data.

[0067] Developers can set up event listeners and pre-specify the monitoring range to continuously monitor the page during operation. Recording will begin when an event within the monitoring range is detected. Of course, other detection methods can also be set, such as setting a timer to trigger an expiration event and start recording at regular intervals. This application embodiment does not limit this approach.

[0068] When an event is detected, the user device's current local time can be obtained, and the global timestamp of the event can be calculated based on the time offset.

[0069] In some embodiments, according to the formula: GlobalTimestamp = CurrentTime - PageStartTime + TimeOffset Calculate the global timestamp; Where GlobalTimestamp is the global timestamp, CurrentTime is the time the event occurred, PageStartTime is the time the current page was created, and TimeOffset is the time offset.

[0070] In this embodiment of the application, the event occurrence time CurrentTime refers to the local time when the detected event occurs, and the current page creation time PageStartTime refers to the local time when the current page is completed.

[0071] Step 150: Generate page logs based on session identifier, page sequence number, and global timestamp.

[0072] In this embodiment, a page log refers to a data structure describing the page's running state. For example, a page log can be a JSON (JavaScript Object Notation) file, such as {"SessionID": ..., "PageSequence": ...,"GlobalTimestamp": ...,"Content": ...}. Here, SessionID is the session identifier, PageSequence is the page sequence number, and GlobalTimestamp is the global timestamp, which can serve as index fields for easy querying and storage; Content is the specific content of the log, for example, a snapshot of the page at the current moment can be collected as the recorded content.

[0073] Of course, page logs can also be generated in other forms and structures, such as CSV (Comma-Separated Values) documents; log content can also be collected in other ways, which are not limited in this embodiment. The generated page logs can also be collected periodically and uploaded to a server or database specified by the developer for analysis.

[0074] The front-end monitoring and data collection method provided in this application obtains the target session record corresponding to the current page, enabling developers to aggregate logs from different pages in a session based on the session identifier; by calculating the page sequence number of the current page and the time offset relative to the previous historical page, and calculating the global timestamp of each event based on the time offset, the event timestamps of each page in the same session can be made continuous; thus, developers can reconstruct the complete user session path based on the page logs, thereby improving the efficiency of front-end problem troubleshooting.

[0075] In some embodiments, obtaining the target session record corresponding to the current page includes: Search the session record storage space to see if there is a valid session at the current time; If a valid session exists at the current time, the session record of the valid session will be determined as the target session record; If no valid session exists at the current time, create the target session record in the session record storage space.

[0076] In this embodiment, the session record storage space is a storage area specifically used to store session records, such as the local storage (LocalStorage) or session storage (SessionStorage) of the user device's browser. A valid session refers to a session that has not yet timed out and is currently in a valid state.

[0077] Developers can pre-define how session status is updated. For example, they can set a `SessionStatus` field to describe the session status and a `LastActiveTime` field to describe the last active time of the session in each session record, and set `SessionStatus` to invalid when there is no activity for a period of time. When retrieving the target session record corresponding to the current page, the `SessionStatus` field of each session record in the session record storage space is checked sequentially. If there is a session record with a valid `SessionStatus`, it is identified as the target session record; if multiple session records with valid `SessionStatus` are found, the record with the `LastActiveTime` closest to the current time can be selected as the target session record.

[0078] If no valid session exists at the current time, it indicates that a new session has begun, and a new session record entry is created in the session record storage space. A UUID (Universally Unique Identifier) ​​can be generated as the session identifier, the current page is used as the initial page for this session, and a page record is generated based on the relevant data of the current page. The session identifier and the current page record are written into the session record to obtain the target session record.

[0079] Of course, other methods can be used to store, update, and retrieve session records, and this application does not limit this method.

[0080] In this embodiment, by creating a target session record when no valid session exists at the current time, the failure to obtain the target session record can be reduced.

[0081] In some embodiments, creating a target session record in the session record storage space includes: If at least one of cross-domain redirection or direct access is detected, a breakpoint marker is generated; the previous historical session record is retrieved from the session record storage space, and the session identifier of the previous historical session record is used as the reference session identifier; a session record is created, and the breakpoint marker and the reference session identifier are written into the session record to obtain the target session record; And / or, if storage space failure is detected, a storage failure flag is generated; a session record is created, and the storage failure flag is written into the session record to obtain the target session record.

[0082] In this embodiment, cross-domain redirection refers to the situation where a user is redirected from an old page to a new page on a different domain. For example, if a user clicks a payment link on a product details page on the domain "a.com" and is redirected to the checkout page on the domain "b.com" to make a payment, this is a cross-domain redirection. Because in some browsers' storage mechanisms, the storage space accessible to pages on different domains is isolated from each other, the browser will determine that a new session has been generated. The browser can check the domain name of the referencing page recorded in the Referer field of the HTTP (Hypertext Transfer Protocol) request header of the current page and compare it with the domain name of the current page. If they are different, a cross-domain redirection is determined to have occurred.

[0083] Direct access refers to accessing a new page without redirecting through an existing page, by having the user manually enter the URL, click a browser bookmark, or click a link in an external application. You can check the Referer field in the HTTP request header of the current page; if the Referer field is empty, it indicates that direct access has occurred.

[0084] A breakpoint marker is generated if at least one of cross-domain redirection or direct access is detected. For example, a breakpoint marker field `sessionBroken` can be set to record the type of exception detected and related logs.

[0085] Of course, other types of abnormal situations can also be detected, such as network interruption, forced refresh, user change of system time, etc., and corresponding breakpoint markers can be generated. This application embodiment does not limit this.

[0086] Upon detecting at least one of cross-domain redirection or direct access, or after generating a breakpoint marker, the previous historical session record is retrieved from the session record storage space. The LastActiveTime field of each session record in the session record storage space can be examined, and the session record with LastActiveTime closest to the current time is identified as the previous historical session record. The session identifier of the previous historical session record is then used as the referencing session identifier, previousSessionID, for the current session.

[0087] After obtaining the breakpoint marker and the referenced session identifier, write the breakpoint marker and the referenced session identifier into the newly created session record to obtain the target session record.

[0088] Storage failure refers to situations where session record storage becomes inaccessible or unavailable due to browser privacy mechanisms, user-mandated clearing of storage, or other reasons. This can be determined by checking the browser's global event log and attempting to write data. Upon detecting storage failure, a storage failure flag is generated. For example, a storage failure flag field, `storageBroken`, can be set to record the detected storage failure and related logs. After obtaining the storage failure flag, it is written to a newly created session record, resulting in the target session record.

[0089] In this embodiment, by generating breakpoint markers and referencing session identifiers and writing them into the session record when an anomaly is detected, developers can learn about the context state when the anomaly occurs based on the playback, reducing the possibility of misjudgment of the user journey caused by incorrect splicing, thereby improving the efficiency of troubleshooting front-end issues.

[0090] In some embodiments, the target session record further includes: a session baseline time; the front-end monitoring collection method further includes: The current time is compared with the session base time. If the current time is less than the session base time, an error is triggered.

[0091] In this embodiment, the session base time is a timestamp. The developer can pre-define the method for determining the session base time (BaseTime), for example, by determining the user's system time at the time the session record is created as BaseTime.

[0092] The current time is compared with the session reference time. If the current time is less than the session reference time, an error is triggered. The current time refers to the user's system time at the current moment. Error information can be written into the page log. Of course, other methods can be used to handle time errors, and this embodiment does not limit this approach.

[0093] In this embodiment, by comparing the current time with the session reference time and triggering an error when the current time is less than the session reference time, the situation where abnormal client time leads to playback data errors can be reduced.

[0094] In some embodiments, the page log includes visual data and / or logical data; Front-end monitoring and data collection methods also include: Get the state of each visual component on the current page and generate visual data; And / or, retrieve the state of each logical variable on the current page and generate logical data.

[0095] In this embodiment, visual components refer to components on the current page that correspond to content that can be directly seen and interacted with by the user. These components are calculated by the rendering engine and actually displayed on the screen, such as images, text, and status bars. Visual data describes the state of each visual component on the current page. For example, the MutationObserver tool can be used to collect the DOM (Document Object Model) document of the current page, or record changes in nodes within the DOM document, as visual data. Of course, other methods can also be used to generate visual data, such as direct screenshots, and this embodiment does not limit this approach.

[0096] In this embodiment, logical variables refer to data structures stored in memory during the current page's operation, such as JS (JavaScript) variables, arrays, and objects; logical data refers to data describing the state of each logical variable in the current page. For example, developers can pre-specify the logical variables to be monitored and record the values ​​of each logical variable at the current moment when an event is detected, thereby obtaining logical data. Of course, logical data can also be generated in other ways, and this embodiment does not limit this approach.

[0097] In this embodiment, by recording the visual and logical data of the current page in the page log, it is possible to generate front-end visual playback and front-end logical playback based on the logs of each page, enabling developers to comprehensively check front-end errors by combining visual and logical playback.

[0098] In some embodiments, logical data includes at least one of the following: The attribute path of the target logical variable that has changed; The action identifier that triggered the change; The old and new values ​​of the target logical variable.

[0099] In this embodiment, the attribute path refers to the path of the internal nested attribute that has been changed in the logical variable, and can be represented in the form of a string; the action that triggers the change refers to the command that modifies the target logical variable, and the action identifier that triggers the change can be a function name, etc.; the old value and the new value of the target logical variable refer to the values ​​of the target logical variable before and after the change, respectively.

[0100] For example, a user's original username is "Alice," and the username is changed to "Bob" through a username modification operation. During this process, the front-end application calls the SET_USER_INFO function to change the value of user.info.name from Alice to Bob. Here, "Path = user.info.name" refers to the attribute path of the target logical variable "name" that is being modified, and "Action = SET_USER_INFO" is the action identifier that triggers the change. The old value of the target logical variable is "OldValue = Alice," and the new value is "NewValue = Bob."

[0101] For logical variables of JS object type, JavaScript ES6's Proxy object can be used to recursively proxy the logical variables, intercepting and recording modification operations when the application's business code attempts to modify the value of the logical variable. Of course, other methods can also be used to generate logical data, and this application's embodiments do not limit this approach.

[0102] In this embodiment, by recording only key information related to the target logical variable that has changed, rather than recording the entire variable, the performance and memory overhead required for the monitoring and acquisition process can be reduced.

[0103] The front-end monitoring playback method provided in this application can be applied to a terminal, specifically executed by hardware or software in the terminal.

[0104] The terminal includes, but is not limited to, portable communication devices such as mobile phones or tablets with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads). It should also be understood that, in some embodiments, the terminal may not be a portable communication device, but rather a desktop computer with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads).

[0105] The following embodiments describe a terminal including a display and a touch-sensitive surface. However, it should be understood that the terminal may include one or more other physical user interface devices such as a physical keyboard, mouse, and joystick.

[0106] The execution subject of the front-end monitoring playback method provided in this application embodiment can be an electronic device or a functional module or functional entity in an electronic device that can implement the front-end monitoring playback method. The electronic devices mentioned in this application embodiment include, but are not limited to, mobile phones, tablets, computers, etc. The front-end monitoring playback method provided in this application embodiment is described below using an electronic device as the execution subject.

[0107] This application also provides a front-end monitoring playback method, such as Figure 2 As shown, the front-end monitoring playback method includes steps 210, 220, 230, 240, and 250.

[0108] Step 210: Obtain multiple page logs; wherein each page log is generated according to the front-end monitoring collection method provided in this application.

[0109] In this embodiment of the application, multiple page logs with a specific data structure containing session identifiers, page sequence numbers, global timestamps, visual data, logical data, etc., can be obtained by accessing a database or server that stores page logs collected by a front-end monitoring method.

[0110] Step 220: Obtain the target session identifier and target time.

[0111] This application also provides a human-computer interaction interface, including a toolbar displaying playback control tools. Developers can select the "New Playback" option in the toolbar by clicking with a mouse, typing with a keyboard, etc., and enter a session identifier and a time value in a form. The session identifier entered by the developer can be used as the target session identifier TargetSessionID, and the time value entered by the developer can be used as the target time TargetTime.

[0112] Step 230: Retrieve multiple target page logs from multiple page logs that have a target session identifier and a global timestamp less than the target time.

[0113] In this embodiment of the application, a retrieval command can be constructed based on the target session identifier and the target time to retrieve multiple target page logs that meet the conditions from the acquired multiple page logs.

[0114] Step 240: Generate front-end visual playback based on the visual data in the logs of each target page; generate front-end logical playback based on the logical data in the logs of each target page.

[0115] In this embodiment, front-end visual playback refers to the sequence of images reconstructed from the visual data in the target page log, used to restore the state and change process of the user's visually visible content during the interaction between the user and the application; front-end logical playback refers to the sequence of logical variables calculated from the logical data in the target page log, used to restore the state and change process of each logical variable during the interaction between the user and the application.

[0116] For example, for visual data in the form of DOM change records, an iframe container can be created first as the visual reconstruction environment, and script execution can be disabled to prevent side effects from interfering with playback. Then, the target page logs containing visual data are filtered and sorted in ascending order of global timestamps. For each target page in the session, the initial page snapshot is first loaded into the iframe container, and then the components in the page snapshot are updated sequentially according to the DOM change content recorded in the target page logs. The layout, styles, and content of the page are then rendered to obtain the front-end visual playback. For events that redirect to a new page, another iframe container can be created, and the relevant content of the new page can be rendered in the new container.

[0117] For logical data in the form of JS variable patches, a separate Web Worker or JS Context object can be created as a logic sandbox. Then, the target page logs containing logical data are filtered and sorted in ascending order of global timestamp. For the logical variables in each target page log, the values ​​of the logical variables are updated sequentially according to the old and new values ​​recorded in the target page log until the target time is reached. A JS state tree can be rendered based on the attribute paths of each logical variable, which can be used for front-end logic replay.

[0118] Of course, other methods can also be used to generate front-end visual playback and front-end logic playback, and this application embodiment does not limit this.

[0119] Step 250: Simultaneously display the front-end visual playback and the front-end logic playback.

[0120] The human-computer interaction interface provided in this application also includes a playback control box, a visual playback panel, and a logical playback panel.

[0121] The system can generate a timeline including various time points in the session based on the global timestamps in the logs of each page, and display the timeline in the playback control box. Developers can input the specific time t (t<= TargetTime) to be checked by clicking, dragging, etc. After the developer inputs t, the front-end visual playback content corresponding to time t will be displayed in the visual playback panel, and the front-end logical playback content corresponding to time t will be displayed in the logical playback panel.

[0122] The playback control box can also be equipped with play / pause buttons. When the developer clicks the play button, the front-end visual playback and front-end logic playback at each moment will start playing continuously. When the developer clicks the pause button, the page and logic variable values ​​at this moment can be obtained simultaneously.

[0123] The front-end monitoring playback method provided in this application generates and synchronously displays front-end visual playback and front-end logic playback, enabling developers to intuitively understand the status of each visual component and logical variable at the target time, saving the steps of reproduction and the work of code breakpoint debugging, thereby improving the efficiency of front-end problem investigation.

[0124] The following scenario example illustrates the front-end monitoring and data collection method provided in this application. For example... Figure 3 As shown in the example scenario, the user opens the current page. After the current page finishes loading, the system first searches the session record storage space to see if a valid session exists at the current time. If a valid session exists, the session record of the valid session is identified as the target session record, and the session identifier of the target session record is identified as the session identifier of the current page. If no valid session exists, the target session record is created in the session record storage space.

[0125] After determining the target session record corresponding to the current page, the page number of the current page is determined based on the number of historical page records in the target session record. Then, the previous historical page record corresponding to the current page is searched based on the page number. If the current page has a corresponding previous historical page record, the time offset of the current page relative to the previous historical page is calculated; if the current page does not have a corresponding previous historical page record, the time offset is set to 0.

[0126] After calculating the time offset, continuously monitor the current page for events. When an event is detected, first calculate the global timestamp of the event based on the time offset; obtain the state of each visual component and logical variable on the current page, and generate visual and logical data; after completing the collection, generate page logs based on the session identifier, page sequence number, global timestamp, visual and logical data.

[0127] The generated page logs can be packaged and uploaded to a server or database specified by the developer at regular intervals for analysis.

[0128] The following scenario illustrates the front-end monitoring playback method provided in this application's embodiments. For example... Figure 4 As shown in the example scenario, multiple page logs are retrieved from the database. The developer selects "New Playback Option" in the toolbar of the human-computer interaction interface and enters the target session identifier and target time. First, the target session identifier and session time entered by the developer are obtained. After obtaining the target session identifier and session time, a search command is constructed based on the target session identifier and target time to retrieve multiple target page logs with the target session identifier and a global timestamp less than the target time from the retrieved multiple page logs. After retrieving multiple target page logs that meet the conditions, a front-end visual playback is generated based on the visual data in each target page log, and a front-end logical playback is generated based on the logical data in each target page log. After obtaining the front-end visual playback and front-end logical playback, the front-end visual playback is displayed in the visual playback panel, and the corresponding front-end logical playback is displayed in the logical playback panel, thus displaying the front-end visual playback and front-end logical playback synchronously.

[0129] The front-end monitoring and data acquisition method provided in this application can be executed by a front-end monitoring and data acquisition device. This application uses the execution of the front-end monitoring and data acquisition method by a front-end monitoring and data acquisition device as an example to illustrate the front-end monitoring and data acquisition device provided in this application.

[0130] This application also provides a front-end monitoring and data acquisition device.

[0131] like Figure 5 As shown, the front-end monitoring and data acquisition device includes: The acquisition module 510 is used to acquire the target session record corresponding to the current page; the target session record includes a session identifier and multiple historical page records. The determination module 520 is used to determine the page number of the current page based on the number of historical page records in the target session record; The first calculation module 530 is used to find the previous historical page record corresponding to the current page according to the page number of the current page. If the current page has a corresponding previous historical page record, the time offset of the current page relative to the previous historical page is calculated; if the current page does not have a corresponding previous historical page record, the time offset is set to 0. The second calculation module 540 is used to calculate the global timestamp of the event based on the time offset when the event is detected. The generation module 550 is used to generate page logs based on the session identifier, page sequence number, and global timestamp.

[0132] According to the front-end monitoring and data collection device of this application, by acquiring the target session record corresponding to the current page, developers can aggregate logs of different pages in the session based on the session identifier; by calculating the page sequence number of the current page and the time offset relative to the previous historical page, and calculating the global timestamp of each event based on the time offset, the event timestamps of each page in the same session can be made continuous; thus, developers can reconstruct the complete user session path based on the page logs, thereby improving the efficiency of front-end problem investigation.

[0133] In some embodiments, the acquisition module 510 is further configured to: Search the session record storage space to see if there is a valid session at the current time; If a valid session exists at the current time, the session record of the valid session will be determined as the target session record; If no valid session exists at the current time, create the target session record in the session record storage space.

[0134] In some embodiments, the acquisition module 510 is further configured to: If at least one of cross-domain redirection or direct access is detected, a breakpoint marker is generated; the previous historical session record is retrieved from the session record storage space, and the session identifier of the previous historical session record is used as the reference session identifier; a session record is created, and the breakpoint marker and the reference session identifier are written into the session record to obtain the target session record; And / or, if storage space failure is detected, a storage failure flag is generated; a session record is created, and the storage failure flag is written into the session record to obtain the target session record.

[0135] In some embodiments, the acquisition module 510 is further configured to: The current time is compared with the session base time. If the current time is less than the session base time, an error is triggered.

[0136] In some embodiments, the generation module 550 is further configured to: Get the state of each visual component on the current page and generate visual data; And / or, retrieve the state of each logical variable on the current page and generate logical data.

[0137] The front-end monitoring playback method provided in this application can be executed by a front-end monitoring playback device. This application uses the execution of the front-end monitoring playback method by a front-end monitoring playback device as an example to illustrate the front-end monitoring playback device provided in this application.

[0138] This application also provides a front-end monitoring playback device.

[0139] like Figure 6 As shown, the front-end monitoring playback device includes: The first acquisition module 610 is used to acquire multiple page logs; wherein each page log is generated according to the method described in the embodiment of the front-end monitoring and acquisition method. The second acquisition module 620 is used to acquire the target session identifier and the target time; The retrieval module 630 is used to retrieve multiple target page logs from multiple page logs that have a target session identifier and a global timestamp that is less than the target time. The generation module 640 is used to generate front-end visual playback based on the visual data in the logs of each target page; and to generate front-end logical playback based on the logical data in the logs of each target page. The display module 650 is used to simultaneously display the front-end visual playback and the front-end logic playback.

[0140] According to the front-end monitoring and playback device of this application, by generating and synchronously displaying front-end visual playback and front-end logic playback, developers can intuitively know the status of each visual component and logical variable at the target time, saving the work of reproduction steps and code breakpoint debugging, thereby improving the efficiency of front-end problem investigation.

[0141] The front-end monitoring and acquisition device and the front-end monitoring playback device in the embodiments of this application can be electronic devices or components in electronic devices, such as integrated circuits or chips. The electronic device can be a terminal or other devices besides a terminal. For example, the electronic device can be a mobile phone, tablet computer, laptop computer, handheld computer, in-vehicle electronic device, mobile internet device (MID), augmented reality (AR) / virtual reality (VR) device, robot, wearable device, ultra-mobile personal computer (UMPC), netbook or personal digital assistant (PDA), etc. It can also be a server, network attached storage (NAS), personal computer (PC), television (TV), ATM or self-service machine, etc. The embodiments of this application do not specifically limit the scope.

[0142] The front-end monitoring acquisition device and the front-end monitoring playback device in this application embodiment can be devices with an operating system. The operating system can be a Microsoft (Windows) operating system, an Android operating system, an iOS operating system, or other possible operating systems; this application embodiment does not specifically limit them.

[0143] In some embodiments, such as Figure 7 As shown, this application embodiment also provides an electronic device 700, including a processor 701, a memory 702, and a computer program stored in the memory 702 and executable on the processor 701. When the program is executed by the processor 701, it implements the various processes of the above-described front-end monitoring acquisition method and front-end monitoring playback method embodiments, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0144] It should be noted that the electronic devices in the embodiments of this application include the aforementioned mobile electronic devices and non-mobile electronic devices.

[0145] This application also provides a non-transitory computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the various processes of the above-described front-end monitoring acquisition method and front-end monitoring playback method embodiments, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0146] The processor is the processor in the electronic device described in the above embodiments. The readable storage medium includes computer-readable storage media, such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0147] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the aforementioned front-end monitoring acquisition method and front-end monitoring playback method.

[0148] The processor is the processor in the electronic device described in the above embodiments. The readable storage medium includes computer-readable storage media, such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0149] This application embodiment also provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled. The processor is used to run programs or instructions to implement the various processes of the above-described front-end monitoring acquisition method and front-end monitoring playback method embodiments, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0150] It should be understood that the chip mentioned in the embodiments of this application may also be referred to as a system-on-a-chip, system chip, chip system, or system-on-a-chip, etc.

[0151] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element. Furthermore, it should be noted that the scope of the methods and apparatuses in the embodiments of this application is not limited to performing functions in the order shown or discussed, but may also include performing functions substantially simultaneously or in the reverse order, depending on the functions involved. For example, the described methods may be performed in a different order than described, and various steps may be added, omitted, or combined. Additionally, features described with reference to certain examples may be combined in other examples.

[0152] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a computer software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0153] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

[0154] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "illustrative embodiment," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.

[0155] Although embodiments of this application have been shown and described, those skilled in the art will understand that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of this application, the scope of which is defined by the claims and their equivalents.

Claims

1. A front-end monitoring and data acquisition method, characterized in that, include: Retrieve the target session record corresponding to the current page; The target session record includes a session identifier and multiple historical page records; The page number of the current page is determined based on the number of historical page records in the target session record; Based on the page number of the current page, find the previous historical page record corresponding to the current page. If the current page has a corresponding previous historical page record, calculate the time offset of the current page relative to the previous historical page. If the current page does not have a corresponding previous history page record, then the time offset is set to 0; When an event is detected, a global timestamp of the event is calculated based on the time offset. Page logs are generated based on the session identifier, the page sequence number, and the global timestamp.

2. The method according to claim 1, characterized in that, The step of obtaining the target session record corresponding to the current page includes: Search the session record storage space to see if there is a valid session at the current time; If a valid session exists at the current time, the session record of the valid session will be determined as the target session record; If no valid session exists at the current time, create the target session record in the session record storage space.

3. The method according to claim 2, characterized in that, Creating the target session record in the session record storage space includes: If at least one of cross-domain redirection or direct access is detected, a breakpoint marker is generated; the previous historical session record is retrieved from the session record storage space, and the session identifier of the previous historical session record is used as the reference session identifier; a session record is created, and the breakpoint marker and the reference session identifier are written into the session record to obtain the target session record; And / or, if storage space failure is detected, a storage failure flag is generated; a session record is created, and the storage failure flag is written into the session record to obtain the target session record.

4. The method according to claim 1, characterized in that, The target session record further includes: a session reference time; the method further includes: The current time is compared with the session reference time. If the current time is less than the session reference time, an error is triggered.

5. The method according to claim 1, characterized in that, According to the formula: TimeOffset = _last_timestamp + GapBuffer Calculate the time offset; Where TimeOffset is the time offset, _last_timestamp is the last timestamp of the preceding historical page, and GapBuffer is the page load time.

6. The method according to claim 1, characterized in that, According to the formula: GlobalTimestamp = CurrentTime - PageStartTime + TimeOffset Calculate the global timestamp; Where GlobalTimestamp is the global timestamp, CurrentTime is the occurrence time of the event, PageStartTime is the creation time of the current page, and TimeOffset is the time offset.

7. The method according to claim 1, characterized in that, The page log includes visual data and / or logical data; The method further includes: Obtain the state of each visual component on the current page and generate the visual data; And / or, obtain the state of each logical variable in the current page and generate the logical data.

8. The method according to claim 7, characterized in that, The logical data includes at least one of the following: The attribute path of the target logical variable that has changed; The action identifier that triggered the change; The old and new values ​​of the target logical variable.

9. A front-end monitoring playback method, characterized in that, include: Obtain multiple page logs; wherein each page log is generated according to the method described in any one of claims 1-8; Obtain the target session identifier and target time; Retrieve multiple target page logs from the multiple page logs that have the target session identifier and whose global timestamp is less than the target time; Based on the visual data in the logs of each target page, generate a front-end visual replay; based on the logical data in the logs of each target page, generate a front-end logical replay. The front-end visual playback and the front-end logic playback are displayed simultaneously.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method as described in any one of claims 1-9.

Images