Front-end interface expiration intelligent detection and early warning method and system

Abstract

The invention belongs to the technical field of computer front-end development, and discloses an intelligent detection and early warning method and system for expiration of a front-end interface. The method comprises the following steps: constructing an interface feature fingerprint database, collecting static request features and dynamic response features of an interface, fusing the static request features and the dynamic response features to generate a unique fingerprint, and storing the unique fingerprint into a front-end local storage; predefining an interface library updating rule, and establishing mapping logic of a response state, a data structure and a life cycle state; establishing a multi-scene detection mechanism at the front end side, acquiring real-time features in network interaction and comparing the real-time features with the fingerprint database, and performing asynchronous comparison by using a task scheduling assembly line based on a browser operation cycle; and judging an interface state according to a comparison result and an updating rule, and outputting graded early warning. According to the method, active and real-time interface life cycle management of the front end side is realized, interface change is accurately identified through a fingerprint technology, page blockage is avoided by utilizing a pipeline technology, the manual maintenance cost is effectively reduced, and the project stability is guaranteed.

Description

Technical Field

[0001] This invention belongs to the field of computer front-end development technology, and specifically relates to a method and system for intelligent detection and early warning of expired front-end interfaces. Background Technology

[0002] In the development and maintenance of front-end projects for modern web applications, APIs (Application Programming Interfaces) serve as the core carrier for data interaction between the front-end and back-end, and their lifecycle management directly affects the stability of the project and the user experience.

[0003] However, existing front-end projects have the following significant technical shortcomings in interface management:

[0004] Reliance on manual labor and documentation leads to inefficiency: Front-end development often relies on manual verification using documentation such as Swagger provided by the back-end. In large projects, as the number of APIs surges, the cost of manual maintenance increases exponentially, and omissions are highly likely.

[0005] Lagging front-end perception: When back-end interfaces change (such as adding or removing parameters, modifying response formats, or migrating domains) or undergo version iterations, the front-end often cannot perceive them in real time. They are only discovered when a call exception occurs or the page goes blank at runtime, which seriously affects the user experience.

[0006] Obsolete APIs are difficult to identify accurately: Projects often contain a large number of legacy APIs (Zombie APIs). These APIs are not used but have not been deleted. They not only consume server resources but may also become security vulnerabilities.

[0007] Limitations of existing detection solutions: Existing detection solutions mostly rely on static code analysis (which can only identify code references and cannot detect the actual state of the server) or simple HTTP status code detection (which cannot identify data structure changes). In addition, performing large-scale full interface detection on the front end can easily block the browser's main thread, causing the page to freeze or lag.

[0008] Therefore, there is an urgent need for a proactive, intelligent, and high-performance interface expiration detection and early warning solution on the front end. Summary of the Invention

[0009] Purpose of the invention: The purpose of this invention is to address the shortcomings of existing technologies by providing a method and system for intelligent detection and early warning of expired front-end interfaces, thereby solving the problems of reliance on manual verification, perception lag, and performance bottlenecks caused by large-scale detection in the existing technologies.

[0010] Technical solution: The intelligent detection and early warning method for expired front-end interfaces described in this invention includes the following steps:

[0011] Step S1: Construct an interface feature fingerprint database: Collect static and dynamic features of the front-end interface, perform fusion processing on the static and dynamic features to generate a unique fingerprint, and store the unique fingerprint in the interface feature fingerprint database stored locally on the front end.

[0012] Step S2: Predefine interface library update rules: Establish mapping and judgment logic between interface response status, returned data structure and interface lifecycle status;

[0013] Step S3: Establish a multi-scenario detection mechanism on the front end: During the network interaction between the front end and the back end server, obtain the real-time request parameters and real-time response data of the target interface, extract real-time features, and compare the real-time features with the baseline features stored in the interface feature fingerprint database.

[0014] Step S4: Statistical analysis and processing of interface detection results: Based on the comparison results of step S3 and the update rules defined in step S2, determine the current lifecycle status of the interface, update the interface feature fingerprint database, and output the corresponding warning information.

[0015] To further improve the above technical solution, in step S1, the fusion processing to generate a unique fingerprint includes: extracting static feature fields of the interface, wherein the static feature fields include at least the interface address, request method, and input parameter field key-value sequence; extracting dynamic feature fields of the interface, wherein the dynamic feature fields include at least the structural hierarchy and type definition of the response data; and fusion processing the static feature fields and the dynamic feature fields in a preset order to generate a unique fingerprint.

[0016] Furthermore, in step S3, the establishment of a multi-scenario detection mechanism on the front end includes a real-time interception mode: by deploying interception middleware at the front-end network request layer to listen to business requests initiated by the application; after receiving response data returned by the back-end server, intercepting the response data to extract real-time response features; establishing a task scheduling pipeline based on the browser runtime cycle, and comparing the intercepted real-time features with the baseline features in the interface feature fingerprint database during browser rendering frame intervals or when the main thread is idle, to prevent blocking the front-end page rendering.

[0017] Furthermore, in step S3, the establishment of the multi-scenario detection mechanism on the front end also includes an active full-scale detection mode: an independent test interface is generated on the front end, the interface having the permission to read the interface feature fingerprint database; in response to the user's full-scale test command, the interface fingerprints in the interface feature fingerprint database are traversed, the input parameter fields in the fingerprints are parsed to construct simulated requests, and the simulated requests are sent to the backend server in batches; the response status codes and response data structures returned by the batch requests are collected, the comparison logic in step S3 is reused for batch detection, and the comparison results are fed back to the test interface in real time.

[0018] This invention also provides a front-end interface expiration intelligent detection and early warning system, comprising:

[0019] The fingerprint construction module is used to collect static and dynamic features of the front-end interface, fuse the two to generate a unique fingerprint and store it in the fingerprint database.

[0020] The rule definition module is used to store the mapping and judgment logic between interface response status, data structure and interface lifecycle status;

[0021] The detection execution module integrates the network request interception unit and the active scanning unit to obtain real-time characteristics of the interface, and uses an asynchronous task scheduling pipeline to perform consistency comparison between the real-time characteristics and the fingerprint database.

[0022] The analysis and early warning module is used to determine the interface status based on the comparison results, update the fingerprint database, and display the hierarchical early warning information through a visual interface.

[0023] Beneficial effects: Compared with the prior art, the advantages of the present invention are as follows:

[0024] This invention proposes the concept of "interface feature fingerprint," which integrates static request features (such as URL and input parameters) with dynamic response features (such as structural hierarchy and type). Compared to traditional methods that rely solely on URL or status codes, this invention can not only identify whether an interface is obsolete (404), but also accurately identify whether the interface structure has undergone "implicit changes" (e.g., returning 200 but missing key fields), significantly improving the granularity of identification.

[0025] This invention constructs a front-end autonomous detection system. Through request interception, interface scanning, single-time detection (where users manually trigger interface detection on the detection page, including single and multiple interfaces), and full-scale automatic detection (where the interface detection pipeline actively detects interfaces not requested within the past 30 days when the browser is idle), it breaks through the traditional back-end-dependent detection model, achieving real-time response. Data is collected in real-time at runtime through interceptors. The front-end no longer passively waits for back-end notifications but can perceive the interface status in real-time during development, debugging, or user access, enabling immediate discovery and response to interface issues.

[0026] To address the issue of browser main thread blocking that may result from comparing a large number of interface features, this invention innovatively establishes an asynchronous task scheduling pipeline based on the browser's runtime cycle (such as through requestAnimationFrame or requestIdleCallback). By utilizing the browser's rendering frame intervals or idle time slices to execute comparison tasks in batches, it ensures that the front-end page remains smooth and does not freeze during full or high-frequency detection.

[0027] This invention provides a tiered early warning mechanism with Level 1 (obsolete), Level 2 (critical change), and Level 3 (normal change) classifications, and supports the generation of visual reports and document export. This allows developers to prioritize critical issues based on their severity, significantly reducing project maintenance and communication costs. Attached Figure Description

[0028] Figure 1 This is a flowchart of the intelligent detection and early warning method for expired front-end interfaces provided by the present invention. Detailed Implementation

[0029] The technical solution of the present invention will be described in detail below with reference to the accompanying drawings, but the scope of protection of the present invention is not limited to the embodiments described.

[0030] Example 1: This example provides a method for intelligent detection and early warning of expired front-end interfaces, which is applied to the development and operation phase of a Web front-end project. In this method, HTTP is used to initiate requests to the interface, the Axios interceptor is used to compare the feature database when making interface requests, IndexDB is used to store the data generated by the front-end during the detection process, and the requestAnimationFrame method is used to establish a feature comparison pipeline.

[0031] The overall approach of this application is as follows: Based on a predefined fingerprint database and interface judgment rules, the front end performs tests on one or more interfaces simultaneously on a dedicated test page, and updates the interface status database based on the test results. Interfaces with a warning level of level 1 can be processed in batches. In the second round, interfaces with a warning level of level 2 can be processed more precisely based on the results of the first round.

[0032] Based on the above architecture, a method for intelligent detection and early warning of expired front-end interfaces is implemented as follows: Figure 1 As shown, the steps include:

[0033] Step S1: Construct an interface feature fingerprint database

[0034] This step aims to establish a unique identity for each interface. Specifically, during project initialization or the first successful call to an interface, the static and dynamic characteristics of the interface are collected.

[0035] Static features include: url: API address; method: request method; paramKeysJson: input parameter fields.

[0036] Dynamic features include: responseKeysJson: response parameter field; API request time and number of calls.

[0037] The static and dynamic features of each interface are fused together. Based on the backend development documentation (Swagger, etc.), different input and return parameter fields are set for different interfaces. The JSON data composed of interface address, request method, input parameter fields and return parameter fields is serialized and encrypted with AES to generate a unique fingerprint string. The unique fingerprint is stored in the feature database.

[0038] Step S2: Predefine interface library update rules

[0039] This step defines how to determine the health status of an API based on the results returned by the backend. The rules specifically include:

[0040] Obsolution rule (Level 1 warning): If the real-time request parameters and request method of the interface are consistent with the fingerprint database record, but the status code returned by the interface is the preset first type of status identifier code (preferably HTTP404NotFound), then the interface is determined to be obsolete.

[0041] Important Change Rule (Level 2 Warning): If the real-time request parameters and request method of the interface are consistent with the fingerprint database record, but the status code returned by the interface is the preset second type status identifier code (preferably HTTP400BadRequest), it usually means that the input parameter definition has undergone an incompatible change on the server side, and is judged as an important change.

[0042] Normal Change Rule (Level 3 Warning): If the HTTP status code of the interface is normal (e.g., 200), but the data structure (parameter format) returned in real time is inconsistent with the structure stored in the fingerprint database (e.g., missing fields or changed field types), it is judged as a normal change.

[0043] No-processing rule: If the interface returns a 500 series status code (such as 502, 503), it is usually regarded as an internal server error, not a problem with the interface itself, and will not trigger fingerprint database updates.

[0044] Step S3: Establish a multi-scenario detection mechanism on the front end.

[0045] Establish multi-scenario detection on the front end to achieve real-time detection and early warning of interfaces:

[0046] Multi-scenario detection mainly includes: user-initiated detection scenarios and browser-silent detection scenarios.

[0047] For user-initiated testing scenarios: a test page should be provided, listing all available interfaces for testing, and decrypting and displaying the input and response parameters, request methods, etc., saved by each interface during preprocessing, so that users can manually configure parameters.

[0048] For browser silent detection scenarios: A global event listener is added to the system. When there is no mouse activity for two minutes, interfaces that have not been requested within the past 30 days are filtered out. An interface request queue is established, and requests are made sequentially. If mouse activity occurs during queue execution, all requests to the current interface are canceled to ensure smooth and stable system operation.

[0049] S3.1 Create a front-end real-time detection module, integrate the request interception detection unit, and put the comparison work of the feature library into the detection unit;

[0050] S3.2. Using the Axios interceptor, when calling the interface, request the front-end real-time detection module to compare the request characteristics with the latest characteristics in the interface state database, detect the consistency of the interface structure, and store the comparison data in the interface state database.

[0051] The real-time detection module uses a parameter comparison method. Within the interceptor, when an interface request is initiated, the parameters are sent to the real-time detection module. The module retrieves the corresponding input and output parameters from the fingerprint database for comparison, specifically comparing the number and type of parameters (this is stored during preprocessing). When a response is received, if the status code is 404 NotFound, the interface is actively marked as a Level 1 warning, and no parameter comparison is performed; if the interface returns 400 Bad Request, it is marked as a Level 2 warning, and only the input parameters are compared; when the interface returns 200, it is marked as a Level 3 warning, and both input and output parameters are compared; when the interface returns 500, no comparison is performed and no alarm is triggered.

[0052] S3.3. The front-end generates a dedicated test page. Upon first entry, the page contains only a "Get All APIs" button, divided into left and right columns. The left column displays the retrieved APIs, and the right column displays the tested APIs. Subsequent entries will display all previously retrieved APIs; APIs will only be retrieved again when the "Get All APIs" button is clicked again.

[0053] S3.4 After obtaining the data from all interfaces, an interface tree is generated according to different modules. The nodes of the interface tree can be selected, and two buttons will appear on the page: "Test all interfaces" and "Test selected node".

[0054] S3.5 When multiple interface nodes are selected, fine-grained modification of input parameters is not supported; only default requests are supported to obtain specific interfaces with warning levels of Level 1 and Level 2. When only a single node is selected, input parameters can be modified for comparison with static rules in the feature library.

[0055] S3.6 To prevent the page from freezing due to excessive requests and increased comparison work, the test page will use the browser's requestAnimationFrame method to establish a feature comparison pipeline, and a corresponding progress bar will also be added to the page.

[0056] The feature matching pipeline uses the `requestAnimationFrame` method, which executes every frame in the browser. Assuming a browser refresh rate of 60Hz, this method will execute every 16.67ms. Using this method in conjunction with `requestIdleCallback` to perform relevant request operations during idle periods ensures that the browser's main rendering process is not affected, thus significantly reducing page lag.

[0057] Specifically, an interface request queue is established, and the interfaces that need to be requested are stored in the queue in order;

[0058] Establish an execution queue and place the first interface in the request queue into the execution queue for execution. If the execution is complete, mark the interface as executed and remove it from the queue.

[0059] `requestAnimationFrame` checks if the API has finished executing. If so, it calls the `requestIdleCallback` method to check if there is a single-frame idle time. If so, it adds the first API in the request queue to the execution queue and executes it, marking it as running. If there is no single-frame idle time, no action is taken.

[0060] If a mouse movement operation occurs, clear the current API request queue and remove the requestAnimationFrame event.

[0061] S3.7 After the API request is completed, the API request results are generated on the right side of the page, prioritizing APIs with warning levels of Level 1 and Level 2. Clicking on the corresponding API here allows for fine-grained configuration of the input parameters (reusing the configuration interface from S3.5).

[0062] Step S4: Statistical analysis and processing of interface detection results

[0063] Based on the comparison results of S3 and the rules of S2, determine the interface status (normal, obsolete, or changed).

[0064] Storage: Update the detection results (status, detection time, change details) back to IndexDB.

[0065] Display: Provide a pop-up notification in the page development environment (e.g., "Warning: The current interface / api / old has been deprecated").

[0066] Report: The dedicated testing interface supports filtering and viewing according to the warning level (Level 1 / Level 2 / Level 3), and generates detection reports in Word or PDF format based on IndexDB data, which developers can download and keep for reference or use as a basis for code cleanup.

[0067] Example 2: This example mainly introduces a front-end interface expiration intelligent detection and early warning system that implements the above method, including:

[0068] Fingerprint building module: responsible for feature extraction and hash calculation, and maintaining fingerprint data in IndexDB.

[0069] Rule definition module: configuration file or configuration item, storing a mapping table between HTTP status codes and business status.

[0070] The detection execution module contains two sub-units.

[0071] Intercept Unit: Mounted on the global Ajax / Fetch object, used to monitor traffic.

[0072] Active scanning unit: Implements a time-slicing-based scheduling algorithm and manages the comparison task queue.

[0073] Analysis and Early Warning Module: Responsible for UI interaction, rendering alarm information, and generating export documents.

[0074] Through the above embodiments, the present invention utilizes idle computing power at the front end and the modern API features of browsers to implement a low-intrusion, high-efficiency, and visual interface lifecycle management solution.

[0075] As described above, although the invention has been shown and described with reference to specific preferred embodiments, it should not be construed as limiting the invention itself. Various changes in form and detail may be made without departing from the spirit and scope of the invention as defined in the appended claims.

Claims

1. A method for intelligent detection and early warning of expired front-end interfaces, characterized in that, Includes the following steps: Step S1: Construct an interface feature fingerprint database: Collect static and dynamic features of the front-end interface, perform fusion processing on the static and dynamic features to generate a unique fingerprint, and store the unique fingerprint in the interface feature fingerprint database stored locally on the front end. Step S2: Predefine interface library update rules: Establish mapping and judgment logic between interface response status, returned data structure and interface lifecycle status; Step S3: Establish a multi-scenario detection mechanism on the front end: During the network interaction between the front end and the back end server, obtain the real-time request parameters and real-time response data of the target interface, extract real-time features, and compare the real-time features with the baseline features stored in the interface feature fingerprint database. Step S4: Statistical analysis and processing of interface detection results: Based on the comparison results of step S3 and the update rules defined in step S2, determine the current lifecycle status of the interface, update the interface feature fingerprint database, and output the corresponding warning information.

2. The intelligent detection and early warning method for expired front-end interfaces according to claim 1, characterized in that, In step S1, the fusion process to generate a unique fingerprint includes: Extract the static feature fields of the interface, wherein the static feature fields include at least the interface address, request method, and key-value sequence of input parameter fields; Extract the dynamic feature fields of the interface, wherein the dynamic feature fields include at least the structural hierarchy and type definition of the response data; According to the interface development documentation, different interfaces are set with input and return parameter fields. The JSON data composed of the static feature fields and the dynamic feature fields is serialized and encrypted using an encryption algorithm to generate a unique fingerprint string.

3. The intelligent detection and early warning method for expired front-end interfaces according to claim 1, characterized in that, In step S2, the interface library update rules include: If the real-time request parameters and request method of the interface are consistent with the fingerprint database, and the status code returned by the interface is the preset first type of status identifier code, then the interface is determined to be in an abandoned state and no parameter comparison is performed. If the real-time request parameters and request method of the interface are consistent with the fingerprint database, and the status code returned by the interface is the preset second type status identifier code, then it is determined that the interface has undergone significant changes, and only the input parameter features are compared. If the status code returned by the interface indicates that the request was successful, but the real-time response format of the interface is inconsistent with the format stored in the fingerprint database, it is determined that the interface has undergone a normal change, and the input parameter characteristics and response parameter characteristics are compared.

4. The intelligent detection and early warning method for expired front-end interfaces according to claim 3, characterized in that, The first type of status code includes the 404 status code in the HTTP protocol, and the second type of status code includes the 400 status code in the HTTP protocol. The update rules also include filtering rules: if the status code returned by the interface belongs to the third type of status identifier code that indicates an internal error on the server side, it is determined to be a non-interface structural problem and the update of the interface feature fingerprint database will not be triggered.

5. The intelligent detection and early warning method for expired front-end interfaces according to claim 1, characterized in that, In step S3, the specific method for extracting real-time features and comparing the real-time features with the baseline features stored in the interface feature fingerprint database is as follows: Extract the number of parameters and the data type of each parameter from the real-time request; The number of parameters and their data types are compared one by one with the input parameter field key value sequence and return parameter field type definition pre-stored in the interface feature fingerprint database; if the number of parameters is inconsistent or the data type of any parameter does not match, the consistency comparison is determined to be unsuccessful.

6. The intelligent detection and early warning method for expired front-end interfaces according to claim 1, characterized in that, In step S3, the establishment of the multi-scenario detection mechanism on the front end includes a browser silent detection mode: The system globally listens for user interaction events. When it detects that there is no interaction within a preset time period, it filters out interfaces with no request records within a preset historical period from the interface feature fingerprint database, establishes an interface request queue, and executes the requests in sequence. If a user interaction event is detected during the execution of the request queue, all requests following the current interface are immediately canceled, and the request queue for that interface is cleared.

7. The intelligent detection and early warning method for expired front-end interfaces according to claim 6, characterized in that, In step S3, the establishment of the multi-scene detection mechanism on the front end also includes an active full-scale detection mode: A separate test interface is generated on the front end, and the interface has the permission to read the interface feature fingerprint database; In response to the user's full test command, the interface fingerprints in the interface feature fingerprint database are traversed. The input and return parameter fields in the fingerprint are decrypted and preprocessed, and then displayed on the test interface for the user to view or manually configure the parameters. Construct simulated requests and send them in batches to the backend server. Collect the response status codes and response data structures returned by the batch requests. Reuse the comparison logic in step S3 to perform batch detection and feed the comparison results back to the test interface in real time.

8. The intelligent detection and early warning method for expired front-end interfaces according to claim 7, characterized in that, The browser silent detection mode is executed based on the browser runtime's task scheduling pipeline. Establish a frame-level task pipeline using the browser's requestAnimationFrame interface, and obtain the remaining idle time of the current frame using the requestIdleCallback interface; If there is idle time, the first interface task is retrieved from the interface request queue, placed into the execution queue, and executed; if there is no idle time, the task is suspended and waits for the next frame; the active full-scale detection mode also includes a differentiated detection strategy based on the number of nodes selected by the user: When the system detects that the user has selected multiple interface nodes on the test interface, it locks the input parameter modification function and only sends a simulated request with default input parameters to quickly filter out the interfaces for first-level and second-level warnings. When the system detects that a user has selected a single interface node, it unlocks the input parameter modification function, allowing the user to adjust the input parameters according to the test requirements. This is used to perform a deep comparison with the static rules in the fingerprint database to detect level 3 warnings.

9. The intelligent detection and early warning method for expired front-end interfaces according to any one of claims 1 to 8, characterized in that, In step S4, outputting the corresponding warning information also includes: The warnings are divided into different levels based on the determined life cycle status, with the abandoned state corresponding to the first-level warning, important changes corresponding to the second-level warning, and ordinary changes corresponding to the third-level warning. The detection results are stored in the browser's index database, and a detection report that can be exported as a document is generated based on the data in the index database.

10. A front-end interface expiration intelligent detection and early warning system, characterized in that, include: The fingerprint construction module is used to collect static and dynamic features of the front-end interface, fuse the two to generate a unique fingerprint and store it in the fingerprint database. The rule definition module is used to store the mapping and judgment logic between interface response status, data structure and interface lifecycle status; The detection execution module integrates the network request interception unit and the active scanning unit to obtain real-time characteristics of the interface, and uses an asynchronous task scheduling pipeline to perform consistency comparison between the real-time characteristics and the fingerprint database. The analysis and early warning module is used to determine the interface status based on the comparison results, update the fingerprint database, and display the hierarchical early warning information through a visual interface.

Images