Micro front-end performance monitoring method, device, equipment and storage medium

Abstract

The present disclosure relates to the field of software processing technology, and in particular to a micro-frontend performance monitoring method, device, equipment and storage medium. The method includes: obtaining application switching information that switches to a target application in the micro-frontend; when the application switching information triggers a historical proxy function, obtaining resources requested by the target application, wherein the historical proxy function is formed by a first hook function proxy historical record interface, and the historical record interface is used to record routing changes when the application is switched in the micro-frontend; and performing performance analysis on the resources to obtain performance monitoring data of the target application. The present disclosure is used to solve the defect in the prior art that performance monitoring cannot be performed when the application is switched in the micro-frontend, and to achieve performance monitoring when the application is switched in the micro-frontend.

Description

Technical Field

[0001] The present disclosure relates to the field of software processing technology, and in particular to a micro-front-end performance monitoring method, device, equipment and storage medium. Background Art

[0002] The network performance of the front-end is an important factor affecting the user retention rate. At present, micro-front-end applications are a major trend in the Internet industry. However, the performance monitoring technology in the existing technology is aimed at multi-page applications, relying on the navigation timing standard to record the performance data of the multi-page application page during the initial loading or deep refresh process. However, when the application in the micro-front-end is switched, the page reload will not be triggered, and the performance data cannot be obtained in time when the application is switched, and the problems with the micro-front-end network performance cannot be discovered in time, resulting in a poor user experience of the micro-front-end. Summary of the invention

[0003] The present disclosure provides a micro-frontend performance monitoring method, device, equipment and storage medium, which are used to solve the defect in the prior art that performance monitoring cannot be performed when applications in the micro-frontend are switched, and to realize performance monitoring when applications in the micro-frontend are switched.

[0004] The present disclosure provides a micro-frontend performance monitoring method, comprising: obtaining application switching information switched to a target application in the micro-frontend; when the application switching information triggers a history proxy function, obtaining resources requested by the target application, wherein the history proxy function is formed by a first hook function proxy history record interface, and the history record interface is used to record routing changes when the application in the micro-frontend is switched; performing performance analysis on the resources to obtain performance monitoring data of the target application.

[0005] According to a micro-frontend performance monitoring method provided by the present disclosure, when the application switching information triggers the historical proxy function, the resources requested by the target application are obtained, including: when the application switching information triggers the historical proxy function, the resource acquisition proxy function is called, wherein the resource acquisition proxy function is formed by a second hook function proxy resource acquisition interface, and the resource acquisition interface is used for the target application in the micro-frontend to obtain resources from the backend; through the resource acquisition proxy function, the resources requested by the target application are obtained.

[0006] According to a micro-frontend performance monitoring method provided by the present disclosure, the performance analysis of the resources is performed to obtain the performance monitoring data of the target application, including: when the resource acquisition proxy function generates resource loading end information, calling the performance monitoring proxy function, wherein the performance monitoring proxy function is formed by a third hook function proxy performance monitoring interface, and the performance monitoring interface is used to monitor the document object model structure changes; through the performance monitoring proxy function, the structural changes of the document object model in the resource are analyzed to obtain the performance monitoring data of the target application.

[0007] According to a micro-frontend performance monitoring method provided by the present disclosure, when the application switching information triggers the historical proxy function, the resource acquisition proxy function is called, including: when the application switching information triggers the historical proxy function, the uniform resource location address of the target application is obtained; after determining that the uniform resource location address contains a preset interest tag, the resource acquisition proxy function is called, wherein the interest tag is a tag indicating a resource loading operation.

[0008] According to a micro-frontend performance monitoring method provided by the present disclosure, while calling the resource acquisition proxy function, it also includes: starting a timer to count the execution time of the resource loading operation; when the resource acquisition proxy function generates resource loading end information, calling the performance monitoring proxy function, including: when the execution time reaches a first preset time, clearing the timer to determine whether the resource loading operation is completed, and if so, calling the performance monitoring proxy function according to the resource loading end information generated by the resource acquisition proxy function; if not, starting the timer again to count the execution time.

[0009] According to a micro-frontend performance monitoring method provided by the present disclosure, after performing performance analysis on the resources and obtaining the performance monitoring data of the target application, it also includes: determining the application type of the target application according to the routing rules of the unified resource location address of the target application, wherein the application type includes a main application and a sub-application; and saving the performance monitoring data of the target application in correspondence with the application type.

[0010] According to a micro-frontend performance monitoring method provided by the present disclosure, after performing performance analysis on the resources and obtaining the performance monitoring data of the target application, it also includes: obtaining the resource domain name of the target application according to the uniform resource location address of the target application; determining the application type of the target application according to the resource domain name, wherein the application type includes a main application and a sub-application; and saving the performance monitoring data of the target application in correspondence with the application type.

[0011] The present disclosure also provides a micro-frontend performance monitoring device, including: a first acquisition module, used to obtain application switching information switched to a target application in the micro-frontend; a second acquisition module, used to obtain resources requested by the target application when the application switching information triggers a historical proxy function, wherein the historical proxy function is formed by a first hook function proxy historical record interface, and the historical record interface is used to record routing changes when the application in the micro-frontend is switched; an analysis module, used to perform performance analysis on the resources and obtain performance monitoring data of the target application.

[0012] The present disclosure also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the steps of any of the micro-front-end performance monitoring methods described above are implemented.

[0013] The present disclosure also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the micro-frontend performance monitoring methods described above.

[0014] The micro-frontend performance monitoring method, device, equipment and storage medium provided by the present disclosure form a history proxy function through a first hook function proxy history record interface, wherein the routing changes caused by application switching in the micro-frontend are recorded by the history record interface. When the application switching information switching to the target application in the micro-frontend is obtained, the application switching information will trigger the history proxy function. When the history proxy function is triggered, the resources requested by the target application are obtained, and the performance monitoring data of the target application is obtained by analyzing the resources. In other words, through the history proxy function, when the application in the micro-frontend is switched, the performance monitoring process can be started, and the performance monitoring when the application in the micro-frontend is switched can be realized. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0016] Figure 1 This is one of the flow charts of the micro-frontend performance monitoring method provided by the present disclosure;

[0017] Figure 2 This is the second flow chart of the micro-frontend performance monitoring method provided by the present disclosure;

[0018] Figure 3 It is a structural schematic diagram of the micro-front-end performance monitoring device provided by the present disclosure;

[0019] Figure 4 It is a schematic diagram of the structure of an electronic device provided by the present disclosure. DETAILED DESCRIPTION

[0020] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all of the embodiments. Based on the embodiments in the embodiments of the present disclosure, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the embodiments of the present disclosure.

[0021] Network performance affects user retention rate, for example, the loading performance of World Wide Web (web) pages. Studies have shown that if a mobile page takes more than 3 seconds to load, users will give up and leave; and for every 1 second increase in the web page loading time, 10% of users will be lost. We hope to know the current status and trends of web application performance through monitoring. In view of the particularity of micro-frontend applications, the present disclosure provides a micro-frontend performance monitoring method to achieve performance monitoring of micro-frontend applications. This method can be implemented by a software algorithm, and the software algorithm is implemented in a processing device such as a server, a computer, and a processor, and the processing device can obtain relevant data of the micro-frontend. The following is combined with Figure 1-Figure 2 The micro-frontend performance monitoring method provided by an embodiment of the present disclosure is described.

[0022] In one embodiment, if Figure 1 As shown in the figure, the process steps of the micro-frontend performance monitoring method are as follows:

[0023] Step 101, obtain application switching information of switching to the target application in the micro front end.

[0024] In this embodiment, the overall architecture is composed of multiple independently delivered front-end applications to form a micro front-end. The micro front-end includes a main application and at least one sub-application. The sub-applications are integrated through the main application, and the applications are independently deployed. When the application in the micro front-end is switched, it will not trigger the reloading of the page, but the application switching will cause some changes in application-related information, such as changes in the uniform resource location address, etc., and the application switching information can be extracted from these changes.

[0025] Step 102, when the application switching information triggers the historical proxy function, obtain the resources requested by the target application, wherein the historical proxy function is formed by the first hook function proxy historical record interface, and the historical record interface is used to record the routing changes when the application is switched in the micro front end.

[0026] In this embodiment, a history proxy function is constructed in advance through the first hook function and the history record interface. The history record interface is an application programming interface (Application Programming Interface, API) for recording route changes when the application in the micro front end is switched. Specifically, the history record interface under the Windows operating system is the window.history interface. The window.history interface is used to save the user's website access records during a session. Each time the user visits a new uniform resource locator (URL) address (that is, the route changes once), a new history record is created. Application switching in the micro front end causes route changes, that is, the URL address corresponding to the application before the switch and the application after the switch is different. The resource acquisition proxy function is formed by proxying the window.history interface through the first hook function, expressed as proxyHistory.

[0027] The hook function is part of the Windows message processing mechanism. By setting the hook function, the application can filter all messages and events at the system level and access messages that are inaccessible under normal circumstances. The essence of the hook function is a program for processing system messages. The hook function is hooked into the system through system calls.

[0028] The first hook function proxies the history record interface to form a history proxy function. When the application in the micro front end switches, the change of the URL address causes the history record interface to operate, thereby triggering the history proxy function. In other words, when the history proxy function is triggered, it indicates that there is an application switching action in the micro front end at this time. When the history proxy function is triggered, it indicates that the application in the micro front end switches to the target application, and the resources requested by the target application are obtained to monitor the performance of the target application.

[0029] Step 103: Perform performance analysis on the resources to obtain performance monitoring data of the target application.

[0030] In this embodiment, after obtaining the resource requested by the target application, the performance analysis of the resource is performed to obtain the performance monitoring data of the target application.

[0031] In one embodiment, when acquiring resources of a target application, a resource acquisition proxy function is used. Specifically, when application switching information triggers a historical proxy function, the resources requested by the target application are acquired. The implementation process is as follows: when application switching information triggers a historical proxy function, the resource acquisition proxy function is called, wherein the resource acquisition proxy function is formed by the second hook function proxying a resource acquisition interface, and the resource acquisition interface is used for the target application in the micro front end to acquire resources from the back end; through the resource acquisition proxy function, the resources requested by the target application are acquired.

[0032] In this embodiment, the target application in the micro front end needs to obtain resources through the resource acquisition interface. Based on the specific implementation method of the micro front end, the implementation form of the resource acquisition interface supported by the micro front end is also different. For example, the specific implementation form of the resource acquisition interface under the Windows operating system can be window.XMLHttpRequest or window.fetch as needed. The second hook function proxies window.XMLHttpRequest to form a resource acquisition proxy function, expressed as proxyXMLHttpRequest; or, the second hook function proxies window.fetch to form a resource acquisition proxy function, expressed as proxyFetch.

[0033] When the historical proxy function is triggered, it means that an application switch has occurred in the micro frontend, and the pre-set resource acquisition proxy function is called to obtain the resources requested by the target application.

[0034] In one embodiment, after obtaining the resource requested by the target application through the resource acquisition proxy function, the performance monitoring data of the target application is obtained through the performance monitoring proxy function. Specifically, the performance analysis of the resource is performed to obtain the performance monitoring data of the target application. The implementation process is as follows: when the resource acquisition proxy function generates the resource loading end information, the performance monitoring proxy function is called, wherein the performance monitoring proxy function is formed by the third hook function proxy performance monitoring interface, and the performance monitoring interface is used to monitor the document object model structure changes; through the performance monitoring proxy function, the structural changes of the document object model in the resource are analyzed to obtain the performance monitoring data of the target application. Among them, the resource loading end information indicates that the resource loading operation has been completed.

[0035] In this embodiment, a performance monitoring proxy function is formed in advance through a third hook function and a performance monitoring interface. The performance monitoring interface is used to monitor changes in the Document Object Model (DOM) structure. Specifically, the performance monitoring interface under the Windows operating system is the MutationObserver interface. All monitoring operations and corresponding processing of MutationObserve are performed asynchronously after other scripts are executed, and after all changes are triggered, they will be recorded in an array and called back uniformly. That is to say, when MutationObserver is used to monitor at least one DOM change, and each DOM has changed, then MutationObserve will record the changes in the change array, wait until everything is over, and then execute its corresponding callback function from the change array at one time. The performance monitoring proxy function is formed by proxying the MutationObserver interface through the third hook function, which is expressed as proxyMutationObserver.

[0036] In this embodiment, when all resources requested by the target application are loaded, the resource acquisition proxy function generates resource loading completion information. When the resource loading completion information is generated, the performance monitoring proxy function is triggered to analyze the resources requested by the target application, that is, to analyze the structural changes of the DOM in the resource, and then obtain the performance monitoring data of the target application.

[0037] In one embodiment, the performance monitoring of the micro-frontend is mainly aimed at the situation where the micro-frontend requests resources. Therefore, in order to simplify the processing flow and avoid wasting processing resources, the resource acquisition proxy function is called through the interest tag during the performance monitoring process. Specifically, when the application switching information triggers the historical proxy function, the resource acquisition proxy function is called. The specific implementation process is: when the application switching information triggers the historical proxy function, the uniform resource location address of the target application is obtained; after determining that the uniform resource location address contains a preset interest tag, the resource acquisition proxy function is called, wherein the interest tag is a tag indicating a resource loading operation.

[0038] In this embodiment, when the application switching causes the history proxy function to be triggered, the uniform resource location address (URL address) of the target application after the switching is obtained. If the target application requests resources from the backend, the URL address will have tags indicating resource loading operations, such as img, iframe, image, link (stylesheet), src, href, etc.

[0039] Among them, img refers to a format of image file. The URL address of the target application contains an img tag, indicating that the target application has requested image resources; iframe refers to page nesting. The iframe tag is used to specify an inline frame. An inline frame is used to embed another document in the current Hyper Text Markup Language (HTML) document. The URL address of the target application contains an iframe tag, indicating that the target application has requested document resources; the link tag is used to define the relationship between the document and the external resource, that is, it is used to link the style sheet. The URL address of the target application contains a link tag, indicating that the target application has requested resources from the outside through the document; src refers to the abbreviation of source, pointing to the location of the external resource, and the content pointed to will be applied to the location of the current tag in the document. src is used to specify the URL of the audio resource to be played; href (Hypertext Reference) specifies the location of the network resource, thereby defining a link or relationship between the current element or current document and the required anchor or resource defined by the current attribute. href is used to specify the URL of the hyperlink target resource.

[0040] Of course, the specific type of the interest tag may also be determined according to actual conditions and / or specific needs, and the protection scope of the present application is not limited to the specific type of the interest tag.

[0041] In this embodiment, by determining whether the URL address contains an interest tag, it is determined whether the target application after switching will trigger a resource loading operation. If the URL address contains a preset interest tag, the resource acquisition proxy function is called to analyze the resources requested by the target application to obtain performance monitoring data; if the URL address does not contain a preset interest tag, it means that the target application after switching has not loaded resources, and the resource acquisition proxy function is not called. The above process avoids the situation where the target application does not request resources, but still calls the resource acquisition proxy function, resulting in a waste of processing resources, saving processing resources and improving the efficiency of the micro-frontend performance monitoring process.

[0042] In one embodiment, in order to further improve the efficiency of micro-frontend performance monitoring, a timer is used to monitor the progress of resource loading operations. Specifically, while calling the resource acquisition proxy function, a timer is started to count the execution time of the resource loading operation; when the resource acquisition proxy function generates resource loading end information, the performance monitoring proxy function is called. The implementation process is as follows: when the execution time reaches a first preset time, the timer is cleared to determine whether the resource loading operation is completed. If so, the performance monitoring proxy function is called according to the resource loading end information generated by the resource acquisition proxy function; if not, the timer is started again to count the execution time.

[0043] In this embodiment, there may be data delays and the like during the process of the target application requesting resources. After calling the resource acquisition proxy function, the performance monitoring proxy function needs to perform performance analysis after all resource requests are completed. The first preset duration is periodically timed by a timer to periodically obtain the resources requested by the target application through the resource acquisition proxy function. Whether the resource loading operation is completed is determined by taking the first preset duration as a period. When the target application resource loading operation is completed, the performance monitoring proxy function is immediately called to perform performance analysis, clarify the timing of the function call, and avoid wasting processing resources.

[0044] In one embodiment, a second preset duration is pre-set to implement a delay buffer for the resource loading operation. Preferably, the second preset duration can be set to any duration between 50 milliseconds and 100 milliseconds. Specifically, the timer is started to count the execution duration of the resource loading operation. The implementation process is as follows: start the timer to accumulate the observation duration; through the resource acquisition proxy function, determine whether the resource loading operation is executed. If so, reset the timer and start the timer again to count the execution duration of the resource loading operation; if not, when it is determined that the observation duration reaches the second preset duration, reset the timer to end this performance monitoring process.

[0045] In this embodiment, setting the second preset duration is equivalent to setting a buffer time for the process of determining whether the resource loading operation is completed, so as to avoid incomplete monitoring data due to delays in the operation.

[0046] In a specific example, the first preset duration is set to 1 second, and the second preset duration is set to 50 milliseconds. When the resource acquisition proxy function is called, first observe whether the resource loading operation is executed within 50ms. If the resource loading operation is not executed within 50 milliseconds, the performance monitoring process is terminated directly, and performance monitoring data without resource loading can be generated at the same time; if the resource loading operation is executed within 50 milliseconds, monitor whether the resource loading operation is completed in a cycle of 1 second. After determining that the operation is completed, terminate the call of the resource acquisition proxy function, and proceed to the next step of calling the performance monitoring proxy function for performance analysis.

[0047] In one embodiment, after obtaining the performance monitoring data of the target application, the performance monitoring data needs to be saved. At this time, the performance monitoring data needs to be classified and stored according to the type of the target application. Specifically, after the performance analysis of the resources is performed and the performance monitoring data of the target application is obtained, the application type of the target application is determined according to the routing rules of the unified resource location address of the target application, where the application type includes the main application and the sub-application; the performance monitoring data of the target application is saved corresponding to the application type.

[0048] In this embodiment, when the application is switched in the micro front end, the URL address changes. After the application is switched, the URL address conforms to the predetermined routing rules. A key-value pair of application type and routing rule is preset, with the application type as the key and the routing rule as the value. Specifically, the application type includes the main application and the sub-application. Based on the target application URL address obtained in the above embodiment, or by separately obtaining the URL address of the target application, the application type of the target application is determined. When the routing rule of the target application URL address after switching belongs to the main application, the performance monitoring data of the target application is saved and saved corresponding to the main application. When the routing rule of the target application URL address after switching belongs to the sub-application, the performance monitoring data of the target application is saved and saved corresponding to the sub-application. Specifically, the storage area of ​​the main application and the sub-application is pre-set. When the routing rule of the target application URL address belongs to the main application, the performance monitoring data of the target application is stored in the storage area corresponding to the main application; when the routing rule of the target application URL address belongs to the sub-application, the performance monitoring data of the target application is stored in the storage area corresponding to the sub-application.

[0049] In one embodiment, when classifying and storing performance monitoring data, it can also be implemented based on resource domain names. Specifically, after the performance analysis of the resources is performed to obtain the performance monitoring data of the target application, the resource domain name of the target application is obtained based on the unified resource location address of the target application; the application type of the target application is determined based on the resource domain name, where the application type includes a main application and a sub-application; and the performance monitoring data of the target application is saved corresponding to the application type.

[0050] In this embodiment, the main application and the sub-application are independently deployed microservices. The corresponding resource domain name and resource transmission path when each application obtains resources are different. The resource domain name can be extracted from the URL address of the target application. A key-value pair of application type and resource domain name is pre-set, with the application type as the key and the resource domain name as the value. Specifically, based on the target application URL address obtained in the above embodiment, or by separately obtaining the URL address of the target application, the resource domain name corresponding to the target application is extracted. When the target application requests resource data, if the corresponding resource domain name belongs to the main application, the performance monitoring data of the target application is saved in correspondence with the main application. When the target application requests resource data, if the corresponding resource domain name belongs to the sub-application, the performance monitoring data of the target application is saved in correspondence with the sub-application. Specifically, the storage areas of the main application and the sub-application are pre-set. When the resource domain name corresponding to the target application belongs to the main application, the performance monitoring data of the target application is stored in the storage area corresponding to the main application; when the resource domain name corresponding to the target application belongs to the sub-application, the performance monitoring data of the target application is stored in the storage area corresponding to the sub-application.

[0051] In the above embodiment, the performance monitoring data of the main application and the sub-application are classified and stored to facilitate subsequent further processing of the data.

[0052] In a specific embodiment, Figure 2 As shown in the figure, the specific process of implementing the micro-frontend performance monitoring method is as follows:

[0053] When switching to the target application within the micro front end, application switching will cause a routing change, that is, the current URL address switches to the URL address of the target application. The probe of the operating environment of this method captures the application switching information generated by the routing change, and then triggers the historical proxy function. This embodiment monitors the interest nodes marked by the interest tag, that is, after determining that the URL address of the target application contains the interest tag, the resource acquisition proxy function is called. When the historical proxy function is triggered, and under the interest tag, when the target application requests a resource, the resource acquisition proxy function (proxyXMLHttpRequest or proxyFetch) is triggered. Figure 2 In the example, XHR or Fetch represents the process of resource acquisition. During the resource loading operation, any duration between 50ms and 100ms is used as the second preset duration, for example, the second preset duration is 50ms, to achieve a call delay of the performance monitoring proxy function, so as to avoid the consequence of missing loading data and causing incomplete performance monitoring results. If the resource loading operation is not performed within 50ms, the performance monitoring process is directly terminated, and performance monitoring data without resource loading can be generated at the same time; if the resource loading operation is performed within 50 milliseconds, the first preset duration is used as a period, for example, the first preset duration is 1s, and the resource loading operation is periodically observed to see whether it is completed until it is determined that all resources have been loaded, and then the performance monitoring proxy function is called to perform performance analysis and obtain performance monitoring data. The resource acquisition proxy function is combined with the performance analysis proxy function, and the resources obtained by the resource acquisition proxy function are analyzed through the performance monitoring proxy function, and finally the performance monitoring data of the target application is obtained.

[0054] After the performance monitoring data is obtained, the performance monitoring data is reported to the storage device, and the performance monitoring data is saved according to the application type of the target application. The performance monitoring process of the target application in the micro front end is completed.

[0055] The micro-frontend performance monitoring method provided by the present disclosure forms a history proxy function through a first hook function proxy history record interface, wherein the routing changes caused by application switching in the micro-frontend are recorded by the history record interface. When the application switching information of switching to the target application in the micro-frontend is obtained, the application switching information will trigger the history proxy function. When the history proxy function is triggered, the resources requested by the target application are obtained, and the performance monitoring data of the target application is obtained by analyzing the resources. In other words, through the history proxy function, the performance monitoring process can be started when the application in the micro-frontend is switched, so as to realize the performance monitoring when the application in the micro-frontend is switched.

[0056] The micro-frontend performance monitoring device provided by the embodiment of the present disclosure is described below. The micro-frontend performance monitoring device described below and the micro-frontend performance monitoring method described above can be referred to each other, and the repeated parts will not be repeated. Figure 3 As shown, the micro front-end performance monitoring device includes:

[0057] The first acquisition module 301 is used to obtain application switching information switched to the target application in the micro front end;

[0058] The second acquisition module 302 is used to acquire the resources requested by the target application when the application switching information triggers the history proxy function, wherein the history proxy function is formed by the first hook function proxy history record interface, and the history record interface is used to record the routing changes when the application is switched in the micro front end;

[0059] The analysis module 303 is used to perform performance analysis on resources and obtain performance monitoring data of the target application.

[0060] In one embodiment, the second acquisition module 302 is specifically used to call the resource acquisition proxy function when the application switching information triggers the historical proxy function, wherein the resource acquisition proxy function is formed by the second hook function proxy resource acquisition interface, and the resource acquisition interface is used for the target application in the micro front end to obtain resources from the back end; through the resource acquisition proxy function, the resources requested by the target application are obtained.

[0061] In one embodiment, the analysis module 303 is specifically used to call the performance monitoring proxy function when the resource acquisition proxy function generates resource loading completion information, wherein the performance monitoring proxy function is formed by the third hook function proxy performance monitoring interface, and the performance monitoring interface is used to monitor the document object model structure changes; through the performance monitoring proxy function, the structural changes of the document object model in the resource are analyzed to obtain the performance monitoring data of the target application.

[0062] In one embodiment, the second acquisition module 302 is specifically used to obtain the uniform resource location address of the target application when the application switching information triggers the historical proxy function; after determining that the uniform resource location address contains a preset interest tag, the resource acquisition proxy function is called, wherein the interest tag is a tag indicating a resource loading operation.

[0063] In one embodiment, the analysis module 303 is specifically used to start a timer to count the execution time of the resource loading operation while calling the resource acquisition proxy function; and is specifically used to clear the timer when the execution time reaches a first preset time, and determine whether the resource loading operation is completed. If so, call the performance monitoring proxy function according to the resource loading completion information generated by the resource acquisition proxy function; if not, start the timer again to count the execution time.

[0064] In one embodiment, the micro-front-end performance monitoring device also includes a storage module 304, which is used to perform performance analysis on resources, and after obtaining the performance monitoring data of the target application, determine the application type of the target application according to the routing rules of the unified resource location address of the target application, wherein the application type includes a main application and a sub-application; and save the performance monitoring data of the target application in correspondence with the application type.

[0065] In one embodiment, the storage module 304 is used to perform performance analysis on resources, and after obtaining the performance monitoring data of the target application, obtain the resource domain name of the target application according to the uniform resource location address of the target application; determine the application type of the target application according to the resource domain name, wherein the application type includes a main application and a sub-application; and save the performance monitoring data of the target application in correspondence with the application type.

[0066] Figure 4 An example of a physical structure diagram of an electronic device is shown in FIG. Figure 4 As shown, the electronic device may include: a processor 401, a communication interface 402, a memory 403 and a communication bus 404, wherein the processor 401, the communication interface 402 and the memory 403 complete mutual communication through the communication bus 404. The processor 401 may call the logic instructions in the memory 403 to execute the micro-frontend performance monitoring method, the method comprising: obtaining application switching information of switching to the target application in the micro-frontend; when the application switching information triggers the history proxy function, obtaining the resource requested by the target application, wherein the history proxy function is formed by the first hook function proxy history record interface, and the history record interface is used to record the route change when the application is switched in the micro-frontend; and performing performance analysis on the resources to obtain the performance monitoring data of the target application.

[0067] In addition, the logic instructions in the above-mentioned memory 403 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 such an understanding, the technical solution of the embodiment of the present disclosure is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable 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 methods of each embodiment of the present disclosure. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a disk or an optical disk.

[0068] On the other hand, the present disclosure also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer can execute the micro-frontend performance monitoring method provided by the above methods, and the method includes: obtaining application switching information within the micro-frontend to switch to a target application; when the application switching information triggers a historical proxy function, obtaining resources requested by the target application, wherein the historical proxy function is formed by a first hook function proxying a historical record interface, and the historical record interface is used to record routing changes when applications are switched within the micro-frontend; performing performance analysis on the resources to obtain performance monitoring data of the target application.

[0069] On the other hand, the present disclosure also provides a non-transitory computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, it is implemented to execute the above-mentioned micro-frontend performance monitoring methods, the method comprising: obtaining application switching information switching to a target application within the micro-frontend; when the application switching information triggers a historical proxy function, obtaining resources requested by the target application, wherein the historical proxy function is formed by a first hook function proxying a historical record interface, and the historical record interface is used to record routing changes when applications are switched within the micro-frontend; performing performance analysis on the resources to obtain performance monitoring data of the target application.

[0070] The device 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 according to actual needs to achieve the purpose of the scheme of this embodiment. Those of ordinary skill in the art may understand and implement it without creative effort.

[0071] 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, it 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.

[0072] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present disclosure, rather than to limit them. Although the present disclosure has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present disclosure.

Claims

1. A micro-frontend performance monitoring method, characterized in that: include: Obtain application switching information of switching to the target application in the micro front end, wherein the application switching information is obtained by extracting changes in a uniform resource locator address; When the application switching information triggers the history proxy function, the resources requested by the target application are obtained, wherein the history proxy function is formed by a first hook function proxy history record interface, and the history record interface is used to record the routing changes when the application is switched in the micro front end; Performing performance analysis on the resources to obtain performance monitoring data of the target application; When the application switching information triggers the historical proxy function, obtaining the resource requested by the target application includes: When the application switching information triggers the history proxy function, the resource acquisition proxy function is called, wherein the resource acquisition proxy function is formed by the second hook function proxy resource acquisition interface, and the resource acquisition interface is used by the target application in the micro front end to obtain resources from the back end; Acquire the resource requested by the target application through the resource acquisition proxy function; The performing performance analysis on the resource to obtain performance monitoring data of the target application includes: When the resource acquisition proxy function generates resource loading completion information, the performance monitoring proxy function is called, wherein the performance monitoring proxy function is formed by the third hook function proxy performance monitoring interface, and the performance monitoring interface is used to monitor the document object model structure changes; The performance monitoring data of the target application is obtained by analyzing the structural changes of the document object model in the resource through the performance monitoring proxy function.

2. The micro-frontend performance monitoring method according to claim 1 is characterized in that: When the application switching information triggers the history proxy function, calling the resource acquisition proxy function includes: When the application switching information triggers the historical proxy function, obtaining the uniform resource locator address of the target application; After determining that the uniform resource location address contains a preset interest tag, the resource acquisition proxy function is called, wherein the interest tag is a tag indicating a resource loading operation.

3. The micro-frontend performance monitoring method according to claim 2 is characterized in that: The calling of the resource acquisition proxy function also includes: Starting a timer to count the execution time of the resource loading operation; When the resource acquisition proxy function generates resource loading completion information, the performance monitoring proxy function is called, including: When the execution duration reaches a first preset duration, the timer is cleared to determine whether the resource loading operation is completed. If so, the performance monitoring proxy function is called according to the resource loading completion information generated by the resource acquisition proxy function; if not, the timer is started again to count the execution duration.

4. The micro-frontend performance monitoring method according to claim 1 is characterized in that: After the performance analysis of the resource is performed to obtain the performance monitoring data of the target application, the method further includes: Determining the application type of the target application according to the routing rule of the target application uniform resource location address, wherein the application type includes a main application and a sub-application; The performance monitoring data of the target application is saved corresponding to the application type.

5. The micro-frontend performance monitoring method according to claim 1 is characterized in that: After the performance analysis of the resource is performed to obtain the performance monitoring data of the target application, the method further includes: Acquire the resource domain name of the target application according to the uniform resource locator address of the target application; Determine the application type of the target application according to the resource domain name, wherein the application type includes a main application and a sub-application; The performance monitoring data of the target application is saved corresponding to the application type.

6. A micro front-end performance monitoring device, characterized in that: include: A first acquisition module is used to acquire application switching information of switching to a target application in the micro front end, wherein the application switching information is obtained by extracting a change in a uniform resource locator address; A second acquisition module is used to acquire the resources requested by the target application when the application switching information triggers a history proxy function, wherein the history proxy function is formed by a first hook function proxy history record interface, and the history record interface is used to record routing changes when the application is switched in the micro front end; An analysis module, used to perform performance analysis on the resources and obtain performance monitoring data of the target application; When the application switching information triggers the historical proxy function, obtaining the resource requested by the target application includes: When the application switching information triggers the history proxy function, the resource acquisition proxy function is called, wherein the resource acquisition proxy function is formed by the second hook function proxy resource acquisition interface, and the resource acquisition interface is used by the target application in the micro front end to obtain resources from the back end; Acquire the resource requested by the target application through the resource acquisition proxy function; The performing performance analysis on the resource to obtain performance monitoring data of the target application includes: When the resource acquisition proxy function generates resource loading completion information, the performance monitoring proxy function is called, wherein the performance monitoring proxy function is formed by the third hook function proxy performance monitoring interface, and the performance monitoring interface is used to monitor the document object model structure changes; The performance monitoring data of the target application is obtained by analyzing the structural changes of the document object model in the resource through the performance monitoring proxy function.

7. 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, the steps of the micro-frontend performance monitoring method as described in any one of claims 1 to 5 are implemented.

8. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the micro-frontend performance monitoring method as described in any one of claims 1 to 5 are implemented.

Images