A Method and System for Cross-Platform Exception Detection and Repair Based on WebView
By introducing JS bidirectional heartbeat mechanism monitoring, JS function execution identification monitoring and gesture-triggered two-way consistency monitoring in the H5 page and WebView components, the problem of low abnormal detection efficiency in the existing technology is solved, and multi-level real-time monitoring of H5 page and WebView components is realized and abnormal repairs are quickly repaired, improving system stability and user experience.
Patent Information
- Application Number
- CN202510259719.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-06
- Publication Date
- 2025-06-27
- Estimated Expiration
- 2045-03-06
AI Technical Summary
The prior art is inefficient in exception detection and rapid recovery of H5 pages and WebView components, and cannot effectively monitor bidirectional communication exceptions, asynchronous function exceptions and third-party UI component exceptions, resulting in low exception capture efficiency.
The cross-platform exception detection and repair method based on WebView is adopted, and the JS bidirectional heartbeat mechanism monitoring is monitored, the JS function execution identification monitoring and gesture triggering two-way consistency monitoring, and the communication, logic and interaction status of H5 pages and WebView components are monitored in real time, and exceptions are quickly discovered and intelligently repaired.
It realizes multi-level real-time monitoring of H5 pages and WebView components, quickly discovers and repairs exceptions, improves system stability and user experience, and covers multi-level abnormal monitoring such as communication, logic, and interaction.
Smart Images

Figure CN119783118B_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the technical field of cross-platform exception handling, and particularly relates to a method and system for cross-platform exception detection and repair based on WebView. Background Art
[0002] With the wide application of WebView in cross-platform development, the exception detection and rapid recovery of H5 pages and WebView components have become key issues. Traditional exception detection methods usually only monitor H5 pages unidirectionally, ignoring the exceptions of the WebView components themselves, and it is difficult to quickly capture complex asynchronous logic exceptions or exceptions of third-party UI components. The present invention proposes a cross-platform exception detection and repair method based on WebView.
[0003] With the wide use of WebView in mobile applications, H5 pages have become an important tool for cross-platform development. However, due to the complexity of H5 pages themselves and the introduction of third-party UI components, the system often encounters exceptions during operation, including communication interruptions, logical dead loops, and unresponsive user interactions. Existing technologies mostly adopt unidirectional heartbeat mechanisms or global listening schemes, and mainly have the following deficiencies:
[0004] (1) The unidirectional heartbeat mechanism cannot effectively detect two-way communication exceptions;
[0005] (2) It is difficult to monitor exceptions of asynchronous functions or closed-source third-party UI components;
[0006] (3) The exception capture efficiency is low, and it often takes a long time such as 5 seconds to discover exception problems.
[0007] Therefore, we need to develop a cross-platform exception detection and repair method and system based on WebView, which can achieve real-time monitoring of H5 pages and WebView components through a multi-layer listening mechanism, can cover exception monitoring at multiple levels of communication, logic, and interaction, quickly discover and intelligently repair exceptions, and ensure the user experience. Summary of the Invention
[0008] The purpose of the present invention is to provide a cross-platform exception detection and repair method and system based on WebView to solve the problems of low exception detection efficiency and incomplete exception detection in the existing exception handling solutions mentioned in the above background art.
[0009] To achieve the above purpose, the present invention provides a cross-platform exception detection and repair method and system based on WebView. The method is specifically as follows:
[0010] When the app starts, initialize the WebView component, load the H5 page and inject multiple listeners: JS two-way heartbeat mechanism monitoring, JS function execution identifier monitoring, and gesture-triggered two-way consistency monitoring;
[0011] Perform anomaly detection on the operation of the H5 page through the listeners, where the JS two-way heartbeat mechanism monitoring is used to monitor the communication status between the WebView and the H5 page, the JS function execution identifier listener is used to monitor the running status of asynchronous functions, and the gesture-triggered two-way consistency monitoring is used to monitor the consistency of user interaction behaviors;
[0012] After any one of the listeners triggers an anomaly, the system immediately refreshes the H5 page, automatically skips the anomaly function or component, and uploads the anomaly data to the server at the same time. The anomaly data includes the event type and the listener ID;
[0013] The server classifies and analyzes the anomaly data, identifies the anomaly problem, generates a dynamic repair patch for the anomaly problem, and injects it into the H5 page through the WebView to achieve a quick repair of the anomaly problem.
[0014] Based on the foregoing solution, the JS two-way heartbeat mechanism monitoring includes the heartbeat sending and confirmation from the WebView to the H5 page, the heartbeat sending and confirmation from the H5 page to the WebView, two-way heartbeat anomaly detection and triggering, and two-way heartbeat anomaly handling and recovery.
[0015] Based on the foregoing solution, the JS function execution identifier monitoring includes: if the asynchronous function does not trigger the end identifier after triggering the start identifier, it is determined as a logical anomaly.
[0016] Based on the foregoing solution, the gesture-triggered two-way consistency monitoring includes:
[0017] When the user triggers an interaction event, both the H5 page and the WebView capture the interaction event. If the H5 page does not capture it while the WebView captures the interaction event, it is determined that the H5 page is abnormal.
[0018] Based on the foregoing solution, the JS two-way heartbeat mechanism monitoring is specifically as follows:
[0019] The heartbeat sending and confirmation from the WebView to the H5 page: The WebView sends a first heartbeat instruction to the H5 page every a seconds. The first heartbeat instruction is 1 byte in length and has a value of 0. After receiving the first heartbeat instruction, the H5 page needs to immediately return a first confirmation instruction. The first confirmation instruction is 1 byte in length and has a value of 1;
[0020] Heartbeat sending and confirmation from the H5 page to the WebView: The H5 page sends a second heartbeat instruction to the WebView every a seconds. The second heartbeat instruction is 1 byte in length and has a value of 0. After receiving the second heartbeat instruction, the WebView needs to immediately return a second confirmation instruction, which is 1 byte in length and has a value of 1.
[0021] Two-way heartbeat anomaly detection and triggering: If the first confirmation instruction is not received within the specified time threshold after the first heartbeat instruction is sent, or the second confirmation instruction is not received within the specified time threshold after the second heartbeat instruction is sent, it is determined that the communication is abnormal, and heartbeat fast anomaly handling is triggered. If the H5 page or the WebView does not receive the heartbeat signal from the other party for a consecutive a seconds, it is determined to be a serious anomaly (such as component crash, page unresponsive, etc.), and the heartbeat anomaly recovery mechanism is triggered. The specified time threshold is specifically 300 milliseconds.
[0022] Two-way heartbeat anomaly handling and recovery: When the heartbeat fast anomaly handling or the heartbeat anomaly recovery mechanism is triggered, the system will record the anomaly information, including the heartbeat sender, the receiver status, the unconfirmed heartbeat instruction, trigger the page refresh mechanism, re-initialize the H5 page, ensure that the system returns to the normal state, and upload the anomaly log to the server for subsequent analysis and optimization.
[0023] Based on the foregoing solution, the execution identification monitoring of the JS function is specifically as follows:
[0024] During the asynchronous logic operation, monitor the start identification and end identification of the JS function.
[0025] If it is detected that the asynchronous function cannot trigger the end identification, the asynchronous function is determined to be an abnormal function, and the abnormal reasons include page freezing, unresponsiveness, long business logic execution time, and logical infinite loop.
[0026] Start the anomaly reporting mechanism, and automatically refresh the H5 page and skip the abnormal function.
[0027] Based on the foregoing solution, the gesture-triggered two-way consistency monitoring is specifically as follows:
[0028] Initialize gesture monitoring: Set a first gesture listener on the outermost layer of the WebView to capture all gesture events of the user on the screen, and set a second gesture listener on the interactive area of the page to capture the gesture events executed on the H5 page. The gesture events include click, slide, and touch.
[0029] When the user triggers the gesture event, both the H5 page and the WebView capture the gesture event simultaneously. If the H5 page fails to capture the gesture event while the WebView captures it, or if the gesture event captured by the WebView does not match the gesture event passed by the H5 page, it is determined that the gesture trigger of the H5 page is abnormal;
[0030] When it is detected that the gesture trigger is abnormal, the WebView will prompt the user that the H5 page is about to be refreshed, automatically reload the H5 page to restore the normal interaction logic, and upload the abnormal data to the server. The abnormal data includes the abnormal type, the gesture event status value, and the timestamp when the gesture trigger abnormality occurs.
[0031] Based on the foregoing solution, skipping the abnormal function specifically means:
[0032] The H5 page initializes a set List of abnormal method names and defines an abnormal method name map<method name, bool> structure for storing the abnormal functions. Here, the method name is also denoted as the key of the abnormal function, and bool is the status value value, which is of the boolean type. When the value is true, it means that the JS function is determined to be abnormal, and when the value is false, it means that the JS function is normal;
[0033] The WebView defines a data structure map<method name, status value> for receiving JS function names to manage the execution status of the abnormal method name map. The status value of 0 indicates start, and 1 indicates reception;
[0034] When the H5 page executes the JS function, it first determines whether the JS function exists in the abnormal method name map. If it exists, it directly returns. If it does not exist, it passes the method name and the status value to the WebView's received JS function name and executes it normally;
[0035] The received JS function name calls map.put(method name, 0), indicating that the JS function of the H5 page starts to execute and waits for the H5 page to send a JS function execution end instruction. The waiting time threshold is set to b seconds, and b is preferably 12. If the JS function execution end instruction has not been received b seconds after the JS function starts to execute, it means that there is an abnormality in the JS function causing an infinite loop, lag, or serious time-consuming phenomenon. Record the method name in the set List of abnormal method names, pass the method name to the H5 page through the JS interface communication method, and report it to the server. Execute map.remove(method name) in the WebView to remove the method name from the received JS function name;
[0036] If the received JS function name receives the method name and the end status as parameters, it is determined whether the status of the method name is the start status. If so, the code map.remove(method name) is called, indicating that the JS function is executed normally; otherwise, it indicates an exception. The method name is delivered to the H5 page through the JS interface communication method and reported to the server.
[0037] In addition, the present invention also provides a cross-platform exception detection and repair system based on WebView, specifically as follows:
[0038] A listener injection module, which is used to initialize the WebView component and load the H5 page when the App starts, and injects various listeners during the loading process of the H5 page: JS two-way heartbeat mechanism monitoring, JS function execution identifier monitoring, and gesture-triggered two-way consistency monitoring;
[0039] A monitoring module, which is used to perform exception detection on the operation of the H5 page through the various listeners. Among them, the JS two-way heartbeat mechanism monitoring is used to monitor the communication status between the WebView and the H5 page, and the JS function execution identifier listener is used to monitor the running status of asynchronous functions; the gesture-triggered two-way consistency monitoring is used to monitor the consistency of user interaction behaviors;
[0040] An exception reporting module, which is used to immediately refresh the H5 page after any one of the listeners triggers an exception, automatically skip the exception function or component, and at the same time upload the exception data to the server. The exception data includes the event type and the listener ID;
[0041] An exception repair module, which is used to classify and analyze the exception data through the server, identify the exception problem, generate a dynamic repair patch for the exception problem, and inject it into the H5 page through the WebView to achieve rapid repair of the exception problem.
[0042] The present invention has the following advantages and effects compared with the prior art:
[0043] (1) Designing the JS two-way heartbeat mechanism monitoring realizes the two-way communication detection between the WebView and the H5 page, can effectively detect two-way communication exceptions such as component crashes and communication interruptions, and quickly restore the normal state of the page;
[0044] (2) Introducing the JS function execution identifier monitoring, monitoring is performed through the start identifier and the end identifier when an asynchronous function is executed. If the function does not trigger the end identifier or exceeds the set time, it is determined as a logical exception and recorded in the exception method set for filtering. It can perform detection while executing, accurately capture exceptions in asynchronous functions, automatically skip the exception functions and refresh the page, ensuring the stability of the page;
[0045] (3) Design gesture-triggered two-way consistency monitoring to synchronously capture gesture data such as clicks, swipes, and touches in the interaction events between the WebView and the H5 page. If the H5 page fails to capture the events and the captured events are inconsistent with the WebView, it is determined that the interaction is abnormal and the page is automatically restored. This can effectively cover the anomalies of closed-source third-party UI components. Through the consistency monitoring of interaction events, the anomalies of unresponsive H5 pages can be accurately located. Description of the Drawings
[0046] Figure 1 is a flowchart of a cross-platform anomaly detection and repair method based on WebView provided by an embodiment of the present invention;
[0047] Figure 2 is a flowchart of a JS two-way heartbeat mechanism monitoring and JS function execution identifier monitoring solution provided by an embodiment of the present invention;
[0048] Figure 3 is a flowchart of a gesture-triggered two-way consistency monitoring solution provided by an embodiment of the present invention;
[0049] Figure 4 is a flowchart of an anomaly function filtering solution provided by an embodiment of the present invention;
[0050] Figure 5 is a flowchart of a proxy mode automatic addition method start instruction and end instruction solution provided by an embodiment of the present invention;
[0051] Figure 6 is a schematic structural diagram of a cross-platform anomaly detection and repair system based on WebView provided by an embodiment of the present invention. Detailed Embodiments
[0052] In order to more clearly explain the purpose, technical solutions, and advantages of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. The example embodiments can be implemented in multiple forms and should not be construed as limited to the examples described herein; on the contrary, providing these embodiments makes the present invention more comprehensive and complete, and conveys the concept of the example embodiments to those skilled in the art in an all-round manner.
[0053] In addition, the described features, structures, or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, numerous specific details are provided to give a thorough understanding of the embodiments of the present invention. However, those skilled in the art will realize that the technical solutions of the present invention can be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, well-known methods, devices, implementations, or operations are not shown or described in detail to avoid obscuring aspects of the present invention.
[0054] The block diagrams shown in the drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software form, or implemented in one or more hardware modules or integrated circuits, or implemented in different networks and / or processor devices and / or microcontroller devices.
[0055] The flowcharts shown in the drawings are merely illustrative and do not necessarily include all the content and operations / steps, nor are they necessarily executed in the described order. For example, some operations / steps can be decomposed, while some operations / steps can be combined or partially combined, so the actual execution order may change according to the actual situation.
[0056] The present invention will be described in detail below in conjunction with specific embodiments.
[0057] Embodiment 1
[0058] As shown in the attached Figure 1 figures, the embodiments of the present invention provide a method for cross-platform exception detection and repair based on WebView. The specific steps of this method are as follows:
[0059] Step S1: When the App starts, initialize the WebView component, load the H5 page and inject multiple listeners: JS two-way heartbeat mechanism monitoring, JS function execution identifier monitoring, and gesture-triggered two-way consistency monitoring.
[0060] Step S2: Perform exception detection on the operation of the H5 page through the listeners. Among them, the JS two-way heartbeat mechanism monitoring is used to monitor the communication status between the WebView and the H5 page, the JS function execution identifier listener is used to monitor the operation status of asynchronous functions, and the gesture-triggered two-way consistency monitoring is used to monitor the consistency of user interaction behaviors.
[0061] Step S3: After any one of the listeners triggers an exception, the system immediately refreshes the H5 page, automatically skips the exception function or component, and at the same time uploads the exception data to the server. The exception data includes the event type and the listener ID.
[0062] Step S4: The server classifies and analyzes the abnormal data, identifies the abnormal problems, generates dynamic repair patches for the abnormal problems, and injects them into the H5 page through the WebView to achieve rapid repair of the abnormal problems.
[0063] Preferably, the JS two-way heartbeat mechanism monitoring in step S1 includes heartbeat sending and confirmation from the WebView to the H5 page, heartbeat sending and confirmation from the H5 page to the WebView, two-way heartbeat abnormal detection and triggering, and two-way heartbeat abnormal handling and recovery.
[0064] Specifically, the JS two-way heartbeat mechanism monitoring is specifically as follows:
[0065] Heartbeat sending and confirmation from the WebView to the H5 page: The WebView sends a first heartbeat instruction to the H5 page every a seconds. Preferably, a is 5. The first heartbeat instruction is 1 byte in length and its value is 0. After receiving the first heartbeat instruction, the H5 page needs to immediately return a first confirmation instruction, which is 1 byte in length and its value is 1.
[0066] Heartbeat sending and confirmation from the H5 page to the WebView: The H5 page sends a second heartbeat instruction to the WebView every a seconds. The second heartbeat instruction is 1 byte in length and its value is 0. After receiving the second heartbeat instruction, the WebView needs to immediately return a second confirmation instruction, which is 1 byte in length and its value is 1.
[0067] Two-way heartbeat abnormal detection and triggering: If the first confirmation instruction is not received within the specified time threshold after the first heartbeat instruction is sent, or the second confirmation instruction is not received within the specified time threshold after the second heartbeat instruction is sent, it is determined that there is a communication abnormality, and heartbeat rapid abnormal handling is triggered. If the H5 page or the WebView does not receive the heartbeat signal from the other party for a consecutive a seconds, it is determined that there is a serious abnormality (such as component crash, page unresponsiveness, etc.), and the heartbeat abnormal recovery mechanism is triggered. The specified time threshold is preferably 300 milliseconds.
[0068] Two-way heartbeat abnormal handling and recovery: When the heartbeat rapid abnormal handling or the heartbeat abnormal recovery mechanism is triggered, the system will record the abnormal information, including the heartbeat sender, the receiver status, and the unconfirmed heartbeat instruction, trigger the page refresh mechanism, re-initialize the H5 page to ensure that the system returns to the normal state, and upload the abnormal log to the server for subsequent analysis and optimization.
[0069] Preferably, the JS function execution identification monitoring in step S1 includes: if the asynchronous function does not trigger the end identification after triggering the start identification, it is determined as a logical exception.
[0070] Preferably, the two-way consistency monitoring triggered by gestures in step S1 includes:
[0071] When the user triggers an interaction event, both the H5 page and the WebView capture the interaction event simultaneously. If the H5 page does not capture the interaction event while the WebView captures it, it is determined that the H5 page is abnormal, specifically as follows:
[0072] During the operation of the asynchronous logic, monitor the start identification and end identification of the JS function;
[0073] If it is detected that the asynchronous function cannot trigger the end identification, the asynchronous function is determined as an abnormal function, and the reasons for the abnormality include page freezing, unresponsiveness, long business logic execution time, and logical infinite loop;
[0074] Start the abnormal reporting mechanism, and automatically refresh the H5 page and skip the abnormal function.
[0075] Based on the foregoing solution, the two-way consistency monitoring triggered by gestures is specifically as follows:
[0076] Initialize gesture monitoring: Set a first gesture listener on the outermost layer of the WebView to capture all gesture events of the user on the screen, and set a second gesture listener on the interactive area of the page to capture the gesture events executed on the H5 page. The gesture events include single click, swipe, and touch;
[0077] When the user triggers the gesture event, both the H5 page and the WebView capture the gesture event simultaneously. If the H5 page does not capture the gesture event while the WebView captures it, or the gesture event captured by the WebView does not match the gesture event passed by the H5 page, it is determined that the gesture trigger of the H5 page is abnormal;
[0078] When the gesture trigger abnormality is detected, the WebView will prompt the user that the H5 page is about to be refreshed, and automatically reload the H5 page to restore the normal interaction logic, and upload the abnormal data to the server. The abnormal data includes the abnormal type, the gesture event status value, and the timestamp when the gesture trigger abnormality occurred.
[0079] Preferably, the listener ID in step S3 includes:
[0080] The ID of the two-way heartbeat mechanism monitoring of JS: 1;
[0081] ID for monitoring the execution of JS functions: 2;
[0082] ID for gesture-triggered two-way consistency monitoring: 3;
[0083] Preferably, in step S3, skipping the abnormal function specifically means:
[0084] The H5 page initializes a set List of abnormal method names and defines an abnormal method name map<method name, bool> structure for storing the abnormal functions, where the method name is also denoted as the key of the abnormal function, and bool is the status value value, which is of boolean type. When the value is true, it represents that the JS function is determined to be abnormal, and when it is false, it means the JS function is normal;
[0085] The WebView defines a data structure map<method name, status value> for receiving JS function names to manage the execution status of the abnormal method name map. The status is 0 for start and 1 for reception;
[0086] When the H5 page executes the JS function, it first determines whether the JS function exists in the abnormal method name map. If it exists, it directly returns. If it does not exist, it passes the method name and the status value to the WebView's received JS function name and executes it normally;
[0087] The received JS function name calls map.put(method name, 0), indicating that the JS function of the H5 page starts to execute and waits for the H5 page to send a JS function execution end instruction. The waiting time threshold is set to b seconds. If the JS function has not received the JS function execution end instruction b seconds after it starts to execute, there is an abnormality in the JS function causing an infinite loop, lag, or serious time-consuming phenomenon. Record the method name in the abnormal method name set List, pass the method name to the H5 page through the JS interface communication method, and report it to the server. Execute map.remove(method name) in the WebView to remove the method name from the received JS function name;
[0088] If the received JS function name receives the method name and the end status as parameters, it determines whether the status of the method name is the start status. If it is, it calls the map.remove(method name) code, indicating that the JS function executes normally. Otherwise, it indicates an abnormality, passes the method name to the H5 page through the JS interface communication method, and reports it to the server.
[0089] Exemplarily, as shown in the appendix Figure 2The following is a JS two-way heartbeat mechanism monitoring and JS function execution identifier monitoring solution provided by this embodiment:
[0090] When the App starts the WebView, the WebView will register a JS receiving function and a receiving JS heartbeat function;
[0091] The JS heartbeat function is set with a 5-second timeout. If the heartbeat confirmation of the H5 page is not received within 5 seconds, a page exception will occur;
[0092] When the WebView opens a certain H5 page, the page will start a timer and send a heartbeat mechanism to the WebView every 5 seconds. If the WebView does not receive a heartbeat confirmation within 5 seconds, it means that an exception has occurred in the H5 page. The exceptions include page freezing, unresponsiveness, long business logic execution time, logical infinite loop, etc.;
[0093] When the WebView opens a certain H5 page and executes a JS function, it will return the start state before execution and the end state after execution to the JS receiving function of the WebView. If only the start state notification of the JS function is received and the end state notification is not received, it means that an exception has occurred. The exceptions include page freezing, unresponsiveness, long business logic execution time, logical infinite loop, etc. The system will reopen the H5 page and notify the H5 page to filter out the JS functions with exceptions, that is, do not execute the JS functions with exceptions;
[0094] It should be noted that the reason for not executing the JS functions with exceptions is that the WebView is in single-thread mode. Once a certain JS function has an infinite loop, the heartbeat mechanism will be stuck.
[0095] Exemplarily, as shown in the appendix Figure 3 The following is a gesture-triggered two-way consistency monitoring solution provided by this embodiment:
[0096] The App side will perform the top-level gesture monitoring on the WebView, and at the same time, gesture monitoring will also be performed in the H5 page. The gesture monitoring includes click, swipe, and touch events;
[0097] When the WebView monitors a click, swipe, or touch event, it saves the state, monitors the JS receiving function to receive the H5 event and sets a 2-second timeout. At the same time, the H5 page also monitors the gesture event;
[0098] The gesture event monitored by the H5 page is passed to the WebView. The WebView judges whether the gesture events are consistent. If they are consistent, it means normal. If the WebView does not receive the gesture event of the H5 page or the gesture event status is inconsistent, it means an exception. An exception will pop up a Toast prompt to refresh the page and report the exception information to the server side;
[0099] It should be noted that the gesture event status values include: 1: click; 2: slide; 3: touch;
[0100] Exemplarily, as shown in the appendix Figure 4 An abnormal function filtering scheme provided by this embodiment is as follows:
[0101] The names of abnormal methods during H5 page initialization are stored in a map<method name, bool> data structure, where the key is the method name and the value is a bool type status. Here, the value being true indicates that the method is abnormal, and false indicates that the method is normal;
[0102] WebView defines a map<method name, status value> for receiving JS function names. The status value: 0 represents the start identifier, and 1 represents the receiving identifier;
[0103] When the H5 page executes a function, when entering the function body, it first determines whether the function name exists in the abnormal method name structure map. If it exists, it directly returns. If it does not exist, it is executed normally. At the start of execution, the method name and status value are passed to the receiving JS function name of WebView;
[0104] The receiving JS function name in WebView calls map.put(method name, 0) to indicate that the method of the H5 page starts to execute, waits for the H5 page to send an end instruction, and sets a timeout of 12 seconds for receiving the end method instruction. If the method end instruction has not been received after 12 seconds, it is judged that the reason for the method timeout may be due to an abnormal situation such as a dead loop, lag, or serious time-consuming phenomenon in the JS function;
[0105] The method name is recorded in the abnormal method name set List, and the abnormal method name is passed to the H5 page through the JS interface communication method, and then the abnormality is reported to the server;
[0106] Since it has been determined that the method is abnormal and the abnormality of the method has been passed to the H5 page, WebView is no longer used, and the code map.remove(method name) in WebView is synchronously executed to remove the abnormal method name from the map<method name, status value> that defines the receiving JS function name in WebView;
[0107] If the receiving JS function name in WebView receives the end instruction (end) and end status sent by the H5 page as parameters, the map in WebView first determines whether the status of the method name is the start status. If so, it calls the code map.remove(method name), indicating that the JS function in the H5 page executes normally; otherwise, the abnormal method name is passed to the H5 page through the JS interface communication method, and then the abnormality is reported to the server.
[0108] Preferably, as shown in the appendix Figure 4 , the abnormal method name is stored through the browser database storage logic, specifically including:
[0109] The WebView passes the abnormal method name to the H5 page through JS interface communication. When the H5 page receives the abnormal method name, it adds it to the map<method name, status value> cache. When the status value is true, the abnormal method name is synchronized to the browser database. When the H5 page is initialized, it is synchronized from the browser database to the H5 page cache map variable;
[0110] The database version number is used to determine whether the abnormal function is fixed. If the database version newly deployed by the H5 is larger than the version number in the abnormal function data table of the browser database, the abnormal function data table of the browser database is deleted;
[0111] The abnormal function data table of the browser database includes:
[0112] (1) Abnormal function version number data table: tablename: ErrorFuncVersionTable; columns: id (integer, auto-incrementing id); version (string type, only one version number data is stored);
[0113] (2) Abnormal function data table: tablename: ErrorFuncTable; columns: id (integer, auto-incrementing id); func (string type, abnormal function name);
[0114] It should be noted that if the abnormal method name is not stored through the browser database, the abnormal method name storage cache will be cleared after the page is refreshed.
[0115] Specifically, in this embodiment, the method start instruction and end instruction can be automatically added through the proxy mode. As shown in the appendix Figure 5 , it includes the following:
[0116] Add a proxy function through the proxy mode. The parameters of this function are: method object; when calling a JS function, first obtain the method to be executed, pass the method as a parameter to the custom proxy function, and execute the proxy function. In the proxy function, the first step is to pass the method name and the start flag to the WebView, indicating that the method is ready to be executed; the second step is to formally call the method, that is, to formally execute the method; the third step is to pass the method name and the end flag to the WebView; if an exception such as an infinite loop occurs when executing the method, it will be stuck in the second step and the third step cannot be executed;
[0117] It should be noted that communication instructions with the WebView need to be added at the beginning and end of each method in the JS code. If developers add them manually, the efficiency is low, and there is also a risk of forgetting to add them in a team with multiple people assisting, resulting in an imperfect detection system. Therefore, in this embodiment, it is proposed to automatically add method start instructions and end instructions through the proxy mode.
[0118] In this embodiment, a cross-platform exception detection and repair method based on WebView is provided. By initializing the WebView component, loading the H5 page and injecting multiple listeners to detect exceptions in the operation of the H5 page. After any one of the listeners triggers an exception, the system immediately refreshes the H5 page, automatically skips the exception function or component, and at the same time uploads the exception data to the server. The server classifies and analyzes the exception data, identifies the exception problem and automatically generates a dynamic repair patch, which is injected into the H5 page to achieve rapid repair of the exception problem. It can achieve accurate detection and positioning of cross-platform exceptions, and intelligently filter and restore the page for exceptions, enhancing the user experience and optimizing the development process.
[0119] Embodiment 2
[0120] As shown in the Figure 6 accompanying drawings, an embodiment of the present invention provides a cross-platform exception detection and repair system 600 based on WebView, including the following parts:
[0121] The listener injection module 601 is used to initialize the WebView component and load the H5 page when the App starts, and inject multiple listeners during the loading process of the H5 page: JS two-way heartbeat mechanism monitoring, JS function execution identifier monitoring, and gesture-triggered two-way consistency monitoring;
[0122] The monitoring module 602 is used to detect exceptions in the operation of the H5 page through the multiple listeners. Among them, the JS two-way heartbeat mechanism monitoring is used to monitor the communication status between the WebView and the H5 page, and the JS function execution identifier listener is used to monitor the running status of asynchronous functions; the gesture-triggered two-way consistency monitoring is used to monitor the consistency of user interaction behaviors;
[0123] The exception reporting module 603 is used to immediately refresh the H5 page after any one of the listeners triggers an exception, automatically skip the exception function or component, and at the same time upload the exception data to the server. The exception data includes the event type and the listener ID;
[0124] The anomaly repair module 604 is used to classify and analyze the anomaly data through the server, identify the anomaly problems, generate dynamic repair patches for the anomaly problems, and inject them into the H5 page through the WebView to achieve rapid repair of the anomaly problems.
[0125] Those skilled in the art will readily conceive of other embodiments of the present invention after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present invention, which follow the general principles of the present invention and include known common knowledge or conventional technical means in the technical field not disclosed by the present invention. The specification and examples are only regarded as exemplary, and the true scope and spirit of the present invention are pointed out by the claims. It should be understood that the present invention is not limited to the exact structures described above and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present invention is only limited by the appended claims.
Claims
1. A method for cross-platform anomaly detection and repair based on WebView, characterized in that: include: When the App starts, the WebView component is initialized, the H5 page is loaded and multiple listeners are injected, including: JS bidirectional heartbeat mechanism monitoring, JS function execution identification monitoring, gesture trigger bidirectional consistency monitoring; The operation of the H5 page is detected for abnormality through the listener, wherein the JS bidirectional heartbeat mechanism monitor is used to monitor the communication status between the WebView and the H5 page, the JS function execution identification monitor is used to monitor the running status of the asynchronous function, and the gesture trigger bidirectional consistency monitor is used to monitor the consistency of the user interaction behavior; When any of the listeners triggers an exception, the system immediately refreshes the H5 page and automatically skips the abnormal function or component, and uploads the abnormal data to the server, including the event type and the listener ID; The server classifies and analyzes the abnormal data, identifies abnormal problems, generates dynamic repair patches for the abnormal problems, and injects the patches into the H5 page through the WebView to achieve rapid repair of the abnormal problems; The gesture triggers bidirectional consistency monitoring, including: When the user triggers an interaction event, the H5 page and the WebView capture the interaction event at the same time. If the H5 page does not capture the interaction event but the WebView captures the interaction event, the H5 page is determined to be abnormal. Initialize gesture listening: set a first gesture listener in the outermost layer of the WebView to capture all gesture events of the user on the screen, and set a second gesture listener in the interactive area on the H5 page to capture the gesture events performed on the H5 page, which include single click, slide, and touch; When the user triggers the gesture event, the H5 page and the WebView capture the gesture event at the same time. If the H5 page does not capture the gesture event but the WebView captures the gesture event, or the gesture event captured by the WebView does not match the gesture event transmitted by the H5 page, it is determined that the H5 page gesture trigger is abnormal.
2. According to claim 1, a method for cross-platform anomaly detection and repair based on WebView is characterized in that: The JS two-way heartbeat mechanism monitoring includes the heartbeat sending and confirmation from the WebView to the H5 page, the heartbeat sending and confirmation from the H5 page to the WebView, two-way heartbeat anomaly detection and triggering, and two-way heartbeat anomaly processing and recovery.
3. According to the method of claim 1, a cross-platform anomaly detection and repair method based on WebView is characterized in that: The JS function execution identifier monitoring includes: if the asynchronous function does not trigger the end identifier after triggering the start identifier, it is determined to be a logical exception.
4. According to claim 2, a method for cross-platform anomaly detection and repair based on WebView is characterized in that: The JS two-way heartbeat mechanism monitoring is specifically as follows: Heartbeat sending and confirmation from the WebView to the H5 page: the WebView sends a first heartbeat instruction to the H5 page every a seconds, the first heartbeat instruction is 1 byte in length and the value is 0, and the H5 page needs to immediately return a first confirmation instruction after receiving the first heartbeat instruction, the first confirmation instruction is 1 byte in length and the value is 1; Heartbeat sending and confirmation from the H5 page to the WebView: the H5 page sends a second heartbeat instruction to the WebView every a seconds, the second heartbeat instruction is 1 byte in length and the value is 0, and after receiving the second heartbeat instruction, the WebView must immediately return a second confirmation instruction, the second confirmation instruction is 1 byte in length and the value is 1.
5. According to the method of claim 4, a cross-platform anomaly detection and repair method based on WebView is characterized in that: The JS two-way heartbeat mechanism monitoring also includes: The bidirectional heartbeat abnormality detection and triggering: if the first confirmation instruction is not received within the specified time threshold after the first heartbeat instruction is sent, or if the second confirmation instruction is not received within the specified time threshold after the second heartbeat instruction is sent, it is determined as a communication abnormality and the heartbeat fast abnormality processing is triggered; if the H5 page or the WebView does not receive the other party's heartbeat signal for a seconds in a row, it is determined as a serious abnormality and the heartbeat abnormality recovery mechanism is triggered.
6. The method for cross-platform anomaly detection and repair based on WebView according to claim 3, characterized in that: The JS function executes the identification monitoring, specifically: When the asynchronous logic is running, the start and end markers of the JS function are monitored; If it is detected that the asynchronous function cannot trigger the end mark, the asynchronous function is determined to be an abnormal function, and the abnormal reasons include page freeze, no response, long business logic time consumption, and logic dead loop; Start the abnormal reporting mechanism, automatically refresh the H5 page and skip the abnormal function.
7. A method for cross-platform anomaly detection and repair based on WebView according to claim 6, characterized in that: The skipping of the abnormal function is specifically: The H5 page initializes the abnormal method name set List, and defines the abnormal method name map<method name, bool> structure for storing the abnormal function, where the method name is the abnormal function name, and bool is the state value value. When the value is true, it means that the JS function is judged to be abnormal, and when it is false, it means that the JS function is normal; The WebView defines a data structure for receiving a JS function name map<method name, status value>, which is used to manage the execution status of the abnormal method name map, where the status value is 0 for start and 1 for reception; When the H5 page executes the JS function, it first determines whether the JS function exists in the abnormal method name map. If it exists, it returns directly. If it does not exist, it passes the method name and the status value to the receiving JS function name of the WebView and executes normally. The received JS function name calls map.put(method name, 0), indicating that the JS function of the H5 page starts to execute, and waits for the H5 page to send a JS function execution end instruction, and sets the waiting time threshold to b seconds. If the JS function execution end instruction is not received after b seconds of the JS function starting to execute, there is an exception in the JS function.
8. A cross-platform anomaly detection and repair system based on WebView, characterized in that: The system comprises: The listener injection module is used to initialize the WebView component and load the H5 page when the App is started. During the H5 page loading process, multiple listeners are injected: JS bidirectional heartbeat mechanism monitoring, JS function execution identification monitoring, and gesture trigger bidirectional consistency monitoring; A monitoring module, used for detecting abnormalities in the operation of the H5 page through the multiple monitors, wherein the JS bidirectional heartbeat mechanism monitor is used to monitor the communication status between the WebView and the H5 page, and the JS function execution identification monitor is used to monitor the running status of the asynchronous function; the gesture-triggered bidirectional consistency monitor is used to monitor the consistency of the user's interactive behavior; The exception reporting module is used for causing the system to immediately refresh the H5 page and automatically skip the abnormal function or component after any of the listeners trigger an exception, and upload the abnormal data to the server, wherein the abnormal data includes the event type and the listener ID; An abnormality repair module, used to classify and analyze the abnormal data through the server, identify abnormal problems, generate dynamic repair patches for the abnormal problems, and inject them into the H5 page through the WebView to achieve rapid repair of the abnormal problems; The gesture triggers bidirectional consistency monitoring, including: When the user triggers an interaction event, the H5 page and the WebView capture the interaction event at the same time. If the H5 page does not capture the interaction event but the WebView captures the interaction event, the H5 page is determined to be abnormal. Initialize gesture listening: set a first gesture listener in the outermost layer of the WebView to capture all gesture events of the user on the screen, and set a second gesture listener in the interactive area on the H5 page to capture the gesture events performed on the H5 page, which include single click, slide, and touch; When the user triggers the gesture event, the H5 page and the WebView capture the gesture event at the same time. If the H5 page does not capture the gesture event but the WebView captures the gesture event, or the gesture event captured by the WebView does not match the gesture event transmitted by the H5 page, it is determined that the H5 page gesture trigger is abnormal.
Citation Information
Patent Citations
Webpage monitoring method, device and system
CN112528186A
Cited By
Cross-platform WebView packaging device and method based on conditional compiling
CN120994177A
Cross-platform webview encapsulation device and method based on conditional compilation
CN120994177B