Front-end abnormality monitoring method, device and system

Abstract

The present application discloses a method, device and system for front-end abnormal monitoring. The present application method includes that when each page is loaded by a browser, the abnormal monitoring toolkit in the page code file is first parsed and executed; during the page operation process, the abnormal monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment; and monitors the triggering of a preset event, the preset event is an event triggered when an abnormality occurs; when the preset event is monitored, the abnormal information is captured; by hijacking the global console.error method, all captured abnormal information is collected; the collected abnormal information and its corresponding first basic information and second basic information are reported to the log server, so that the back-end personnel can view, locate and solve the abnormal information through the monitoring platform. The present application is to enable the problem to be quickly located and solved when an abnormality occurs in an online project.

Description

Technical Field

[0001] The present application relates to the field of application development, and in particular to a method, device and system for front-end abnormality monitoring. Background Art

[0002] The development of application project code is usually divided into front-end development and back-end development. After the project code is developed, it needs to be tested before release, and then released to the production environment after passing the test. For example, for front-end development, the project code will be released to the production environment after passing the test. The operating environment of the HTML file of the project code is usually various webviews and various browsers. Due to different mobile phone operating systems, different mobile phone manufacturers, and different mobile phone operating system versions, the front-end project will have compatibility issues on specific environments and specific models, resulting in code exceptions or direct errors in the running HTML files, affecting the user's operation process and experience. Therefore, it is urgent to propose a front-end exception monitoring method to quickly locate and solve problems when abnormalities occur in online projects. Summary of the invention

[0003] The main purpose of this application is to provide a method, device and system for front-end abnormality monitoring, so that when an abnormality occurs in an online project, the problem can be quickly located and solved.

[0004] In order to achieve the above-mentioned purpose, according to the first aspect of the present application, a method for front-end abnormality monitoring is provided.

[0005] The method for front-end abnormality monitoring according to the present application includes:

[0006] When each page is loaded by the browser, the exception monitoring toolkit in the page code file is first parsed and executed. The exception monitoring toolkit is automatically introduced into each page code file through the plug-in during packaging;

[0007] During the page running process, the exception monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment; and monitors the triggering of a preset event, wherein the preset event is an event triggered when an exception occurs;

[0008] When the preset event is detected, the abnormal information is captured;

[0009] By hijacking the global console.error method, all captured exception information is collected;

[0010] The collected abnormal information and the corresponding first basic information and second basic information are reported to the log server.

[0011] Optionally, the plug-in is a webpack-based plug-in, and the exception monitoring toolkit is automatically introduced into the page code file through the plug-in during packaging, including:

[0012] The exception monitoring toolkit is automatically introduced into each page code file according to the hypertext transfer protocol address, the introduction location and the file type of the exception monitoring toolkit configured in the configuration file.

[0013] Optionally, the abnormal monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment including:

[0014] At least get the version information of the project corresponding to the page code file;

[0015] At least the operating system type, user ID, and device identification information of the loading environment are obtained.

[0016] Optionally, the triggering condition of the monitoring preset event includes:

[0017] Listen for at least one of the following events: onerror event, unhandledrejection event.

[0018] Optionally, reporting the collected abnormal information and the corresponding first basic information and second basic information to the log server includes:

[0019] Report the captured exception information to the log server by using the GET request of the src attribute of the img tag; or

[0020] The data is reported to the log server by POST uploading using the sendBeacon method.

[0021] Optionally, the exception information further includes a cross-domain exception, and the method further includes:

[0022] Add the cross-domain permission attribute to the js files in the page that belong to other domain resources.

[0023] In order to achieve the above-mentioned purpose, according to the second aspect of the present application, another device for front-end abnormality monitoring is provided.

[0024] The device for front-end abnormal monitoring according to the present application includes:

[0025] A parsing and execution module is used for parsing and executing the exception monitoring toolkit in the page code file when each page is loaded by the browser. The exception monitoring toolkit is automatically introduced into each page code file through a plug-in during packaging;

[0026] A monitoring module, used for obtaining the first basic information corresponding to the page code file and the second basic information of the loading environment by the exception monitoring toolkit during the page running process; and monitoring the triggering of a preset event, wherein the preset event is an event triggered when an exception occurs;

[0027] A capture module, used to capture abnormal information after monitoring the triggering of the preset event;

[0028] The collection module is used to collect all captured exception information by hijacking the global console.error method;

[0029] The reporting module is used to report the collected abnormal information and the corresponding first basic information and second basic information to the log server.

[0030] Optionally, the plug-in is a plug-in based on webpack, and the device further includes:

[0031] The introduction module is used to automatically introduce the exception monitoring toolkit into each page code file according to the hypertext transfer protocol address, the introduction location and the file type of the exception monitoring toolkit configured in the configuration file.

[0032] Optionally, the monitoring module further includes:

[0033] A first acquisition unit, used to at least acquire version information of a project corresponding to a page code file;

[0034] The second acquisition unit is used to acquire at least the operating system type, user ID, and device identification information of the loading environment.

[0035] Optionally, the monitoring module further includes:

[0036] The event monitoring unit is used to monitor the triggering of at least one of the following events: onerror event and unhandledrejection event.

[0037] Optionally, the reporting module further includes:

[0038] The first reporting unit is used to report the captured exception information to the log server by making a GET request through the src attribute of the img tag;

[0039] The second reporting unit is used to report to the log server in a POST upload manner using a sendBeacon method.

[0040] Optionally, the exception information further includes a cross-domain exception, and the device further includes:

[0041] Add a module to add cross-domain properties to js files belonging to other domain resources in the page.

[0042] In order to achieve the above object, according to the third aspect of the present application, a system for front-end abnormality monitoring is provided, the system comprising:

[0043] The front end includes a page running in a browser and an exception monitoring toolkit for capturing exception information during page operation. When a page is loaded by a browser, the exception monitoring toolkit is first loaded and run; during page operation, the exception monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment; and monitors the triggering of a preset event, which is an event triggered when an exception occurs; when the preset event is monitored to be triggered, the exception information is captured; by hijacking the global console.error method, all captured exception information is collected; the collected exception information and the corresponding first basic information and second basic information are reported to the log server;

[0044] Log server, used to receive abnormal information reported by the abnormal monitoring toolkit;

[0045] The monitoring platform is used to receive a query request for abnormal information, obtain a file name corresponding to the abnormal information from the log server according to the query request, and locate the position of the error source code according to the sourcemap file corresponding to the file name.

[0046] In order to achieve the above-mentioned purpose, according to the fourth aspect of the present application, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the front-end abnormality monitoring method described in any one of the above-mentioned first aspects.

[0047] In the embodiment of the present application, the method, device and system for front-end abnormal monitoring, when the page is running in the browser, the abnormal monitoring toolkit is introduced, and the abnormal monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment, and the abnormal monitoring toolkit captures the abnormal information by listening to the event, and then collects all the captured abnormal information by hijacking the global console.error method; finally, the collected abnormal information and its corresponding first basic information and second basic information are reported to the log server, so that the back-end personnel can view, locate and solve the abnormal information in time through the monitoring platform. It realizes the rapid positioning of online projects when abnormalities occur. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] The drawings constituting a part of this application are used to provide a further understanding of this application, so that other features, purposes and advantages of this application become more obvious. The schematic embodiment drawings and their descriptions of this application are used to explain this application and do not constitute an improper limitation on this application. In the drawings:

[0049] Figure 1 It is a flow chart of a method for front-end abnormality monitoring provided according to an embodiment of the present application;

[0050] Figure 2 A block diagram of a front-end abnormality monitoring device provided according to an embodiment of the present application;

[0051] Figure 3 It is a block diagram of another device for front-end abnormality monitoring provided according to an embodiment of the present application;

[0052] Figure 4 It is a block diagram of a system for front-end abnormality monitoring provided according to an embodiment of the present application;

[0053] Figure 5 A schematic diagram of the structure of a computer-readable storage medium according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0054] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0055] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described here. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0056] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present application can be combined with each other. The present application will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0057] First of all, it should be noted that this application introduces a custom exception monitoring toolkit (SDK toolkit) for the front-end page when running in various browsers, which realizes the real-time monitoring and collection of abnormal information when the user is using the page. It solves the problem that when the page corresponding to the existing online project is running, if there are abnormalities such as page clicks and jumps, the project background cannot obtain the abnormality in time unless the user gives timely feedback.

[0058] According to an embodiment of the present application, a method for front-end abnormality monitoring is provided, such as Figure 1 As shown, the method comprises the following steps:

[0059] S101. When each page is loaded by the browser, the exception monitoring toolkit in the page code file is first parsed and executed. The exception monitoring toolkit is automatically introduced into each page code file through a plug-in during packaging.

[0060] This application is mainly aimed at front-end development, and the code of the developed page needs to be parsed by the browser for page display and operation. In order to monitor the page operation abnormally, the abnormal monitoring toolkit in the page code file is first parsed and executed. It should be noted that the execution of the abnormal monitoring toolkit is invisible to the user. Since each page is usually not interoperable, in order to monitor each page, it is necessary to introduce an abnormal monitoring tool in each page, that is, the abnormal monitoring toolkit needs to be introduced in each page code file. And because a project usually contains many web pages, if the code of each abnormal monitoring tool is copied to the code file of each page, the efficiency is very low. Therefore, when packaging, this application realizes the automatic introduction of the abnormal monitoring toolkit into the page code file by means of a plug-in, which is very convenient. Specifically, the plug-in is a plug-in based on webpack. When implemented, the hypertext transfer protocol address of the abnormal monitoring toolkit, that is, the HTTP address, the introduced position (top of the page) and the type of the file are configured in the configuration file, and the plug-in needs to be integrated when the page code is packaged.

[0061] In addition, it is necessary to set the import position to the top of the page, which is determined by the order from top to bottom when the browser parses the file. Only when it is at the top of the page can it be parsed first, and all abnormal information on the page can be monitored and captured.

[0062] S102. During the running of the page, the abnormal monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment, and monitors the triggering of the preset event.

[0063] The page code file can be an HTML file, a js file, etc. The first basic information is at least the version information of the project corresponding to the page code file; the second information is at least the operating system type, user ID, and device identification information of the loading environment. The loading environment is the browser and the system and device where the browser is located. Therefore, the second basic information can be: for example, the operating system can be Android, iOS, Windows, etc., the user ID is the account of the user currently logged in to the browser, etc., and the device identification can be the brand, manufacturer, model, etc. of the device where the browser is currently located. The second basic information can also include browser manufacturer identification information, etc.

[0064] Among them, the preset event is an event triggered when an exception occurs; the specific preset event can be an onerror event, an unhandledrejection event, etc. Among them, the onerror event will be triggered when an error occurs during the document or image loading process; the unhandledrejection event is triggered when a Promise error is not handled using catch. It should be noted that these preset events are mainly monitored for Window objects. In actual applications, more events can be monitored according to actual needs, and there is no restriction in this application. That is, the preset event can be any event that can capture exception information through monitoring.

[0065] The preset event will be triggered when the corresponding exception occurs. Therefore, you can judge whether an exception occurs by monitoring the triggering of the preset event and capture subsequent exception information.

[0066] S103. When a preset event is detected, the abnormal information is captured.

[0067] According to the description of the preset events in the previous steps, it can be known that when an exception occurs, the corresponding preset event will be triggered, so when the preset event is monitored to be triggered, the exception can be captured. For the aforementioned onerror event and unhandledrejection event, the exception information that can be captured can be the error information of the JavaScript code exception error in the page, the error stack, the error line number and column number, and the corresponding file name. The error information of the exception error may be caused by problems such as the page cannot be clicked, cannot be displayed, or the display is abnormal.

[0068] S104. Collect all captured exception information by hijacking the global console.error method.

[0069] The global console.error method is to output error information to the console. It is a standard API in the browser. In this scenario, when the web page is running in a third-party browser, the web page code developer background cannot directly obtain the exception information. In order to collect all the exception information, this application hijacks the global console.error method before calling the global console.error method, that is, collects all the error information printed by it. The specific hijacking implementation method can be any function hijacking method in the prior art, such as surroundByTryCatchFactory.

[0070] S105. Report the collected abnormal information and the corresponding first basic information and second basic information to the log server, so that the backend personnel can view, locate and solve the abnormal information through the monitoring platform.

[0071] Report all the collected abnormal information and the first basic information and the second basic information of the drink to the log server. The specific way of reporting to the log server can be the following two:

[0072] The first method: Report to the log server through the GET request of the src attribute of the img tag;

[0073] The value of the src attribute of the img tag is a Uniform Resource Locator (URL). The reporting period can be freely set, for example, the reporting sampling rate can be set to 50%.

[0074] The second method: reporting to the log server by POST uploading through the sendBeacon method.

[0075] The sendBeacon method supports uploading multiple data items and delayed uploading. However, this method has compatibility issues and will be automatically replaced with the first GET method to report exception logs in a host environment that does not support this method.

[0076] After the log service receives the exception information of all pages, the backend monitoring personnel can view the exception information in a timely manner through the monitoring platform to find out whether the online project is running smoothly.

[0077] The monitoring platform can provide the ability to view current exception log information based on the time period, operating system, operating platform (browser manufacturer, device brand, etc.) in which the exception occurred. It can also find the sourcemap file corresponding to the exception information file name and the number of lines and columns where the error occurred, and parse the sourcemap file based on the number of lines and columns. This allows the specific location of the source file where the exception error code occurred to be restored, allowing the error code to be quickly located.

[0078] From the above description, it can be seen that in the front-end exception monitoring method of the embodiment of the present application, when the page is running in the browser, the exception monitoring toolkit is introduced, and the exception monitoring toolkit will obtain the first basic information corresponding to the page code file and the second basic information of the loading environment, and the exception monitoring toolkit captures the exception information by listening to the event, and then collects all captured exception information by hijacking the global console.error method; finally, the collected exception information and its corresponding first basic information and second basic information are reported to the log server, so that the back-end personnel can view, locate and solve the exception information in time through the monitoring platform. It realizes the rapid positioning of online projects when exceptions occur.

[0079] Further, the above embodiments are supplemented or described in detail:

[0080] Since various resources in a page (such as various js files) are usually stored in a distributed manner, that is, stored in servers with different domain names, when the page is running and loading various resources, there will be a need for cross-domain access. Therefore, when performing exception monitoring, it is also necessary to collect cross-domain exceptions. However, browsers usually prohibit cross-domain access for security reasons, especially monitoring cross-domain exceptions. Therefore, in order to solve this problem, this application adds a property that allows cross-domain access to js files belonging to other domain name resources in the page. That is, configure the response header in the server where the js file is stored: access-control-allow-origin: * (where * can be configured as a domain name that can be accessed across domains), allowing the page to obtain exception information in the js file, and add the cross-domain attribute to other js files referenced in the page: crossorigin = 'anonymous'.

[0081] Furthermore, in order to ensure better compatibility of the exception monitoring tool, it is packaged as a UMD version.

[0082] Furthermore, in order to undertake more loads and ensure high availability of services, all exception-related data reported in step S105 are first forwarded through nginx as a proxy, and then the cluster mode is enabled through the pm2 tool to undertake more loads and ensure high availability of services. Finally, the exception log is persistently stored through the mysql server.

[0083] In addition, it should be noted that in order to accurately and quickly locate the source code corresponding to the exception information, a sourcemap file needs to be generated when the page code is packaged. This file will not be put online with the page, but it is only used to accurately and quickly locate the source code when an exception is detected in the subsequent monitoring.

[0084] Finally, the beneficial effects of the front-end abnormality monitoring method of this application are summarized as follows:

[0085] 1. You can log in to the exception platform at any time to check whether the project has reported exception logs, and promptly discover problems beyond the scope of self-testing and code exceptions under specific business scenarios and specific host conditions (operating system / mobile phone brand / system version / specific model / different browser manufacturers);

[0086] 2. The entire system is self-developed and built, which is relatively lightweight, with flexible configuration of information acquisition and is in line with actual business scenarios;

[0087] 3. For specific problems reported by users, the abnormal location can be quickly located and solved in time, greatly improving the efficiency of handling abnormalities.

[0088] It should be noted that the steps shown in the flowcharts of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and that, although a logical order is shown in the flowcharts, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0089] According to an embodiment of the present application, there is also provided a method for implementing the above Figure 1 The front-end abnormal monitoring device of the method, such as Figure 2 As shown, the device comprises:

[0090] The parsing and executing module 21 is used for parsing and executing the abnormal monitoring toolkit in the page code file when each page is loaded by the browser. The abnormal monitoring toolkit is automatically introduced into each page code file through the plug-in during packaging;

[0091] The monitoring module 22 is used for the abnormal monitoring toolkit to obtain the first basic information corresponding to the page code file and the second basic information of the loading environment during the page running process; and monitor the triggering of the preset event, which is an event triggered when an abnormality occurs;

[0092] The capture module 23 is used to capture abnormal information after monitoring the triggering of the preset event;

[0093] The collection module 24 is used to collect all captured exception information by hijacking the global console.error method;

[0094] The reporting module 25 is used to report the collected abnormal information and the corresponding first basic information and second basic information to the log server.

[0095] From the above description, it can be seen that in the front-end abnormal monitoring device of the embodiment of the present application, when the page is running in the browser, the abnormal monitoring toolkit is introduced, and the abnormal monitoring toolkit will obtain the first basic information corresponding to the page code file and the second basic information of the loading environment, and the abnormal monitoring toolkit captures the abnormal information by listening to the event, and then collects all the captured abnormal information by hijacking the global console.error method; finally, the collected abnormal information and its corresponding first basic information and second basic information are reported to the log server, so that the back-end personnel can view, locate and solve the abnormal information in time through the monitoring platform. It realizes the rapid positioning of online projects when abnormalities occur.

[0096] Furthermore, the plug-in is a plug-in based on webpack, and the device also includes:

[0097] The introduction module 26 is used to automatically introduce the exception monitoring toolkit into each page code file according to the hypertext transfer protocol address, the introduction location and the file type of the exception monitoring toolkit configured in the configuration file.

[0098] Further, such as Figure 3 As shown, the monitoring module 22 also includes:

[0099] A first acquisition unit 221 is used to at least acquire version information of a project corresponding to a page code file;

[0100] The second acquisition unit 222 is used to acquire at least the operating system type, user ID, and device identification information of the loading environment.

[0101] Further, such as Figure 3 As shown, the monitoring module 22 also includes:

[0102] The event monitoring unit 223 is used to monitor the triggering of at least one of the following events: onerror event and unhandledrejection event.

[0103] Further, such as Figure 3 As shown, the reporting module 25 also includes:

[0104] The first reporting unit 251 is used to report the captured abnormal information to the log server by making a GET request through the src attribute of the img tag;

[0105] The second reporting unit 252 is used to report to the log server in a POST upload manner using a sendBeacon method.

[0106] Furthermore, the abnormal information also includes cross-domain abnormalities, such as Figure 3 As shown, the device also includes:

[0107] Add module 27, which is used to add a cross-domain-allowed attribute in the js file belonging to other domain name resources in the page.

[0108] Specifically, the specific process of each unit and module in the device of the embodiment of the present application to realize its function can be found in the relevant description in the method embodiment, which will not be repeated here.

[0109] According to an embodiment of the present application, a system for front-end abnormality monitoring is also provided, such as Figure 4 As shown, the system includes

[0110] The front end 31 includes a page running in a browser and an exception monitoring toolkit for capturing exception information during page operation. When the page is loaded by the browser, the exception monitoring toolkit is first parsed and executed; during the page operation, the exception monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment; and monitors the triggering of a preset event, which is an event triggered when an exception occurs; when the preset event is monitored to be triggered, the exception information is captured; by hijacking the global console.error method, all captured exception information is collected; the collected exception information and the corresponding first basic information and second basic information are reported to the log server;

[0111] The log server 32 is used to receive the abnormal information reported by the abnormal monitoring toolkit;

[0112] The monitoring platform 33 is used to receive a query request for abnormal information, obtain a file name corresponding to the abnormal information from the log server according to the query request, and locate the position of the error source code according to the sourcemap file corresponding to the file name.

[0113] Figure 4 The SDK in it is an exception monitoring toolkit, which is responsible for monitoring the front-end page for exceptions. After collecting the exception information and the corresponding first basic information and second basic information, it can be reported to the proxy server in two ways, and then the service cluster is opened through the pm2 tool. Finally, all the reported data is persisted to the log server; after that, when the monitoring platform receives the exception viewing request initiated by the back-end personnel, the exception information can be queried and returned through the log server for the back-end personnel to conduct timely analysis and modification.

[0114] Specifically, the specific process of each unit and module in the device of the embodiment of the present application to realize its function can be found in the relevant description in the method embodiment, which will not be repeated here.

[0115] Figure 5 A schematic diagram of a computer-readable storage medium according to an embodiment of the present application is shown. The computer-readable storage medium 400 stores a computer-readable program code 410 for executing the method steps according to the present application.

[0116] Obviously, those skilled in the art should understand that the above modules or steps of the present application can be implemented by a general computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices, and optionally, they can be implemented by a program code executable by a computing device, so that they can be stored in a storage device and executed by the computing device, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. In this way, the present application is not limited to any specific combination of hardware and software.

[0117] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A method for front-end abnormal monitoring, It is characterized in that The method comprises: When each page is loaded by the browser, the exception monitoring toolkit in the page code file is first parsed and executed. The exception monitoring toolkit is automatically introduced into each page code file through a plug-in during packaging; the exception monitoring toolkit is packaged as a UMD version; During the page running process, the exception monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment; and monitors the triggering of a preset event, wherein the preset event is an event triggered when an exception occurs; When the preset event is detected, the abnormal information is captured; By hijacking the global console.error method, all captured exception information is collected; Report the collected abnormal information and the corresponding first basic information and second basic information to the log server, so that the back-end personnel can view, locate and solve the abnormal information through the monitoring platform; The plug-in is a webpack-based plug-in. The exception monitoring toolkit is automatically introduced into the page code file through the plug-in during packaging, including: Automatically introduce the anomaly monitoring toolkit into each page code file according to the hypertext transfer protocol address, the introduction location and the file type of the anomaly monitoring toolkit configured in the configuration file; The first basic information corresponding to the page code file and the second basic information of the loading environment obtained by the abnormal monitoring toolkit include: At least get the version information of the project corresponding to the page code file; At least obtain the operating system type, user ID, and device identification information of the loading environment; The triggering conditions of the monitoring preset events include: Listen for at least one of the following events: onerror event, unhandledrejection event.

2. According to the method for front-end abnormality monitoring described in claim 1, It is characterized in that The step of reporting the collected abnormal information and the corresponding first basic information and second basic information to the log server includes: Report the captured exception information to the log server by using the GET request of the src attribute of the img tag; or The data is reported to the log server by POST uploading using the sendBeacon method.

3. According to the method for front-end abnormality monitoring described in claim 1, It is characterized in that The exception information also includes a cross-domain exception, and the method further includes: Add the cross-domain permission attribute to the js files in the page that belong to other domain resources.

4. A device for front-end abnormal monitoring, It is characterized in that Implementing the method for front-end abnormality monitoring as described in any one of claims 1 to 3, include: A parsing and execution module is used for parsing and executing the exception monitoring toolkit in the page code file when each page is loaded by the browser. The exception monitoring toolkit is automatically introduced into each page code file through a plug-in during packaging; A monitoring module, used for obtaining the first basic information corresponding to the page code file and the second basic information of the loading environment by the exception monitoring toolkit during the page running process; and monitoring the triggering of a preset event, wherein the preset event is an event triggered when an exception occurs; A capture module, used to capture abnormal information after monitoring the triggering of the preset event; The reporting module is used to report the collected exception information and the corresponding first basic information and second basic information to the log server, so that the backend personnel can view, locate and solve the exception information through the monitoring platform. The plug-in is a webpack-based plug-in, and the introduction module is used to automatically introduce the exception monitoring toolkit into each page code file according to the hypertext transfer protocol address, introduction location and file type of the exception monitoring toolkit configured in the configuration file.

5. A system for front-end abnormality monitoring, implementing the method for front-end abnormality monitoring as claimed in any one of claims 1 to 3, It is characterized in that The system comprises: The front end includes a page running in a browser and an exception monitoring toolkit for capturing exception information during page operation. When the page is loaded by the browser, the exception monitoring toolkit is first parsed and executed; during the page operation, the exception monitoring toolkit obtains the first basic information corresponding to the page code file and the second basic information of the loading environment; and monitors the triggering of a preset event, which is an event triggered when an exception occurs; when the preset event is monitored to be triggered, the exception information is captured; by hijacking the global console.error method, all captured exception information is collected; the collected exception information and the corresponding first basic information and second basic information are reported to the log server; Log server, used to receive abnormal information reported by the abnormal monitoring toolkit; The monitoring platform is used to receive a query request for abnormal information, obtain a file name corresponding to the abnormal information from the log server according to the query request, and locate the position of the error source code according to the sourcemap file corresponding to the file name.

6. A computer-readable storage medium, in, The computer-readable storage medium stores one or more programs, and when the one or more programs are executed by the processor, the method for front-end abnormality monitoring according to any one of claims 1 to 3 is implemented.

Images