Qiankun micro-front-end problem management system and method based on AI large model and storage medium

Abstract

The invention discloses a Qiankun micro-front-end problem management system and method based on an AI large model and a storage medium, and relates to the technical field of software, the Qiankun micro-front-end problem management system comprises a Qiankun micro-front-end main project and a Qiankun micro-front-end sub-project, the main project is provided with a problem management page and a problem feedback switch, error data processing is carried out, an AI large model is called to analyze, error description problems are returned, and the Qiankun micro-front-end problem management system is and the sub-project collects errors, automatically captures the errors when the problem feedback switch is turned on, and reports the errors to the main project. Problem management is performed based on the Qiankun micro front end and by fusing the AI large model, the whole process of problem feedback-solution-query is realized, the problem is not required to be fed back manually by a user, related information of an abnormal problem is recorded automatically, problem library management is also realized, and the user can query autonomously and conveniently.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of software, in particular to a Qiankun micro-frontend problem management system and method based on an AI large model and a storage medium. BACKGROUND

[0002] In the micro-frontend architecture, the Qiankun framework supports independent development and deployment of multiple teams through modularization splitting of the main project and the sub-project. However, as the number of access projects increases, users may encounter various types of errors in the operation process. The traditional diagnosis process requires users to manually reproduce the problem, and developers to collect abnormal information in real time and perform log analysis. This method has high real-time requirements, and when similar problems occur, users cannot independently query whether similar problems exist previously. SUMMARY

[0003] The purpose of the present application is to provide a Qiankun micro-frontend problem management system and method based on an AI large model and a storage medium, which solves the problem of the need for manual reproduction of problems, real-time collection of abnormal logs, and the inability to query historical problem records in the prior art.

[0004] The present application solves the above problems by the following technical solutions:

[0005] A Qiankun micro-frontend problem management system based on an AI large model, comprising a Qiankun micro-frontend main project and a Qiankun micro-frontend sub-project that establish a Qiankun communication mechanism, the Qiankun micro-frontend main project being integrated with a data processing module, an AI calling module, a data storage and display module, and the Qiankun micro-frontend sub-project being integrated with an error collection module, an error reproduction module, and an error reporting module, wherein:

[0006] The error collection module is configured to capture error information of a browser and collect error information;

[0007] The error reproduction module is configured to reproduce errors and send them to the error reporting module;

[0008] The error reporting module is configured to monitor abnormal states in real time, trigger an error data capture mechanism when an abnormality is detected, and report error data to the data processing module of the Qiankun micro-frontend main project;

[0009] The data processing module is configured to encapsulate error data into data of a specified format, obtain the name of the Qiankun micro-frontend sub-project that reports the error data, and send the error data to the AI calling module and the data storage and display module;

[0010] The AI calling module is configured to send error data to an AI large model for analysis and return a description text of the error;

[0011] The data storage and display module is configured to store error data and error description text output by the AI calling module to a database, and add a timestamp, user information and environment information for each piece of error data, and further add a problem management page for displaying historical error data, and further add a problem feedback switch for controlling whether the error reproduction module automatically captures problem associated data in the process of reproducing the problem.

[0012] The application adds a problem management page and a problem feedback switch button in the dry and sky micro front end, the former is used for storing a problem library, and the latter is used for controlling whether to automatically capture problem associated data in the process of reproducing the problem by the user. When the user encounters a problem, first, query the problem management page, whether there is a similar problem, if there is, refer to the solution, otherwise open the switch, start the automatic capture of problem associated information, that is, in the process of manually reproducing the problem by the user, image and text capture will be performed; second, the sub-project that appears the problem will actively report abnormal data to the main project, and after the main project receives and extracts the data, the description text of the user operation is generated through the pre-connected AI large model, and the problem feedback is completed by storing the text and the corresponding abnormal data in the database; finally, when the developer logs in again and opens the problem management page, the detailed problem description and related data can be seen, and the problem feedback-solution-query whole process is realized. The application does not require the user to manually feedback the problem, and automatically records the abnormal problem, and also realizes the problem library management, which is convenient for the user to independently query.

[0013] Further, the error information includes JavaScript errors, Promise errors and HTTP request exceptions, wherein the JavaScript errors and the Promise errors are obtained by listening to the onerror event of the browser; and the HTTP network request exception is monitored by rewriting the XMLHTTPRequest.

[0014] Further, the monitoring of the HTTP request includes monitoring of the request URL, the request method, the request body, the response status code and the response data.

[0015] Further, the method for reproducing the error is to collect the context information of the error occurrence by using a screen recording tool or a screenshot tool.

[0016] The AI large model based dry and sky micro front end problem management system based on the AI large model based dry and sky micro front end problem management method, comprising:

[0017] Step S1, the main project of the Qiankun micro-frontend initializes the global state through Qiankun initGlobalState, sets a variable errorInfo to store error data, and sets a problem feedback switch flag flag, the initial value is false;

[0018] Step S2, when the problem feedback switch is turned on, the problem feedback switch flag flag becomes true, the onerror method in the Qiankun micro-frontend sub-project listens to the onerror event of the browser to obtain log information, calls the XMLHTTPRequest method to monitor HTTP requests, and thus captures error-related information;

[0019] Step S3, the onerror method and the XMLHTTPRequest method in the Qiankun micro-frontend sub-project update the error-related information to the variable errorInfo by calling the setGlobalState method;

[0020] Step S4, the main project of the Qiankun micro-frontend detects the change of the global state change by using the onGlobalStateChange method, and triggers the method once errorInfo changes, and obtains the error data reported by the sub-project through errorInfo; errorInfo contains the application name of the sub-project, and the error data and the application name are matched one by one;

[0021] Step S5, the main project of the Qiankun micro-frontend performs json format processing on the error data;

[0022] Step S6, input the processed data into the AI large model, and output the description text of the error;

[0023] Step S7, store the error data and the description text of the error into the database through the request interface, wherein, a timestamp, user information and environment information are added to each error data;

[0024] Step S8, the user inputs search conditions in the problem management page of the main project to query, and exports the error data found to the user.

[0025] Further, the search conditions include the sub-project name, the behavior operation and the error type.

[0026] Further, the behavior operation fuzzy matches the error description text generated by the AI model.

[0027] Further, the error type includes JavaScript error, network request error and resource loading error.

[0028] Furthermore, the queried error data supports exporting in PDF and Markdown formats.

[0029] A computer storage medium having instructions stored therein, wherein when the instructions are executed on a computer, the computer executes the steps of the Qiankun micro-frontend problem management method implemented based on the AI ​​big model.

[0030] Compared with the prior art, the present invention has the following advantages and beneficial effects:

[0031] This invention is based on the Qiankun micro front-end and integrates the AI ​​big model for problem management, realizing the whole process of problem feedback-solution-query. It solves the problem that users do not need to manually feedback problems, and automatically records relevant information of abnormal problems (user operation history, equipment environment and error data). At the same time, it also realizes problem library management, which is convenient for users to query independently. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 is a system block diagram of the present invention;

[0033] Figure 2 is a flow chart of the present invention;

[0034] Figure 3 This is a flow chart of the main project of Qiankun Micro Front-end in the present invention;

[0035] Figure 4 This is a flow chart of the Qiankun Micro Front-end sub-project in the present invention;

[0036] Figure 5 This is a communication diagram of the Qiankun Micro Front-end main project and the Qiankun Micro Front-end sub-project of the present invention;

[0037] Figure 6 This is a functional block diagram of the Qiankun micro-front-end main engineering problem management page of the present invention. DETAILED DESCRIPTION

[0038] The present invention will be further described in detail below with reference to the examples, but the embodiments of the present invention are not limited thereto.

[0039] Example 1:

[0040] Combined with attachment Figure 1 As shown, a Qiankun micro-frontend problem management system based on an AI large model includes a Qiankun micro-frontend main project and a Qiankun micro-frontend sub-project for establishing a Qiankun communication mechanism. The Qiankun micro-frontend main project integrates a data processing module, an AI call module, and a data storage and display module. The Qiankun micro-frontend sub-project integrates an error collection module, an error reproduction module, and an error reporting module.

[0041] An error collection module is configured to capture error information of the browser and collect error information;

[0042] An error reproduction module is configured to reproduce the error and send it to the error reporting module;

[0043] The error reporting module is configured to monitor abnormal states in real time, trigger an error data capture mechanism when an abnormality is detected, and report error data to a data processing module of the main project of the Qiankun micro-frontend;

[0044] The data processing module is configured to encapsulate error data into data of a specified format, obtain the name of a sub-project of the Qiankun micro-frontend that reports the error data, send the error data to an AI calling module and a data storage and display module;

[0045] The AI calling module is configured to send the error data to an AI large model for analysis and return a description text of the error;

[0046] The data storage and display module is configured to store the error data and the description text of the error output by the AI calling module in a database, add a timestamp, user information and environment information to each piece of error data, add a problem management page for displaying historical error data, and add a problem feedback switch for controlling whether the error reproduction module automatically captures problem-related data during the process of reproducing the problem.

[0047] In the Qiankun micro-frontend, the main project adds a problem management page and a problem feedback switch button, the former is used to store a problem library, and the latter is used to control whether to automatically capture problem-related data during the process of reproducing the problem by the user. When the user encounters a problem, first, query the problem management page to see if there is a similar problem, if there is, refer to the solution, otherwise, open the switch to automatically capture problem-related information, that is, capture images and text during the process of manually reproducing the problem by the user. Second, the sub-project that encounters the problem actively reports abnormal data to the main project, and after the main project receives and extracts the data, generates a description text of the user's operation through a pre-connected AI large model, and stores the text and the corresponding abnormal data in the database, which completes the problem feedback. Finally, when the developer logs in again and opens the problem management page, the detailed problem description and related data can be seen, realizing the whole process of problem feedback-solution-query. The user does not need to manually feedback the problem, and the abnormal problem is automatically recorded, and the problem library management is also realized, which is convenient for the user to query independently.

[0048] Further, the error information includes JavaScript errors, Promise errors, and HTTP request exceptions, wherein the JavaScript errors and the Promise errors are obtained by listening to the onerror event of the browser; and the HTTP network request exception is monitored by rewriting the XMLHTTPRequest.

[0049] Further, the monitoring of the HTTP request includes monitoring of the request URL, the request method, the request body, the response status code, and the response data.

[0050] Further, the method for reproducing the error is to collect the context information of the error occurrence by using a screen recording tool or a screenshot tool.

[0051] Embodiment 2

[0052] On the basis of Embodiment 1, in combination with the accompanying drawings Figures 1-4 As shown in the accompanying drawings, the Qiankun micro-frontend problem management method implemented based on an AI large model includes:

[0053] Step S1, the Qiankun micro-frontend main project initializes the global state by using Qiankun initGlobalState, sets a variable errorInfo to store error data, and sets a problem feedback switch flag, with an initial value of false;

[0054] Step S2, when the problem feedback switch is turned on, the problem feedback switch flag becomes true, the Qiankun micro-frontend sub-project calls the onerror method to listen to the onerror event of the browser, obtains log information, calls the XMLHTTPRequest method to monitor the HTTP request, and thus captures error-related information;

[0055] Step S3, the onerror method and the XMLHTTPRequest method in the Qiankun micro-frontend sub-project update the error-related information to the variable errorInfo by calling the setGlobalState method;

[0056] Step S4, the Qiankun micro-frontend main project detects the change of the global data change by using the onGlobalStateChange method, triggers the method as soon as the errorInfo changes, and obtains the error data reported by the sub-project through the errorInfo; the errorInfo contains the application name of the sub-project, and the error data is matched with the application name one by one, which aims to record the problem library of different projects, so as to facilitate the user to perform conditional query through the sub-project name in the later period; meanwhile, the communication of abnormal data is completed, and the data transmission between the Qiankun micro-frontend main project and the sub-project is realized. For example Figure 5As shown.

[0057] Step S5, the main project of the micro front-end performs json formatting processing on the error data.

[0058] For example:

[0059]

[0060] Wherein, the userId is the username, the errorType is the error type, the statckTrace is the error stack (including browser log information, interface request information), the actionHistory is the operation history, the envInfo is the operation environment, the moduleName is the application name, the img is the error screenshot, and the video is the error video.

[0061] Step S6, input the processed data into the AI large model, and output the description text of the error; for example, the user admin accesses / pageA and clicks the submit button in the Chrome 110 environment, triggers the JS runtime error, and the stack information is...

[0062] Step S7, store the error data and the description text of the error to the database through the request interface, wherein, each error data is added with a timestamp, user information and environment information (such as browser version, operating system, etc.);

[0063] Step S8, the user inputs search conditions on the problem management page of the main project to query, and exports the queried error data to the user, such as Figure 6 As shown.

[0064] Further, the search conditions include sub-project name, behavior operation and error type.

[0065] Further, the behavior operation fuzzy matches the error description text generated by the AI model.

[0066] Further, the error type includes javaScript error, network request error and resource loading error, etc.

[0067] Further, the queried error data supports pdf and markdown format export.

[0068] Embodiment 3:

[0069] On the basis of embodiment 2, a computer storage medium, the computer storage medium stores instructions, when the instructions are executed on the computer, the computer executes the steps of the problem management method of the micro front-end based on the AI large model in embodiment 2.

[0070] Although the present application has been described herein with regard to the illustrative embodiments thereof, those embodiments are merely preferred embodiments of the application and are not intended to limit the scope of the application, which is defined in the claims. It should be understood that various omissions and substitutions of equivalents are contemplated as circumstances might suggest or render expedient, but such are intended to fall within the principles and scope of the present application.

Claims

1. A Qiankun micro-frontend problem management system based on AI big model, characterized by: It includes the Qiankun Micro-frontend main project and Qiankun Micro-frontend sub-project for establishing the Qiankun communication mechanism. The Qiankun Micro-frontend main project integrates the data processing module, AI call module, data storage and display module, and the Qiankun Micro-frontend sub-project integrates the error collection module, error reproduction module and error reporting module: Among them: The error collection module is configured to capture the browser's error message and collect error information; The error reproduction module is configured to reproduce the error and send it to the error reporting module; The error reporting module is configured to monitor abnormal conditions in real time. When an abnormality is detected, the error data capture mechanism is triggered and the error data is reported to the data processing module of the Qiankun micro front-end main project. The data processing module is configured to encapsulate the error data into data in a specified format and obtain the name of the Qiankun micro-front-end sub-project that reported the error data; and send the error data to the AI ​​calling module and the data storage and display module; The AI ​​call module is configured to send error data to the AI ​​big model for parsing and return a description of the error; The data storage and display module is configured to store error data and the error description text output by the AI ​​call module in the database; and to add timestamps, user information, and environmental information to each piece of error data; a problem management page is also added to display historical error data; and a problem feedback switch is added to control whether the error reproduction module automatically captures problem-related data during the problem reproduction process.

2. The Qiankun micro-frontend problem management system based on the AI ​​big model according to claim 1 is characterized in that: The error information includes JavaScript errors, Promise errors and HTTP request exceptions, among which JavaScript errors and Promise errors obtain log information by monitoring the browser's onerror event; HTTP network request exceptions are monitored by rewriting XMLHTTPRequest.

3. The Qiankun micro-frontend problem management system based on the AI ​​big model according to claim 2 is characterized in that: The monitoring of HTTP requests includes monitoring of request URL, request method, request body, response status code and response data.

4. The Qiankun micro-frontend problem management system based on the AI ​​big model according to claim 1 is characterized in that: The method for reproducing the error is to collect context information of the error by using a screen recording tool or a screenshot tool.

5. The Qiankun micro-frontend problem management method based on the AI ​​big model implemented by the Qiankun micro-frontend problem management system based on the AI ​​big model as claimed in claim 1 is characterized in that: include: Step S1: The Qiankun micro-frontend main project initializes the global state through Qiankun initGlobalState, sets the variable errorInfo to store error data, and sets the initial value to an empty object. At the same time, the problem feedback switch flag is set, and the initial value is false; Step S2: When the problem feedback switch is turned on, the problem feedback switch flag becomes true, and the Qiankun Micro Front-end subproject calls the onerror method to monitor the browser's onerror event, obtains log information, and calls the XMLHTTPRequest method to monitor HTTP requests, thereby capturing error-related information; Step S3: The onerror method and the XMLHTTPRequest method in the Qiankun Micro Front-end subproject update the error-related information to the variable errorInfo by calling the setGlobalState method. Step S4: The Qiankun micro-frontend main project uses the onGlobalStateChange method to detect changes in the global data sent. Once errorInfo changes, the method is triggered to obtain the error data reported by the sub-project through errorInfo; errorInfo contains the sub-project application name, and the error data is matched with the application name one by one; Step S5: The Qiankun micro-frontend main project formats the error data in JSON format; Step S6: input the processed data into the AI ​​big model, and output the error description text; Step S7: store the error data and the error description text in the database through the request interface, wherein each error data is added with a timestamp, user information and environment information; Step S8: The user enters search conditions in the problem management page of the main project, and the queried error data is exported to the user.

6. The Qiankun micro-frontend problem management method based on the AI ​​big model according to claim 5 is characterized in that: The search criteria include sub-project name, behavior operation, and error type.

7. The Qiankun micro-frontend problem management method based on the AI ​​big model according to claim 6 is characterized in that: The behavioral operation fuzzily matches the error description text generated by the AI ​​model.

8. The Qiankun micro-frontend problem management method based on the AI ​​big model according to claim 6 is characterized in that: The error types include JavaScript errors, network request errors, and resource loading errors.

9. The Qiankun micro-frontend problem management method based on the AI ​​big model according to claim 6 is characterized in that: The queried error data supports exporting in PDF and Markdown formats.

10. A computer storage medium storing instructions, which, when executed on a computer, causes the computer to execute the steps of the Qiankun micro-frontend problem management method based on the AI ​​big model as described in any one of claims 5 to 9.

Images