Method and apparatus for instrumenting a front-end project

Abstract

A front-end project instrumenting method and device, the method comprising: inputting first prompt information to a large model, the first prompt information including at least source code of the front-end project, causing the large model to output a semantic index of the source code based on the first prompt information, the semantic index indicating a reference relationship between at least one page, at least one module and at least one element and a plurality of interaction events involved thereby; determining an observation object from the at least one page, the at least one module and the at least one element; locating, using the large model, a point-in-time position of a target interaction event involved by the observation object in the source code; and adding a point-in-time statement at the point-in-time position based on the reference relationship and an object identifier of the observation object.

Description

Technical Field

[0001] The embodiments in this specification pertain to the field of computers, and particularly relate to a method and apparatus for instrumenting front-end projects. Background Technology

[0002] More and more business systems are handling massive amounts of online services and business processes in their daily operations. To ensure the stability of these systems and effectively collect data on their operational status, the importance of observability is becoming increasingly prominent. By building a robust observability system, it is possible to effectively support the timely detection of traffic anomalies and provide early warnings of potential problems.

[0003] Instrumentation of the front-end projects (such as clients or one or more pages that rely on a browser) corresponding to the business system is a key step in building an observability system. Instrumentation of the front-end project allows the insertion of tracking statements into the source code of the front-end project. These tracking statements can then be used to collect and report various types of interaction events / behaviors during the operation of the business system, such as impressions, clicks, swipes, and inputs.

[0004] To achieve precise location and unified identification of these interactive events / behaviors, the industry has proposed the Super Position Model (SPM). SPM uses corresponding coding rules to digitally identify different pages, modules, and elements within the same front-end project. A typical SPM identifier uses an ordered four-field structure, corresponding sequentially to the front-end project, page, module, and element. SPM identifiers are used to digitally define and effectively identify the page structure and view components of each page included in a front-end project, providing precise location data for data collection and behavior observation in the back-end system.

[0005] In current practice, instrumentation in front-end projects mainly employs two methods: manual instrumentation or automated instrumentation based on rule engines. Manual instrumentation is extremely inefficient, easily missing observable objects and their associated interaction events. These observable objects can be pages, modules within pages, or elements within modules. Automated instrumentation based on rule engines not only requires maintaining a complex set of rules, but also, because front-end projects often adopt a component-based development approach, it may be difficult to accurately identify the instrumentation location for cross-component interaction events. Furthermore, it is prone to incorrectly matching interaction events bound to non-interactive functions as the interaction events that need to be observed, thus adding instrumentation statements in places where they are not needed.

[0006] We hope to find a new technical solution to more efficiently, accurately, and comprehensively instrument front-end projects. Summary of the Invention

[0007] The purpose of this invention is to provide a method and apparatus for instrumenting front-end projects.

[0008] Firstly, a method for instrumenting front-end projects is provided, comprising: inputting first prompt information into a large model, the first prompt information including at least the source code of the front-end project; causing the large model to output a semantic index of the source code based on the first prompt information, the semantic index indicating the reference relationship between at least one page, at least one module, and at least one element and the multiple interaction events involved therein; determining observation objects from the at least one page, at least one module, and at least one element; using the large model to locate the instrumentation points of the target interaction events involved by the observation objects in the source code; and adding instrumentation statements at the instrumentation points based on the reference relationship and the object identifier of the observation objects.

[0009] Secondly, an instrumentation device for a front-end project is provided. The device includes: an indexing agent configured to input first prompt information into a large model, the first prompt information including at least the source code of the front-end project, causing the large model to output a semantic index of the source code based on the first prompt information, the semantic index indicating the reference relationship between at least one page, at least one module, and at least one element and the multiple interaction events involved therein; a filtering processing module configured to determine an observation object from the at least one page, at least one module, and at least one element; and an instrumentation agent configured to use the large model to locate the embedding point position of the target interaction event involved by the observation object in the source code, and add embedding statements at the embedding point position based on the reference relationship and the object identifier of the observation object.

[0010] Thirdly, a computing device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect.

[0011] Fourthly, a computer-readable storage medium is provided having a computer program stored thereon, wherein when the computer program is executed in a computing device, the computing device performs the method described in the first aspect.

[0012] In the technical solutions provided in the embodiments of this specification, the semantic reasoning capabilities of the large model are used to automatically identify the reference relationships between pages, modules, and elements involved in the front-end project, and to efficiently and comprehensively identify the interactive events that may require instrumentation involved in these pages, modules, and elements. Then, a corresponding semantic index is constructed for the source code of the front-end project. For each target interactive event that needs to be observed in each observation object in the page, module, and element, the semantic reasoning capabilities of the large model can be used to efficiently and accurately locate the instrumentation point of the target interactive event in the source code, and then add corresponding instrumentation statements. This is conducive to more efficient, accurate, and comprehensive instrumentation of the front-end project. Attached Figure Description

[0013] To more clearly illustrate the technical solutions of the embodiments in this specification, the drawings used in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0014] Figure 1 This is a flowchart illustrating a front-end project instrumentation method provided in the embodiments of this specification;

[0015] Figure 2 This is a schematic diagram of a semantic index provided as an example in the embodiments of this specification;

[0016] Figure 3 This is one of the exemplary code snippets provided in the embodiments of this specification;

[0017] Figure 4 This is the second exemplary code snippet provided in the embodiments of this specification;

[0018] Figure 5 This is a schematic diagram of a front-end project piling device provided in the embodiments of this specification. Detailed Implementation

[0019] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments in this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this specification.

[0020] Figure 1This is a flowchart illustrating a front-end project instrumentation method provided in the embodiments of this specification. This method can be executed by any device, platform, equipment, or cluster of devices with computing / processing capabilities.

[0021] Reference Figure 1 As shown, the method may include, but is not limited to, some or all of the following steps S102 to S110.

[0022] First, in step S102, the semantic index of the source code of the front-end project is obtained using the large model. The semantic index indicates the reference relationships between at least one page, at least one module, and at least one element, as well as the multiple interaction events involved.

[0023] A business system's front-end project typically consists of one or more pages. A single page can include one or more functionally independent and structurally complete modules (or blocks). A single module can include one or more elements, which are interactive or content units that can be independently tracked and statistically analyzed. These elements may be presented on the page / module as buttons, links, input boxes, icons, tabs / pages, sliding components, recommendation slots, advertising slots, or specific areas used to identify exposure frequency.

[0024] To improve the development efficiency of front-end projects, developers typically adopt a component-based development approach, where a component can correspond to a page, a module, or an element. Here, we assume that a front-end project labeled a1 includes a transfer page and a recharge page. Both the transfer and recharge pages contain the same module, "Common Action Panel." When developing the source code for front-end project a1, developers might independently develop the components TransferPage (for the transfer page), RechargePage (for the recharge page), and CommonActionPanel (for the common action panel). The TransferPage and RechargePage components can reference the common action panel defined in CommonActionPanel without needing to redeclare or define it within the TransferPage and RechargePage components themselves.

[0025] The indexing agent can input initial prompts into the large model, which include at least the source code of the front-end project, such as the source code of multiple components related to front-end project a1, including TransferPage, RechargePage, and CommonActionPanel. Furthermore, the initial prompts can also include corresponding task execution instructions. In this way, the large model can perform structured parsing of the front-end project's source code based on the task execution instructions, obtaining and returning the corresponding semantic index, or obtaining and returning key information that can be used to support the indexing agent in constructing the semantic index.

[0026] Continuing with the previous example, let's assume the "Public Control Panel" includes elements such as a "Confirm" button, a "Cancel" button, and a "Help" button. Additionally, the "Transfer Page" includes a private module called "Payment Method Selection Area," which contains a tab named "bankcard-item"; the "Recharge Page" includes a private module called "Recharge Amount Input Area," which contains an input box named "amount-input." Please refer to... Figure 2 As shown, the semantic index references can indicate, for example, that: "Transfer Page" references / includes "Payment Method Selection Area" and "Public Operation Panel", "Recharge Page" references / includes "Recharge Amount Input Area" and "Public Operation Panel", "Payment Method Selection Area" references / includes "bankcard-item", "Recharge Amount Input Area" references / includes "amount-input", and "Public Operation Panel" references / includes "Confirm Button", "Cancel Button", and "Help Button".

[0027] Continuing with the previous example, the large model might identify multiple interaction events for the front-end project a1, including: dwell events on the transfer page (used to support statistics on the time difference between a user entering and leaving the "transfer page"), dwell events on the recharge page, exposure events in the payment method selection area (used to support statistics on the frequency of the "payment method selection area" being presented to the user), click events on the bankcard-item on the transfer page, long-press / hover events on the bankcard-item on the transfer page, click events on the confirm button on the transfer page, click events on the confirm button on the recharge page, click events on the cancel button on the transfer page, click events on the cancel button on the recharge page, click events on the help button on the transfer page, click events on the help button on the recharge page, and input events on the amount-input on the recharge page, etc.

[0028] Semantic indexes may also indicate the event intent of multiple interaction events. Event intent may include, but is not limited to, one or more of the following: event type, response function, and the transaction implemented by the response function. Continuing the previous example, let's assume the large model recognizes that the element "bankcard-item" is directly defined in the component TransferPage corresponding to the transfer page, and recognizes that the code snippet used to define "bankcard-item" includes declarations of interaction events, such as "onClick= { () => {that.props.showBankCardSelector (this.hasKTK());}}". Based on the keyword "onClick", the large model may recognize that the interaction events related to "bankcard-item" include "click event of bankcard-item on the transfer page". The event type of this interaction event is "Click", and the response function of this interaction event may be showBankCardSelector. By analyzing the name of this response function and / or the implementation logic of showBankCardSelector, it can be inferred that the transaction implemented by showBankCardSelector may be displaying a bank card selector.

[0029] The function identified in the declaration statement of an interactive event may be an intermediate function rather than the actual response function. The larger model can identify the actual response function of the interactive event from the source code based on the call relationships of the functions identified in the declaration statement. For example, the function identified in the declaration statement of an interactive event may be a throttling function used as an intermediate function. The larger model may analyze the implementation code of this throttling function to determine the function called within it as the response function.

[0030] The semantic index can also indicate the declared components of various elements, modules, and pages involved in the front-end project. Please continue reading. Figure 2For example, in the "Transfer Page" component, the "Payment Method Selection Area" is directly defined, and the code snippet defining the "Payment Method Selection Area" directly defines "bankcard-item". Semantic indexes indicate that the declarative components of "bankcard-item", "Payment Method Selection Area", and "Transfer Page" are all TransferPage. In the "Recharge Page" component, the "Recharge Amount Input Area" is directly defined, and the code snippet defining the "Recharge Amount Input Area" directly defines "amount-input". Semantic indexes indicate that the declarative components of "amount-input", "Recharge Amount Input Area", and "Recharge Page" are RechargePage. In the "Common Action Panel" component, the "Confirm Button", "Cancel Button", and "Help Button" are directly defined, and semantic indexes indicate that the declarative components of the "Common Action Panel" and its included buttons are all CommonActionPanel.

[0031] This paper does not impose restrictions on the data structure of semantic indexes. For example, a dependency graph can be used to indicate the reference relationship between at least one page, at least one module, and at least one element, and JSON-formatted text data can be used to describe one or more interaction events involved in each page, module, and element.

[0032] Step S104: Identify at least one observation object from at least one page, at least one module, and at least one element.

[0033] Typically, pages, modules, and elements can all be observed. However, in some technical scenarios, based on actual business needs, certain pages, modules, or elements may not need to be observed. For example, if the user does not need to observe the interaction events involved in the "recharge page" itself, even if the large model identifies that the recharge page involves some interaction events, such as pause events, the recharge page itself will not be observed.

[0034] Next, by using some or all of the following steps S106 to S112, the corresponding data entry statements can be added to the source code of the front-end project for each target interaction event involved in any observed object.

[0035] When the semantic index obtained in step S102 indicates the event intent of each of the multiple interactive events, step S106 can be performed on each observation object to determine at least one target interactive event involved in the observation object from the at least one interactive event involved in the observation object based on the event intent of each of the at least one interactive event involved in the observation object.

[0036] As mentioned above, the event intent of a single interaction event indicated in the semantic index may include, but is not limited to, one or more of the following: event type, response function, and the transaction implemented by the predicted response function.

[0037] For example, if the user does not need to observe the type of exposure interaction event involved in the "Payment Method Selection Area", even if the large model identifies the type of exposure interaction event involved in the "Payment Method Selection Area", the type of exposure interaction event involved in the "Payment Method Selection Area" will not be regarded as the target interaction event involved in the "Payment Method Selection Area".

[0038] For example, the response functions bound to some observation objects, such as click events, may be empty functions, test functions, non-interactive functions, or other placeholder functions. Even if the user clicks the observation object on the relevant page, no specific business will be executed. If the response function of an interaction event is judged by the indexing agent as an empty function, placeholder function, non-interactive function, or test function, or if the transaction implemented by the response function is judged by the indexing agent as an invalid transaction, such as preventing a certain default operation, such as preventing the screen from turning off due to the user's inactivity on the page for a long time, then the interaction event will not be regarded as the target interaction event.

[0039] When a front-end project undergoes multiple updates, the indexing agent can automatically identify whether a corresponding tracking statement has already been added to a certain interaction event based on historical instrumentation records. If so, the interaction event will not be considered as the target interaction event. In other words, the target interaction event described in the embodiments of this specification refers to an interaction event for which no tracking statement has been added.

[0040] Optionally, the indexing agent may also determine the SPM identifier of the target interaction event involved in the observed object in step S108, based on the reference relationship and the object identifier of the observed object.

[0041] Continuing from the previous example, different page identifiers can typically be assigned to different pages. For example, the page identifier for the transfer page is b1, and the page identifier for the recharge page is b2. Different module identifiers can be assigned to different modules within the same page. For example, the module identifier for the common operation panel on both the transfer and recharge pages is c1, the module identifier for the payment method selection area is c2, and the module identifier for the recharge amount input area is c3. Different element identifiers can be assigned to different elements within the same module. For example, the element identifier for bankcard-item is d1, the element identifier for amount-input is d2, and the element identifiers for the confirm button, cancel button, and help button on the transfer and recharge pages are d3, d4, and d5, respectively.

[0042] It should be noted that different elements within different modules may have the same element identifier. For example, bankcard-item and amount-input may have the same element identifier, such as d1. It should also be noted that different module / element identifiers can be assigned to the same module / element on different pages. For example, the "Public Operation Panel" on the recharge page can be assigned module identifier c1, and the "Public Operation Panel" on the transfer page can be assigned module identifier c4.

[0043] As mentioned earlier, a single observation object can be a page, a module, or an element. Correspondingly, when the observation object is a page, the object identifier is the page identifier; when the observation object is a module, the object identifier is the module identifier; and when the observation object is an element, the object identifier is the element identifier.

[0044] For any target interaction event involving an observed object, in addition to the observed object itself, the indexing agent can determine all pages and / or modules that directly or indirectly reference the observed object based on the reference relationships in the semantic index. Then, based on the page identifiers of the pages that directly or indirectly reference the observed object, the module identifiers of the modules that directly or indirectly reference the observed object, and the object identifier of the observed object itself, the SPM identifier of the target interaction event involving the observed object is constructed. For example, for the click event involving the "confirm button on the transfer page", based on the dependency relationship, it can be determined that the page panel that indirectly references the "confirm button on the transfer page" includes the "transfer page", and the module that directly references the "confirm button on the transfer page" includes the "common operation panel on the transfer page". Therefore, it is possible to construct the SPM identifier "a1, b1, c1, d3" or "a1, b1, c4, d3" for the click event of the "confirm button on the transfer page". Based on a similar principle, it is also possible to construct the SPM identifier "a1, b2, c1, d3" for the click event involving the "confirm button on the recharge page", and it is also possible to construct the SPM identifier "a1, b1, c2" for the exposure event of the "payment method selection area", and so on.

[0045] It is understandable that multiple target interaction events involving a single observed object can have the same SPM identifier. For example, the SPM identifiers for the click and hover events involving the bankcard-item on the transfer page can be "a1, b1, c2, d1".

[0046] Step S110: Use the large model to locate the embedded points of the target interaction events involved in the observed object in the source code.

[0047] For any observed object, the instrumentation agent can use the object name (page name, module name, or element name defined in the source code) as a keyword to filter at least one code snippet from the source code containing that object name / keyword. Accordingly, in step S110, the instrumentation agent can use a large model to locate the embedding points of the target interaction events involved in the observed object within at least one code snippet.

[0048] The instrumentation agent can input a second prompt information into the large model. This second prompt information includes at least one code snippet and the target interaction event involved in the corresponding observed object. In addition, it may also include the corresponding task execution instructions, so that the large model can locate and output the embedding location of the target interaction event in at least one code snippet based on the second prompt information.

[0049] Alternatively, the instrumentation agent can directly input third prompt information into the large model. The third prompt information includes at least the object name of the observed object and the target interaction event involved in the observed object. In addition, it may also include the corresponding task execution instructions, so that the large model can locate the declaration statement of the target interaction event in the source code according to the third prompt information, determine the instrumentation location of the target interaction event according to the declaration statement, and output the instrumentation location of the target interaction event.

[0050] More specifically, the instrumentation agent can instruct the large model to perform the following inference process based on the task execution instructions in the second / third prompt information: locate the declaration statement of the target interaction event involved in the observed object in the source code / at least one code segment; when the semantic index indicates that the declaration component of any observed object corresponds to a page, determine the line of code after the declaration statement as the instrumentation location of the target interaction event; when the semantic index indicates that the declaration component of the observed object corresponds to a module or an element, determine the target component corresponding to the page that directly or indirectly references the observed object based on the reference relationship, that is, perform recursive retrieval in the source code / at least one code segment, thereby determining the reference location corresponding to the declaration statement in the target component, and determining the instrumentation location of the target interaction event based on the reference location corresponding to the declaration statement.

[0051] Reference Figure 3 For example, the TransferPage corresponding to the transfer page includes a code snippet for declaring / defining the bankcard-item. The large model can locate the declaration statement for the click event of the bankcard-item on the transfer page within this code snippet: "onClick{()=>{that.props.showBankCardSelector(this.hasKTK());}}". Furthermore, the large model can also determine, based on semantic indexing, that the declaring component of the bankcard-item is the corresponding TransferPage of the transfer page. Therefore, the large model can directly determine the position between this declaration statement and the next line of code as the placement point for the click event of the bankcard-item.

[0052] Reference Figure 4 For example, CommonActionPanel includes code snippets for defining the common action panel, and TransferPage, corresponding to the transfer page, includes code snippets for defining the transfer page itself. The larger model can locate the declaration statement for the click event related to the confirmation button in the source code. <button onclick="{onConfirm}"> confirm< / button> "The declaration statement of the click event involved in the cancel button" <button onclick="{onCancel}"> Cancel< / button> "and the declaration statement for the click event involving the help button: "{onHelp &&<button onclick="{onHelp}"> help< / button>}".

[0053] In addition, the large model can also determine, based on semantic indexing, that the declared components of the Confirm, Cancel, and Help buttons are the CommonActionPanel component of the corresponding public operation panel, rather than components of the corresponding pages. Therefore, the large model needs to further analyze the context of these declaration statements in conjunction with reference relationships, such as determining the target components TransferPage and RechargePage corresponding to the transfer page and recharge page that directly or indirectly reference the "Confirm," "Cancel," and "Help" buttons based on the reference relationships. Correspondingly, the large model can determine the "Confirm," "Cancel," and "Help" buttons within TransferPage. <button onclick="{onConfirm}"> confirm< / button> The reference location of "" (i.e., the location of the reference statement "onConfirm={handleTransferConfirm}"), " <button onclick="{onCancel}"> Cancel< / button> The positions of "" (i.e., the positions of the quoted statements "onCancel={handleTransferCancel}") and "{onHelp && <button onclick="{onHelp}"> help< / button> The reference position of "}" (i.e., the position of "onHelp={handleHelpClick}"); then, the large model can determine the tracking position of the click event of the "confirm button on the transfer page" based on the position of "onConfirm={handleTransferConfirm}", determine the tracking position of the click event of the "cancel button on the transfer page" based on the position of "onCancel={handleTransferCancel}", and determine the tracking position of the click event of the "help button on the transfer page" based on the position of "onHelp={handleHelpClick}".

[0054] For example, the line of code after "onConfirm={handleTransferConfirm}" can be designated as the event tracking location for the click event of the "Confirm button on the transfer page", the line of code after "onCancel={handleTransferCancel}" can be designated as the event tracking location for the click event of the "Cancel button on the transfer page", and the line of code after "onHelp={handleHelpClick}" can be designated as the event tracking location for the click event of the "Help button on the transfer page". Alternatively, the line of code after the three quoted statements in the aforementioned example can be used as the event tracking location for the three target interaction events in the aforementioned example.

[0055] Next, in step S112, according to the reference relationship and the object identifier of the observed object, the embedding statement is added at the embedding location.

[0056] Continuing with the example in step S110 above, the instrumentation agent can add an instrumentation statement between the declaration statement "onClick{()=>{that.props.showBankCardSelector(this.hasKTK());}}" of the click event of bankcard-item and the next line of code, Role='button'. This instrumentation statement could include, for example, data-spm-click='d1' and data-spm-param={smp.buildSpmParam('')}. It can be understood that d1 represents the element identifier of bankcard-item, and data-spm-param={smp.buildSpmParam('')} indicates that the prefix of the SPM identifier is obtained based on the reference relationship in the semantic index. For example, here it might obtain "a1, b1, c2" from the SPM identifier "a1, b1, c2, d1". Thus, the instrumentation statement in the aforementioned example implicitly includes the SPM identifier "a1, b1, c2, d1". Alternatively, the tracking statement in the previous example can be directly replaced with data-spm="a1.b1.c2.d1".

[0057] Continuing from the example under step S110 above, the instrumentation agent can add instrumentation statements for the three click events in the previous example in the next line of code after onHelp={handleHelpClick}, such as data-spm-block="a1, b1, c2" and data-spm-map='{"confirm":"d3","cancel":"d4","help":"d5"}'. Alternatively, you can add the corresponding click event tracking statements to the next line of code after each of the three referenced statements in the previous example. For example, add tracking statements such as data-spm="a1.b1.c2.d3" to the next line of code after onConfirm={handleTransferConfirm}, data-spm="a1.b1.c2.d4" to the next line of code after onCancel={handleTransferCancel}, and data-spm="a1.b1.c2.d5" to the next line of code after onHelp={handleHelpClick}.

[0058] Finally, in step S114, the source code after adding the tracking statement is processed using a large model, so that the large model can predict whether the tracking statement and / or the tracking position of the tracking statement is correct.

[0059] The instrumentation agent can input a fourth hint into the large model. This fourth hint includes at least the source code after adding the instrumentation statement, enabling the large model to predict whether the instrumentation statement and / or the instrumentation location is correct. The instrumentation agent re-invokes the large model to re-predict the correctness of the instrumentation statement (or the SPM identifier included in the instrumentation statement) and the instrumentation location. This allows the large model to better self-examine and correct its reasoning path, thereby reducing model hallucination and improving the decision-making accuracy of the large model. If the large model identifies erroneous instrumentation statements or locations, iterative updates through multiple rounds of verification and correction mechanisms can significantly improve the instrumentation accuracy. Manual intervention can also be used to ensure the correctness of the instrumentation statements and locations.

[0060] After the instrumentation of the event tracking statements is completed, the historical instrumentation records of the front-end project can also be updated accordingly. For example, all target interaction events that have been instrumented by the current instrumentation method can be added to the historical instrumentation records of the front-end project. The updated historical instrumentation records of the front-end project provide the ability to continuously instrument the source code of the front-end project as iterates.

[0061] The technical solution provided in the embodiments of this specification fundamentally overcomes the problems faced in multiple aspects such as source code semantic understanding, SPM identifier allocation, and continuous source code updates through the collaboration of a large model and two intelligent agents. Two independent indexing agents and instrumentation agents collaborate asynchronously under the coordination of the large model, respectively responsible for "semantic modeling" and "instrumentation decision-making," establishing a modular, layered automatic instrumentation architecture that can be directly applied to front-end projects with different architectures such as React, Vue, and mini-programs. Furthermore, by providing cross-component semantic tracking and instrumentation decision-making reasoning capabilities through semantic indexing of the source code, it solves the problem that traditional static analysis struggles to identify cross-component event binding relationships. It can automatically "penetrate" component references and identify referenced or wrapped interaction events, thereby achieving full and accurate instrumentation of a large number of complex page structures.

[0062] Based on the same concept as the aforementioned method embodiments, this specification also provides a front-end project instrumentation device. (Refer to...) Figure 5As shown, the device 500 includes: an indexing agent 501 configured to input first prompt information into a large model, the first prompt information including at least the source code of the front-end project, causing the large model to output a semantic index of the source code based on the first prompt information, the semantic index indicating the reference relationship between at least one page, at least one module, and at least one element and the multiple interactive events involved therein; a filtering processing module 503 configured to determine the observation object from the at least one page, at least one module, and at least one element; and an instrumentation agent 505 configured to use the large model to locate the instrumentation point of the target interactive event involved by the observation object in the source code, and add instrumentation statements at the instrumentation point according to the reference relationship and the object identifier of the observation object.

[0063] This specification also provides a computer-readable storage medium storing a computer program / instruction, which, when executed in a computer, causes the computer to perform an instrumentation method for a front-end project provided in the foregoing embodiments.

[0064] This specification also provides a computing device in the embodiments, including a memory and a processor. The memory stores computer programs / instructions, and when the processor executes the computer programs / instructions, it implements a front-end project instrumentation method provided in the foregoing embodiments.

[0065] In the 1990s, improvements to a technology could be clearly distinguished as either hardware improvements (e.g., improvements to the circuit structure of diodes, transistors, switches, etc.) or software improvements (improvements to the methodology). However, with technological advancements, many methodological improvements today can be considered direct improvements to the hardware circuit structure. Designers almost always obtain the corresponding hardware circuit structure by programming the improved methodology into the hardware circuit. Therefore, it cannot be said that a methodological improvement cannot be implemented using hardware physical modules. For example, a Programmable Logic Device (PLD) (such as a Field Programmable Gate Array (FPGA)) is such an integrated circuit whose logic function is determined by the user programming the device. Designers can program and "integrate" a digital system onto a PLD themselves, without needing chip manufacturers to design and manufacture dedicated integrated circuit chips. Furthermore, nowadays, instead of manually manufacturing integrated circuit chips, this programming is mostly implemented using "logic compiler" software. Similar to the software compiler used in program development, the original code before compilation must also be written in a specific programming language, called a Hardware Description Language (HDL). There are many HDLs, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, and RHDL (Ruby Hardware Description Language). Currently, the most commonly used are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art should also understand that by simply performing some logic programming on the method flow using one of these hardware description languages ​​and programming it into an integrated circuit, the hardware circuit implementing the logical method flow can be easily obtained.

[0066] The controller can be implemented in any suitable manner. For example, it can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicon Labs C8051F320. A memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art will also recognize that, in addition to implementing the controller in purely computer-readable program code form, the same functionality can be achieved by logically programming the method steps to make the controller take the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers. Therefore, such a controller can be considered a hardware component, and the means included therein for implementing various functions can also be considered as structures within the hardware component. Alternatively, the means for implementing various functions can be considered as both software modules implementing the method and structures within the hardware component.

[0067] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or physical entities, or by products with certain functions. A typical implementation device is a server system. Of course, this application does not exclude the possibility that, with the future development of computer technology, the computer implementing the functions of the above embodiments can be, for example, a personal computer, a laptop computer, an in-vehicle human-machine interaction device, a cellular phone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or any combination of these devices.

[0068] While one or more embodiments of this specification provide the operational steps of the methods described in the embodiments or flowcharts, more or fewer operational steps may be included based on conventional or non-inventive means. The order of steps listed in the embodiments is merely one possible order of execution among many steps and does not represent the only possible order. In actual device or end product execution, the methods shown in the embodiments or drawings may be executed sequentially or in parallel (e.g., in a parallel processor or multi-threaded processing environment, or even a distributed data processing environment). The terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, product, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, product, or apparatus. Without further limitations, the presence of other identical or equivalent elements in the process, method, product, or apparatus that includes said elements is not excluded. For example, the use of terms such as "first," "second," etc., is to denote names and does not indicate any particular order.

[0069] For ease of description, the above devices are described in terms of function, divided into various modules. Of course, when implementing one or more of these specifications, the functions of each module can be implemented in one or more software and / or hardware components, or a module that performs the same function can be implemented by a combination of multiple sub-modules or sub-units. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, indirect coupling or communication connection between devices or units, and may be electrical, mechanical, or other forms.

[0070] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0071] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0072] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0073] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0074] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0075] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage, graphene storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0076] Those skilled in the art will understand that one or more embodiments of this specification can be provided as a method, system, or computer program product. Therefore, one or more embodiments of this specification may take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, one or more embodiments of this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0077] One or more embodiments of this specification can be described in the general context of computer-executable instructions, such as program modules, that are executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a particular task or implement a particular abstract data type. One or more embodiments of this specification can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0078] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, system embodiments are basically similar to method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments. In the description of this specification, the terms "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of this specification. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described can be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification and the features of different embodiments or examples.

[0079] The above description is merely an embodiment of one or more embodiments of this specification and is not intended to limit the scope of these embodiments. Various modifications and variations can be made to these embodiments by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this specification should be included within the scope of the claims.

Claims

1. A method for instrumentation in a front-end project, the method comprising: Input a first prompt message into the large model. The first prompt message includes at least the source code of the front-end project. The large model outputs a semantic index of the source code based on the first prompt message. The semantic index indicates the reference relationship between at least one page, at least one module, and at least one element and the multiple interaction events involved therein. The observation object is determined from the at least one page, the at least one module, and the at least one element; The large model is used to locate the embedded points of the target interaction events involving the observed object in the source code; Based on the reference relationship and the object identifier of the observed object, add embedding statements at the embedding location.

2. The method according to claim 1, wherein the semantic index further indicates the event intent of each of the plurality of interactive events; in, The method further includes: determining the target interactive event involved by the observed object from the at least one interactive event involved by the observed object based on the event intent of each of the at least one interactive event involved by the observed object.

3. The method according to claim 1, further comprising: The method involves retrieving the object name of the observed object as a keyword and filtering out at least one code segment containing the object name from the source code. The step of using a large model to locate the embedding location of the target interaction event involved in the observed object within the source code includes: inputting second prompt information into the large model, the second prompt information including at least the at least one code segment and the target interaction event involved in the observed object, so that the large model locates the embedding location of the target interaction event within the at least one code segment based on the second prompt information, and outputs the embedding location of the target interaction event.

4. The method according to claim 1, wherein locating the embedding points of the target interaction events involving the observed object in the source code using a large model includes: A third prompt is input into the large model. The third prompt includes at least the object name of the observed object and the target interaction event involved by the observed object. Based on the third prompt, the large model locates the declaration statement of the target interaction event in the source code, determines the tracking point location of the target interaction event based on the declaration statement, and outputs the tracking point location of the target interaction event.

5. The method according to claim 4, wherein the source code of the front-end project includes multiple components, each component corresponding to a page, a module, or an element; the semantic index further indicates the respective declaration components of the at least one page, the at least one module, and the at least one element; in, The step of determining the tracking location of the target interaction event based on the declaration statement includes: when the semantic index indicates that the declaration component of the observed object corresponds to a page, the line of code located after the declaration statement is determined as the tracking location of the target interaction event.

6. The method according to claim 5, wherein determining the embedding location of the target interaction event based on the declaration statement further includes: When the semantic index indicates the module or element corresponding to the declaration component of the observed object, the reference statement corresponding to the declaration statement is located, and the embedding location of the target interaction event is determined according to the reference statement.

7. The method according to claim 1, wherein adding a tracking statement at the tracking location based on the reference relationship and the object identifier of the observed object includes: Based on the SPM identifier of the target interaction event, add a tracking statement at the tracking location. The SPM identifier is determined based on the reference relationship and the object identifier of the observed object.

8. The method according to any one of claims 1-7, further comprising: The large model is input with a fourth prompt message, which includes at least the source code after the addition of the tracking statement, so that the large model can predict whether the tracking statement and / or the tracking position is correct.

9. A front-end project piling device, the device comprising: An indexing agent is configured to input first prompt information into a large model, the first prompt information including at least the source code of the front-end project, so that the large model outputs a semantic index of the source code based on the first prompt information, the semantic index indicating the reference relationship between at least one page, at least one module and at least one element and the multiple interaction events involved therein; A filtering processing module is configured to determine the observation object from the at least one page, the at least one module, and the at least one element; The instrumentation agent is configured to use the large model to locate the instrumentation points of the target interaction events involving the observed object in the source code, and add instrumentation statements at the instrumentation points according to the reference relationship and the object identifier of the observed object.

10. A computing device comprising a memory and a processor, wherein the memory stores a computer program, and the processor, when executing the computer program, implements the method of any one of claims 1-8.

Images