Method, system and equipment for establishing front-end observability at browser side

Abstract

The invention relates to the technical field of front-end development, and provides a method, system and equipment for establishing front-end observability at a browser end, and the method comprises the following steps: carrying out webpage loading detection and basic information collection when a browser loads a webpage, and judging whether an entry file of a current webpage needs to be intercepted according to the collected basic information; when the entry file of the current webpage needs to be intercepted, injecting the JS file of the front-end observable client into the intercepted entry file of the current webpage; in the process of loading the current webpage, executing initialization of the front-end observable client by loading an entry file of a JS file injected into the front-end observable client; and after the front-end observable client is initialized, a notification that the front-end observable client is injected and loaded successfully is sent to a user. According to the method, the system and the equipment for establishing the front-end observability at the browser end, the front-end observability construction which is more flexible, easy to operate and high in efficiency can be realized.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a method, system and device for establishing front-end observability on a browser side. Background Art

[0002] In the field of front-end observability, it is crucial to monitor the performance and behavior of front-end applications. Currently, the mainstream implementation method is to integrate the monitoring software development kit (SDK) of the observability platform into the project during the development of the front-end project. Specifically, during the project build phase, developers use front-end project build tools such as webpack to compile and package observability-related JavaScript code with other project codes. In this way, the final built front-end application has observability at runtime, and can monitor and track the performance and exceptions of the application.

[0003] Although this integration method can achieve relatively comprehensive monitoring if observability requirements are planned in the early stage of project development, it has obvious limitations in the implementation of front-end observability, especially in terms of flexibility and dependence on the project compilation process. It has the following defects and shortcomings: 1. Limited flexibility: Once the front-end project is compiled, any addition or change to the observability configuration requires recompiling and re-deploying the project. For projects that have already been launched, this will cause service interruptions, increase maintenance costs and operational complexity.

[0004] 2. Dependence on project compilation process: For legacy projects that do not integrate observability SDKs during the project build phase, or for temporary, urgent observability needs, existing technologies cannot provide a quick solution. For example, if a project is developed without considering the use of the browser-SDK of an observability platform such as Sentry, then when you want to add monitoring functions later, you need to modify the code structure and build process of the entire project, which is a very cumbersome and time-consuming process. The above defects and deficiencies not only affect the rapid iteration and responsiveness of the project, but also increase the difficulty and cost of project maintenance.

[0005] Therefore, how to provide a more flexible and convenient observability configuration method has become a technical problem that needs to be solved urgently. Summary of the invention

[0006] In view of this, in order to overcome the deficiencies of the prior art, the present invention aims to provide a method, system and device for establishing front-end observability on the browser side.

[0007] According to a first aspect of the present invention, a method for establishing front-end observability on a browser side is provided, the method comprising: When the browser loads a web page, it performs web page loading detection and basic information collection, and determines whether the entry file of the current web page needs to be intercepted based on the collected basic information; When the entry file of the current web page needs to be intercepted, inject the JS file of the front-end observability client into the entry file of the intercepted current web page; During the loading of the current web page, the front-end observability client is initialized by loading the entry file of the JS file that has been injected into the front-end observability client; After the front-end observable client is initialized, a notification is sent to the user that the front-end observable client has been successfully injected and loaded.

[0008] Preferably, in the method of establishing front-end observability on the browser side of the present invention, web page loading detection and basic information collection are performed when the browser loads the web page, including: when the browser loads the web page, detecting whether the current web page starts loading, and when it is detected that the web page starts loading, obtaining the domain name information of the currently loading web page and the user configuration information of the browser.

[0009] Preferably, in the method for establishing front-end observability on the browser side of the present invention, judging whether it is necessary to intercept the entry file of the current web page according to the collected basic information includes: Determine the domain name range for which the user enables observability of web pages according to the user configuration information of the browser, and determine the domain name of the web page currently being loaded according to the domain name information of the web page currently being loaded; Determine whether the domain name of the currently loading web page belongs to the domain name range for which the user has enabled web page observability. If the domain name of the currently loading web page belongs to the domain name range for which the user has enabled web page observability, determine that the entry file of the current web page needs to be intercepted.

[0010] Preferably, in the method of establishing front-end observability on the browser side of the present invention, the JS file of the front-end observability client is injected into the entry file of the intercepted current web page, including: adding JS code at the end of the JS file of the front-end observability client, and injecting the JS file with the added JS code into the must-execute part of the entry file of the current web page.

[0011] Preferably, in the method of establishing front-end observability on the browser side of the present invention, in the process of loading the current web page, the initialization of the front-end observable client is executed by loading the entry file of the JS file that has been injected into the front-end observability client, including: obtaining the protocol of the currently loaded web page, using the corresponding window event to listen to the injection event of the JS file according to the acquired protocol of the currently loaded web page, and when the injection event of the JS file is triggered and contains a valid data source identifier, the initialization of the front-end observable client is executed.

[0012] Preferably, in the method of establishing front-end observability on the browser side of the present invention, the initialization of the front-end observable client is performed by loading the entry file of the JS file that has been injected into the front-end observability client, and also includes: when loading the entry file of the current web page, the initialization of the front-end observable client is performed by loading and running the JS code.

[0013] Preferably, in the method of establishing front-end observability on the browser side of the present invention, after the front-end observable client is initialized, a notification of successful injection and loading of the front-end observable client is sent to the user, including: displaying the notification of successful injection and loading of the front-end observable client to the user through the browser's window event distribution.

[0014] Preferably, the method of establishing front-end observability on the browser side of the present invention further includes: implementing corresponding interactive interfaces and interactive functions through interactive scripts of browser plug-ins.

[0015] According to a second aspect of the present invention, a system for establishing front-end observability on a browser side is provided, the system comprising establishing a server side, the server side being used to: perform web page loading detection and basic information collection when the browser loads a web page, and determine whether it is necessary to intercept the entry file of the current web page based on the collected basic information; when it is necessary to intercept the entry file of the current web page, inject the JS file of the front-end observability client into the intercepted entry file of the current web page; in the process of loading the current web page, perform initialization of the front-end observable client by loading the entry file of the JS file that has been injected into the front-end observable client; after the initialization of the front-end observable client is completed, send a notification of successful injection and loading of the front-end observable client to the user.

[0016] According to a third aspect of the present invention, a computer device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect of the present invention when executing the program.

[0017] The method, system and device for establishing front-end observability on the browser side of the present invention have the following beneficial technical effects: 1. High flexibility. For projects that have already been launched, there is no need to modify or recompile the original front-end project code. You can add or adjust the observability configuration at any time according to actual needs. For example, if you find that there are many problems with web pages under a specific domain name within a certain period of time, and detailed monitoring is required, you can quickly add observability to these web pages by simply modifying the user configuration of the plug-in; for projects that do not integrate the observability SDK during the compilation phase, temporary observability requirements can also be easily implemented on the browser side without affecting the normal operation of the project.

[0018] 2. Easy to operate. Users only need to install a browser plug-in and perform simple configuration (such as specifying the domain name to which observability needs to be added) to implement complex front-end observability addition work. Users are not required to have in-depth front-end development knowledge and understanding of the project building process, which lowers the threshold for achieving front-end observability.

[0019] 3. High efficiency. Since the injection operation of the plug-in is performed on the browser side and does not depend on the compilation process of the front-end project, it can quickly respond to changes in observability requirements and significantly improve work efficiency. Especially when dealing with emergencies, it can quickly achieve observability on the browser side, providing strong support for quickly locating and solving problems. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0021] Figure 1 This is an example diagram of the architecture of a system for establishing front-end observability on a browser side according to an embodiment of the present invention; Figure 2 A flowchart of the steps of a method for establishing front-end observability on a browser side according to an embodiment of the present invention; Figure 3 A schematic diagram of the structure of the device provided by the present invention. DETAILED DESCRIPTION

[0022] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0023] It should be noted that the following embodiments and features in the embodiments may be combined with each other in the absence of conflict; and, based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making any creative work are within the scope of protection of the present disclosure.

[0024] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.

[0025] The technical principle of this embodiment is as follows: In the browser, loading a web page is a process of gradually parsing HTML, CSS and JavaScript files (hereinafter referred to as JS files). JavaScript (hereinafter referred to as JS) is a programming language that runs on the browser side, through which various dynamic web page functions can be implemented, including interacting with the observable platform, collecting and sending various data during the operation of the web page, such as error information, performance indicators, etc. index.html is the entry file of the web page. When the browser loads this file, other related resource files will be loaded in sequence according to the reference relationship therein. Based on this loading process, the present invention injects observable JavaScript files in a timely manner. In the form of a browser plug-in, after the front-end application is released, a method of transforming the front-end application that a user is exposed to is provided, without modifying the code of the released front-end application.

[0026] Figure 1 FIG. 1 is an example diagram of an architecture of a system for establishing front-end observability on a browser side according to an embodiment of the present invention. Figure 1 As shown, the system may include establishing a server 101, a communication network 102 and / or one or more establishing clients 103. Figure 1 The example in FIG. 1 is a multiple establishment client 103 .

[0027] The establishment server 101 can be any appropriate server for storing information, data, programs and / or any other suitable type of content. In some embodiments, the establishment server 101 can perform appropriate functions. For example, in some embodiments, the establishment server 101 can be used to establish front-end observability on the browser side. As an optional example, in some embodiments, the establishment server 101 can be used to: perform web page loading detection and basic information collection when the browser loads a web page, and determine whether it is necessary to intercept the entry file of the current web page based on the collected basic information; when it is necessary to intercept the entry file of the current web page, inject the JS file of the front-end observability client into the intercepted entry file of the current web page; in the process of loading the current web page, perform the initialization of the front-end observable client by loading the entry file of the JS file that has been injected into the front-end observable client; after the initialization of the front-end observable client is completed, send a notification of successful injection and loading of the front-end observable client to the user.

[0028] As another example, in some embodiments, the establishment server 101 can send a method for establishing front-end observability on the browser side to the establishment client 103 for user use based on the request of the establishment client 103.

[0029] As an optional example, in some embodiments, the establishment client 103 is used to provide a visual establishment interface, which is used to receive a user's selection input operation for establishing front-end observability on the browser side, and, in response to the selection input operation, obtain an establishment interface corresponding to the option selected by the selection input operation from the establishment server 101 and display the establishment interface, wherein at least information on establishing front-end observability on the browser side and operation options for establishing the front-end observability on the browser side are displayed in the establishment interface.

[0030] In some embodiments, the communication network 102 can be any suitable combination of one or more wired and / or wireless networks. For example, the communication network 102 can include any one or more of the following: the Internet, an intranet, a wide area network (WAN), a local area network (LAN), a wireless network, a digital subscriber line (DSL) network, a frame relay network, an asynchronous transfer mode (ATM) network, a virtual private network (VPN), and / or any other suitable communication network. The establishment client 103 can be connected to the communication network 102 via one or more communication links (e.g., communication link 104), and the communication network 102 can be linked to the establishment service end 101 via one or more communication links (e.g., communication link 105). The communication link can be any communication link suitable for transmitting data between the establishment client 103 and the establishment service end 101, such as a network link, a dial-up link, a wireless link, a hard-wired link, any other suitable communication link, or any suitable combination of such links.

[0031] Establishing client 103 may include presenting an interface related to establishing front-end observability on the browser side in an appropriate form for any one or more clients for user use and operation. In some embodiments, establishing client 103 may include any suitable type of device. For example, in some embodiments, establishing client 103 may include a mobile device, a tablet computer, a laptop computer, a desktop computer, and / or any other suitable type of client device.

[0032] Although the setup server 101 is illustrated as one device, in some embodiments, any suitable number of devices may be used to perform the functions performed by the setup server 101. For example, in some embodiments, multiple devices may be used to implement the functions performed by the setup server 101. Alternatively, the functions of the setup server 101 may be implemented using a cloud service.

[0033] Based on the above system, an embodiment of the present invention provides a method for establishing front-end observability on the browser side, which is illustrated by the following embodiment.

[0034] Figure 2 The present invention is a flowchart of a method for establishing front-end observability on a browser side according to an embodiment of the present invention. The method for establishing front-end observability on a browser side in this embodiment can be executed on an establishment server side, and the method for establishing front-end observability on a browser side includes the following steps: Step S201: When a browser loads a web page, a web page loading detection and basic information collection are performed, and it is determined whether the entry file of the current web page needs to be intercepted based on the collected basic information.

[0035] As an optional example, in this embodiment, when the browser loads a web page, it detects whether the current web page starts loading. When it is detected that the web page starts loading, the domain name information of the currently loading web page and the user configuration information of the browser are obtained.

[0036] After obtaining the domain name information of the currently loading web page and the user configuration information of the browser, this embodiment determines the domain name range for which the user enables observability of the web page based on the user configuration information of the browser, and determines the domain name of the currently loading web page based on the domain name information of the currently loading web page; determines whether the domain name of the currently loading web page belongs to the domain name range for which the user enables observability of the web page, and if the domain name of the currently loading web page belongs to the domain name range for which the user enables observability of the web page, determines that the entry file of the current web page needs to be intercepted. For example, this embodiment performs internal logical judgment based on the domain name information of the currently loading web page and the user configuration information of the browser. For example, if the user configures to enable observability for all web pages under a specific domain name, and the domain name of the currently loading web page just meets this condition, then the plug-in will decide to perform the injection operation; otherwise, no injection will be performed.

[0037] Step S202: When the entry file of the current web page needs to be intercepted, the JS file of the front-end observability client is injected into the entry file of the intercepted current web page.

[0038] As an optional example, this embodiment adds JS code at the end of the JS file of the front-end observability client, and injects the JS file with the added JS code into the mandatory execution part of the entry file of the current web page. For example, in actual applications, when it is necessary to inject the JS file of the front-end observability client into the entry file of the intercepted current web page, add key code at the end of the JS file of the observability platform SDK.

[0039] It should be noted that in this embodiment, the logic for making decisions based on the domain name and user configuration information must be accurate. If the judgment is wrong, the observability JavaScript file may be injected into a web page that should not be injected, or the injected web page may not be injected, affecting the observability effect. The injection operation needs to be performed at the appropriate stage of web page loading to ensure that the observability JavaScript file can be correctly parsed and executed, which requires a deep understanding and precise control of the web page loading process.

[0040] Step S203: During the process of loading the current web page, the initialization of the front-end observability client is performed by loading the entry file of the JS file that has been injected into the front-end observability client.

[0041] As an optional example, this embodiment obtains the protocol of the currently loaded web page, and uses the corresponding window event to listen to the injection event of the JS file according to the obtained protocol of the currently loaded web page. When the injection event of the monitored JS file is triggered and contains a valid data source identifier, the initialization of the front-end observable client is executed. In actual applications, the valid data source identifier is used to identify the data source of the observable platform. It should be noted that when loading the entry file of the current web page, this embodiment executes the initialization of the front-end observable client by loading and running the JS code.

[0042] Step S204: After the front-end observable client is initialized, a notification of successful injection and loading of the front-end observable client is sent to the user.

[0043] As an optional example, this embodiment displays a notification of successful injection and loading of the front-end observable client to the user through the browser's window event distribution.

[0044] In actual application, this embodiment implements the corresponding interactive interface and interactive functions through the interactive script of the browser plug-in.

[0045] For example, this embodiment implements the user interface and functions through an interactive script of a browser plug-in (such as popup.js of a Chrome plug-in).

[0046] In this embodiment, the interface update function (such as updateUI) can be used to update the display content of the interface elements according to the current state of the plug-in, including status text, architecture text, etc. And according to the observability status, such as whether injection is supported, whether it has been injected, etc., the availability of interface elements (such as injection buttons and automatic injection checkboxes) is controlled. The real-time update of the status is realized through the status update function (such as updateStatus), the browser's tab query mechanism is used to detect the current active tab, and then the status information is obtained by communicating with the web content script, and the automatic injection site list is obtained from the browser storage at the same time, and updated according to the current domain name and checkbox status. When the injection button is clicked, the operation of switching the observability client injection is also performed by communicating with the web content script, and when the state of the automatic injection checkbox changes, the value of the automatic injection site list in the storage is updated accordingly. In addition, the plug-in also sets a polling mechanism that updates the status information every 5 seconds, and clears the polling instance when the window is uninstalled. Through the above operations, this embodiment can flexibly control the injection and management of the observability client JS file according to the needs of the user, thereby providing a more personalized and efficient user experience.

[0047] The following is a detailed description of the method and system for establishing front-end observability on the browser side in this embodiment in a specific scenario: This embodiment implements the method through a browser plug-in. The user installs the browser plug-in based on the method of this embodiment and configures the domain name that needs to be injected into the observable client in the plug-in. This embodiment implements the observable capability expansion with the assistance of the browser plug-in. Compared with the technical solutions of dynamic injection at the gateway level and re-transformation of the project, injecting observable capabilities through the browser plug-in can avoid the intrusion of the source into the project, and can achieve more controllable and customized observable capability expansion from the user's perspective.

[0048] This embodiment selects a browser plug-in and implements the function of implementing customized observability with domain name information in the browser plug-in. Specifically, this embodiment builds a browser plug-in (taking the Chrome browser plug-in as an example) to establish front-end observability on the user's browser side. The working mechanism of this plug-in is as follows: When the browser starts to load a web page, the plug-in performs two checks: 1. Whether the web page is loaded; 2. The domain name of the current web page; if the current web page starts to load, and the domain name of the current web page is the one that the user needs to load the front-end observability client, the plug-in will intercept the entry file of the web page (such as index.html); the browser plug-in will inject the JavaScript file of the front-end observability client (such as Sentry's browser SDK) into the mandatory part (such as the header of the html file) of the entry file of the web page (such as index.html); when the web page starts to load, the entry file of the web page will be loaded first, and the entry file contains the observability client file, which causes the loading process to hit the JS code of the front-end observable client and start running, realizing the initialization of the front-end observable client; after the initialization is completed, the browser event distribution mechanism is used to notify the browser plug-in that the injection and loading of the front-end observable client are completed; the browser plug-in shows the user that the injection and loading of the front-end observable client are completed; the front-end observable client actually starts to operate and continuously reports data.

[0049] In practical applications, the method and system for establishing front-end observability on the browser side of this embodiment has the following beneficial technical effects: 1. High flexibility. For projects that have already been launched, there is no need to modify or recompile the original front-end project code. You can add or adjust the observability configuration at any time according to actual needs. For example, if you find that there are many problems with web pages under a specific domain name within a certain period of time, and detailed monitoring is required, you can quickly add observability to these web pages by simply modifying the user configuration of the plug-in; for projects that do not integrate the observability SDK during the compilation phase, temporary observability requirements can also be easily implemented on the browser side without affecting the normal operation of the project.

[0050] 2. Easy to operate. Users only need to install a browser plug-in and perform simple configuration (such as specifying the domain name to which observability needs to be added) to implement complex front-end observability addition work. Users are not required to have in-depth front-end development knowledge and understanding of the project building process, which lowers the threshold for achieving front-end observability.

[0051] 3. High efficiency. Since the injection operation of the plug-in is performed on the browser side and does not depend on the compilation process of the front-end project, it can quickly respond to changes in observability requirements and significantly improve work efficiency. Especially when dealing with emergencies, it can quickly achieve observability on the browser side, providing strong support for quickly locating and solving problems.

[0052] like Figure 3 As shown, the present invention also provides a device, including a processor 310, a communication interface 320, a memory 330 for storing a computer program executable by the processor, and a communication bus 340. The processor 310, the communication interface 320, and the memory 330 communicate with each other through the communication bus 340. The processor 310 implements the above-mentioned method of establishing front-end observability on the browser side by running the executable computer program.

[0053] Among them, the computer program in the memory 330 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0054] The system embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, i.e., they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected based on actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art may understand and implement it without creative effort.

[0055] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods of each embodiment or some parts of the embodiment.

[0056] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A method for establishing front-end observability on the browser side, characterized in that: The method comprises: When the browser loads a web page, it performs web page loading detection and basic information collection, and determines whether the entry file of the current web page needs to be intercepted based on the collected basic information; When the entry file of the current web page needs to be intercepted, inject the JS file of the front-end observability client into the entry file of the intercepted current web page; During the loading of the current web page, the front-end observability client is initialized by loading the entry file of the JS file that has been injected into the front-end observability client; After the front-end observable client is initialized, a notification is sent to the user that the front-end observable client has been successfully injected and loaded.

2. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: When the browser loads a web page, web page loading detection and basic information collection are performed, including: when the browser loads a web page, detecting whether the current web page has started loading, and when it is detected that the web page has started loading, obtaining the domain name information of the currently loading web page and the user configuration information of the browser.

3. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: Determine whether to intercept the entry file of the current web page based on the collected basic information, including: Determine the domain name range for which the user enables observability of web pages according to the user configuration information of the browser, and determine the domain name of the web page currently being loaded according to the domain name information of the web page currently being loaded; Determine whether the domain name of the currently loading web page belongs to the domain name range for which the user has enabled web page observability. If the domain name of the currently loading web page belongs to the domain name range for which the user has enabled web page observability, determine that the entry file of the current web page needs to be intercepted.

4. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: Inject the JS file of the front-end observability client into the entry file of the intercepted current web page, including: adding JS code at the end of the JS file of the front-end observability client, and injecting the JS file with the added JS code into the mandatory execution part of the entry file of the current web page.

5. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: During the process of loading the current web page, the initialization of the front-end observable client is executed by loading the entry file of the JS file that has been injected into the front-end observability client, including: obtaining the protocol of the currently loaded web page, using the corresponding window event to listen to the injection event of the JS file according to the acquired protocol of the currently loaded web page, and when the injection event of the JS file is triggered and contains a valid data source identifier, the initialization of the front-end observable client is executed.

6. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: The initialization of the front-end observable client is performed by loading the entry file of the JS file that has been injected into the front-end observability client, and also includes: when loading the entry file of the current web page, the initialization of the front-end observable client is performed by loading and running the JS code.

7. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: After the front-end observable client is initialized, a notification of successful injection and loading of the front-end observable client is sent to the user, including: displaying a notification of successful injection and loading of the front-end observable client to the user through the browser's window event distribution.

8. The method for establishing front-end observability on the browser side according to claim 1, characterized in that: The method further comprises: realizing the corresponding interactive interface and interactive function through the interactive script of the browser plug-in.

9. A system for establishing front-end observability on the browser side, characterized in that: The system includes an establishment server, which is used to: perform web page loading detection and basic information collection when the browser loads a web page, and determine whether the entry file of the current web page needs to be intercepted according to the collected basic information; When the entry file of the current web page needs to be intercepted, inject the JS file of the front-end observability client into the entry file of the intercepted current web page; During the loading of the current web page, the initialization of the front-end observable client is performed by loading the entry file of the JS file that has been injected into the front-end observable client; after the initialization of the front-end observable client is completed, a notification of successful injection and loading of the front-end observable client is sent to the user.

10. A computer device, characterized in that: The computer device comprises a memory, a processor and a computer program stored in the memory and executable on the processor, and the processor implements the steps of the method according to any one of claims 1 to 8 when executing the program.

Images