Page path processing method and device, computer device, and storage medium

Abstract

This application belongs to the field of data processing technology and relates to a method, apparatus, computer device, and storage medium for processing page paths. This application first obtains the absolute path of the current request in the browser and identifies the target routing component corresponding to the current request based on the absolute path, thereby obtaining the target routing path corresponding to the target routing component. Then, it intercepts the browser request object corresponding to the current request and identifies the current domain name of the browser request object. Finally, it appends the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request. In this way, by adding the target routing path and the absolute path to the current domain name, the page path corresponding to the current request can be generated, thus locating the relevant page corresponding to the current request more quickly, narrowing the scope of investigation, and facilitating the investigation of performance issues such as errors and anomalies.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and in particular to a method, apparatus, computer device, and storage medium for processing page paths. Background Technology

[0002] In existing web systems, the correspondence between front-end requests and page paths is rather vague, making it difficult to analyze the specific page paths corresponding to different front-end requests. This makes it impossible to quickly locate the page corresponding to the front-end request. In this case, if performance issues such as errors or exceptions occur in the front-end request, the scope of elimination is large, making it inconvenient to troubleshoot. Summary of the Invention

[0003] The purpose of this application is to provide a method, apparatus, computer device, and storage medium for processing page paths, so as to solve the problem that if performance problems such as errors or abnormalities occur, the scope of elimination is large and it is inconvenient to troubleshoot.

[0004] To address the aforementioned technical problems, this application provides a method for processing page paths, employing the following technical solution:

[0005] Get the absolute path of the current request in the browser;

[0006] The target routing component corresponding to the current request is determined based on the absolute path, and the target routing path corresponding to the target routing component is obtained;

[0007] Intercept the browser request object corresponding to the current request, and identify the current domain name of the browser request object; and

[0008] The absolute path and the target route path are appended to the current domain name to generate the page path corresponding to the current request.

[0009] Furthermore, the step of determining the target routing component corresponding to the current request based on the absolute path includes:

[0010] Get the createElement method of the React library and traverse the React component tree to obtain the route path of each React component, wherein the React component tree includes all React components rendered by the createElement method;

[0011] The routing paths of each React component are matched with the absolute paths respectively;

[0012] If a match is successful, the matched React component is rendered using a predefined rendering function to obtain the rendered React component, which is then used as the target route component; and

[0013] If the match fails, the React component is re-rendered using the createElement method, and then the process of obtaining the createElement method of the React library and traversing the React component tree to obtain the route path of each React component is returned.

[0014] Furthermore, after a successful match and before the step of rendering the matched route component using a predetermined rendering function, the method further includes:

[0015] Get the current type identifier of the React component after a successful match;

[0016] Compare the current type identifier with the type identifier corresponding to the target routing component;

[0017] If the current type identifier is the same as the type identifier corresponding to the target route component, then continue executing the step of rendering the successfully matched route component using a predetermined rendering function; and

[0018] If the current type identifier is different from the type identifier corresponding to the target routing component, then return to the step of matching the routing paths of each React component with the absolute path respectively.

[0019] Furthermore, the step of identifying the current domain name of the browser request object includes:

[0020] Identify the request interface corresponding to the browser request object;

[0021] If the requested interface is a Fetch interface, intercept the Fetch interface and obtain the first parameter of the interface information of the Fetch interface;

[0022] Identify the first parameter of the interface information; if the first parameter of the interface information is a string object, use the string object as the current domain name of the browser request object; and

[0023] If the first parameter of the interface information is a Request object, the current domain name of the browser request object can be obtained by calling the Request.url method of the Request object.

[0024] Furthermore, the step of appending the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request includes:

[0025] Call the fetch function in JavaScript code and save the fetch function to the predefined originFetch variable;

[0026] The `window.fetch` property is overridden, and a new `fetch` function is defined. In the new `fetch` function, the `Object.assign` method is used to add the absolute path and the target route path to the current domain name; and

[0027] The new fetch function is invoked to initiate a request, thereby generating the page path corresponding to the current request.

[0028] Furthermore, after the steps of confirming the target routing component corresponding to the current request based on the absolute path and intercepting the request object of the browser corresponding to the current request, the method further includes:

[0029] Perform anomaly detection on the target routing component and the request object; and

[0030] When any of the target routing component and the request object encounters an exception, an exception message is generated, and exception handling is performed based on the exception message.

[0031] To address the aforementioned technical problems, embodiments of this application also provide a page path processing apparatus, comprising:

[0032] The first acquisition module is used to obtain the absolute path of the current request in the browser;

[0033] The second acquisition module is used to determine the target routing component corresponding to the current request based on the absolute path, and to acquire the target routing path corresponding to the target routing component;

[0034] The identification module is used to intercept the browser request object corresponding to the current request and identify the current domain name of the browser request object; and

[0035] The generation module is used to append the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request.

[0036] Furthermore, the identification module includes:

[0037] The first identification unit is used to identify the request interface corresponding to the browser request object;

[0038] The acquisition unit is used to intercept the Fetch interface and acquire the first parameter of the interface information of the Fetch interface when the requested interface is the Fetch interface;

[0039] The second identification unit is used to identify the first parameter of the interface information;

[0040] The first processing unit is configured to, if the first parameter of the interface information is a string object, use the string object as the current domain name of the browser request object; and

[0041] The second processing unit is used to obtain the current domain name of the browser request object by calling the Request.url method of the Request object if the first parameter of the interface information is a Request object.

[0042] To address the aforementioned technical problems, this application also provides a computer device, which includes a memory and a processor. The memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the page path processing method described above.

[0043] To address the aforementioned technical problems, this application also provides a computer-readable storage medium storing computer-readable instructions, which, when executed by a processor, implement the steps of the page path processing method described above.

[0044] Compared with the prior art, the embodiments of this application have the following main advantages:

[0045] This application first obtains the absolute path of the current request in the browser and identifies the target routing component corresponding to the current request based on the absolute path, thereby obtaining the target routing path corresponding to the target routing component. Then, it intercepts the browser request object corresponding to the current request and identifies the current domain name of the browser request object. Finally, it appends the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request. In this way, by adding the target routing path and the absolute path to the current domain name, the corresponding page path for the current request can be generated, thus locating the relevant page for the current request more quickly, narrowing the scope of investigation, and facilitating the investigation of performance issues such as errors and anomalies. Attached Figure Description

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

[0047] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;

[0048] Figure 2 A flowchart of an embodiment of the page path processing method according to this application;

[0049] Figure 3 This is a schematic diagram of the structure of an embodiment of the page path processing apparatus according to this application;

[0050] Figure 4 yes Figure 3 A schematic diagram of a specific implementation of the identification module shown;

[0051] Figure 5 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation

[0052] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.

[0053] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0054] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.

[0055] like Figure 1As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0056] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.

[0057] Terminal devices 101, 102, and 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers, etc.

[0058] Server 105 can be a server that provides various services, such as a backend server that supports the pages displayed on terminal devices 101, 102, and 103.

[0059] It should be noted that the page path processing method provided in this application embodiment is generally executed by the server, and correspondingly, the page path processing device is generally set in the server.

[0060] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0061] Continue to refer to Figure 2 The diagram illustrates a flowchart of an embodiment of a page path processing method according to this application. The page path processing method includes the following steps:

[0062] Step S201: Obtain the absolute path of the current request in the browser.

[0063] In this embodiment, the page path processing method runs on the electronic device (e.g., Figure 1The server shown can be connected via wired or wireless means. It should be noted that the aforementioned wireless connection methods may include, but are not limited to, 3G / 4G / 5G connections, WiFi connections, Bluetooth connections, WiMAX connections, Zigbee connections, UWB (ultrawideband) connections, and other currently known or future known wireless connection methods.

[0064] Specifically, taking the page path processing method running on the server as an example, the server obtains the absolute path of the current request in the browser. In this embodiment, the current request refers to an HTTP request initiated in the browser, which can be a request for server-side resources or a request for other server-side resources (such as a content delivery network CDN, third-party APIs, etc.).

[0065] In the embodiments of this application, the absolute path refers to the path corresponding to the page displayed by the browser after receiving the current request, that is, the network address URL (Uniform Resource Locator) in the browser's address bar, which represents the complete network address URL of the current request, including information such as protocol, hostname, path, and query parameters. In other words, the absolute path records the complete request address and can be used to accurately locate a request for a specific resource.

[0066] Step S202: Determine the target routing component corresponding to the current request based on the absolute path, and obtain the target routing path corresponding to the target routing component.

[0067] In this embodiment, after obtaining the absolute path (i.e., the network address URL) of the current request, the server determines the target routing component corresponding to the current request based on the absolute path, and then obtains the target routing path corresponding to the target routing component. Here, the target routing path is the page path to which the current request belongs, which can be used to distinguish requests between different pages.

[0068] Specifically, this step also includes:

[0069] Get the createElement method of the React library and traverse the React component tree to obtain the route path of each React component, wherein the React component tree includes all React components rendered by the createElement method;

[0070] The routing paths of each React component are matched with the absolute paths respectively;

[0071] If a match is successful, the matched React component is rendered using a predefined rendering function to obtain the rendered React component, and the rendered React component is used as the target route component.

[0072] If the match fails, the React component is re-rendered using the createElement method, and then the process of obtaining the createElement method of the React library and traversing the React component tree to obtain the route path of each React component is returned.

[0073] In this embodiment, the main terms mentioned in this application will be explained or defined below with reference to some specific embodiments, as follows:

[0074] The React library is a popular JavaScript library for building user interfaces.

[0075] The `createElement` method is a method in the React library used to create and return React elements (i.e., virtual DOM), and is typically used in conjunction with JSX syntax to implement component rendering.

[0076] DOM, Document Object Model, is a standard model used to represent objects in a webpage (or document) in a browser. It organizes the various objects of the page (or document) in a tree structure, forming a DOM Tree with multiple nodes.

[0077] The React component tree is a hierarchical structure composed of React elements that is dynamically generated at runtime.

[0078] A React component is an abstract concept composed of React elements. It defines methods and properties to describe how the component should be presented in different states and how it should respond to user interactions and other events. React components can be functional components or class components. In the component tree, parent components can contain child components, and child components can nest other child components, forming a hierarchical component tree structure.

[0079] In this step, the `creatElement` method can be understood as the smallest unit of a React component; the rendering of any React component must be achieved through the `creatElement` method. That is, by obtaining the `creatElement` method of the React library, you can obtain all React components rendered by the `creatElement` method in the entire React library, thus enabling a more accurate and concise way to obtain the target route component.

[0080] Specifically, the `createElement` method is a factory function that takes three arguments: type, property object, and child elements, and is used to create React elements. For example, the following code:

[0081] createElement('div',{className:'container'},'HelloWorld!');

[0082] Create a div element using the createElement method, set its class (type) to 'container', and render the text 'Hello World!' inside the div element. In a React application, these React elements are transformed into a tree structure, also known as the React component tree, where each node corresponds to a React component.

[0083] In this embodiment, in the React library, the rendering of React components is accomplished by creating React elements using the createElement method and inserting them into the DOM tree.

[0084] The `createElement` method takes three arguments: type, property object, and child elements. The type can be a string representing an HTML tag, or a custom React component class representing the component to be rendered. The property object is a JavaScript object containing all the React component's properties, used to pass data to the React component. The child element argument can be one or more React elements, representing the child nodes of the React component.

[0085] The `createElement` method doesn't directly render the React component to the page. Instead, it completes the component rendering through a series of operations, including creating a React element, building a virtual DOM tree, and performing DOM diffing. For example, when `createElement` is called, it creates a React element based on the passed parameters (type, attributes, and child nodes) and adds it to the current component's virtual DOM tree. When the React element is updated, it compares the differences between the old and new virtual DOM trees (using the diff algorithm) and only updates the parts that need updating, thus improving performance. Finally, the React element converts the updated virtual DOM tree into a real DOM tree and presents it on the page.

[0086] As described above, by calling the createElement method, React components can be rendered and stored in the React component tree. When executing the createElement method of the React library, the route path of each React component can be obtained by traversing the React component tree. The route component can be managed through the React Router sub-route library in the React library.

[0087] The server obtains the route paths of each React component and can match them with the absolute paths according to the route path matching rules, so as to match the absolute paths with the route paths of the corresponding route components in the React component tree.

[0088] For example, the React component tree uses the React Router library to manage routing; for instance, the React component tree has... <switch>Components and multiple <route>child components, <switch>The component will iterate through all <route>Child components, and only the first one that matches the absolute path is rendered. <route>Child components. If the absolute path is " / about", then components matching " / about" will be... <route>The child component will be rendered (i.e., a successful match), for example: <route>The child component is<Route path=" / about"component={About} / > And the others <route>Child components will be ignored (e.g.:<Route path=" / contact"component={Contact} / > wait).

[0089] If a match is successful, the matched React component is rendered using a predefined rendering function, resulting in a rendered React component, which is then used as the target route component. Generally, the rendering of a React component (i.e., the route component) occurs within a container component, and this container component needs to provide a rendering interface for its child components. Therefore, when rendering the route component, the current route component is passed as a parameter to the container component's rendering interface, thus enabling the replacement of the route component.

[0090] For example, in the React Router library, a Switch component can be used as a container component, which renders the first Route component that is matched. Therefore, when rendering the route component, the current route component (i.e., the React component that has been successfully matched) can be passed as a child component to the Switch component, thereby achieving the rendering replacement of the route component.

[0091] Of course, if the match fails, the React component is re-rendered using the createElement method to update the React component tree, and then the steps of obtaining the React library's createElement method and traversing the React component tree to get the route path of each React component are returned.

[0092] Furthermore, after the successful match and before the step of rendering the matched route component using a predetermined rendering function, the method further includes:

[0093] Get the current type identifier of the React component after a successful match;

[0094] Compare the current type identifier with the type identifier corresponding to the target routing component;

[0095] If the current type identifier is the same as the type identifier corresponding to the target route component, then continue to execute the step of rendering the successfully matched route component through a predetermined rendering function;

[0096] If the current type identifier is different from the type identifier corresponding to the target routing component, then return to the step of matching the routing paths of each React component with the absolute path respectively.

[0097] As mentioned above, in the React library, the type of a React component can be a functional component, a class component, a string (HTML tag name), or a custom React component class. When using JSX syntax, the React component type is converted into a JSX element, and the first parameter of the JSX element is the type of the React component (i.e., the identifier of the React component, which can be a string or a component class).

[0098] In the solution provided in this application, the current type identifier origType (origType refers to the type of React component) of the successfully matched React component is obtained, and the type identifier Route (Route is a type of route component) corresponding to the target route component is defined. At this time, the route component can be identified by judging whether origType is equal to Route.

[0099] If the current type identifier is the same as the type identifier corresponding to the target route component, then the step of rendering the successfully matched route component using a predetermined rendering function continues. If the current type identifier is different from the type identifier corresponding to the target route component, then the step of matching the route paths of each React component with the absolute path is returned. Here, "the current type identifier is the same as the type identifier corresponding to the target route component" means that the value of the React component type is equal to "Route". That is, by comparing the current type identifier with the type identifier corresponding to the target route component, components of other types can be filtered out, thereby accurately determining whether the successfully matched React component is the route component corresponding to the current request.

[0100] Furthermore, after the server confirms the target routing component, it also needs to obtain the target routing path corresponding to the target routing component. Here, a global variable currentPath is defined to record the target routing path.

[0101] In this embodiment, the routing component provides two properties: computedMatch.isExact and computedMatch.page.

[0102] computedMatch.isExact is a boolean value that indicates whether the current route is an exact match. If the boolean value is true, it means that the current route path is exactly the same as the path in the browser's address bar; otherwise, it means that the current route path is only a partial match. It is used to determine whether the current route path is the target route path of the current page.

[0103] `computedMatch.page` is a string representing the page path corresponding to the route component. This property is usually obtained from the props configuration of the route component and can be used to identify the page path rendered by the current route component. Specifically, if it is a boolean value of `true`, it confirms that the route component corresponding to `computedMatch.isExact` is a route within the current page, and in this case, `computedMatch.page` is recorded as the page path of the current page's route component.

[0104] The current page's route refers to the route corresponding to the path displayed in the browser's address bar. When using the React Router routing library, different pages are typically mapped to different routes to achieve page switching. Each route usually corresponds to a specific component (called a route component), which is rendered on the page when the route is accessed. For example, defining two routes: " / " and " / about", corresponding to the Home page and the About page respectively, when the " / " route is accessed, the HomePage component will be rendered on the page; that is, the HomePage component is the current page's route component. When the " / about" route is accessed, the AboutPage component will be rendered on the page; that is, the AboutPage component is the current page's route component.

[0105] Step S203: Intercept the browser request object corresponding to the current request and identify the current domain name of the browser request object.

[0106] In this embodiment, after obtaining the absolute path and target route path of the current request, the server intercepts the browser request object corresponding to the current request and identifies the current domain name of the browser request object. Here, the browser request object is the underlying object corresponding to the browser, and different browser versions have different underlying objects. In this embodiment, the underlying objects include Fetch (Fetch is an interface provided by the Web API for initiating network requests, which can be used to send HTTP requests and obtain response data in the browser. The Fetch API uses a Promise object to encapsulate the asynchronous request process and provides flexible request and response handling methods) and XMLHttpRequest (XMLHttpRequest is an interface provided by the browser for initiating HTTP requests, through which HTTP requests can be sent in the client (browser) and response data can be obtained). This solution does not require modification of the original code, is not coupled with the original code, and is pluggable at any time. It only needs to intercept the underlying object Fetch or XMLHttpRequest to attach the page path to all requests in the system, without having to modify them one by one, thus reducing development costs.

[0107] Step S204: Append the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request.

[0108] In this embodiment, the server obtains the current domain name of the browser request object, appends the absolute path and the target route path to the current domain name, and generates the page path corresponding to the current request. That is, in this solution, the target route component is identified by obtaining the `createElement` method from the React library, along with the target route path corresponding to the target route component. This allows the target route path and absolute path to be added to the current domain name of the HTTP request when an HTTP request is initiated, facilitating the troubleshooting of performance issues such as errors and anomalies.

[0109] This application first obtains the absolute path of the current request in the browser and identifies the target routing component corresponding to the current request based on the absolute path, thereby obtaining the target routing path corresponding to the target routing component. Then, it intercepts the browser request object corresponding to the current request and identifies the current domain name of the browser request object. Finally, it appends the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request. In this way, by adding the target routing path and the absolute path to the current domain name, the corresponding page path for the current request can be generated, thus locating the relevant page for the current request more quickly, narrowing the scope of investigation, and facilitating the investigation of performance issues such as errors and anomalies.

[0110] In some optional implementations of this embodiment, after the steps of confirming the target routing component corresponding to the current request based on the absolute path and the steps of intercepting the request object of the browser corresponding to the current request, the method further includes:

[0111] Perform anomaly detection on the target routing component and the request object;

[0112] When any of the target routing component and the request object encounters an exception, an exception message is generated, and exception handling is performed based on the exception message.

[0113] Since the page path processing method in this application is to obtain the React library and the underlying object Fetch or XMLHttpRequest, the code quality and robustness need to be very high. Therefore, in order to avoid unpredictable situations, we need to perform exception detection on the code to ensure that it can run normally even if it has errors, and to improve the robustness and reliability of the code.

[0114] Specifically, when a program executes a code block that might throw an exception, failure to handle the exception properly could lead to program crashes or other unpredictable problems. Using a try...catch block allows you to catch exceptions and handle them appropriately, such as outputting error messages, rolling back transactions, and retrying requests, thereby ensuring the normal operation and stability of the program.

[0115] In some optional implementations, the underlying objects differ for different browser versions. That is, in this embodiment, the step of identifying the current domain name of the browser request object includes:

[0116] Identify the request interface corresponding to the browser request object;

[0117] If the requested interface is a Fetch interface, intercept the Fetch interface and obtain the first parameter of the interface information of the Fetch interface;

[0118] The first parameter that identifies the interface information;

[0119] If the first parameter of the interface information is a string object, the string object is used as the current domain name of the browser request object;

[0120] If the first parameter of the interface information is a Request object, the current domain name of the browser request object is obtained by calling the Request.url method of the Request object (the Request.url method is used to obtain the complete URL path of the Request object).

[0121] Specifically, the Fetch API uses Promise objects to encapsulate the asynchronous request process and provides flexible request and response handling. In this application, when using the Fetch API, you only need to call the `fetch` function in your JavaScript code. This function accepts a URL string as a parameter and returns a Promise object.

[0122] Promise objects allow for chained requests, enabling operations such as request initiation, request header setting, and response processing. In the solution provided in this application, the Fetch API is used to intercept and modify the browser request object, which can be achieved by globally overriding the `window.fetch` property (which is the global `fetch` method in the browser for retrieving asynchronous resource requests).

[0123] Specifically, the original fetch function can be saved to a variable first, and then a new fetch function can be defined to intercept and modify the request object Fetch before calling the original fetch function. Finally, the new fetch function is assigned to the window.fetch property, and by globally overriding the window.fetch property, the interception and modification of the browser request object Fetch can be achieved.

[0124] Upon intercepting the Fetch interface, the first parameter of the Fetch interface information is obtained. If the first parameter of the interface information is a string object, the string object is used as the current domain name of the browser request object; if the first parameter of the interface information is a Request object, the current domain name of the browser request object is obtained by calling the Request.url method of the Request object (Request.url is a method for requesting URLs).

[0125] Of course, after obtaining the current domain name, it is also necessary to compare the request protocol of the current domain name with the protocol of the current request. For example, if the request protocol of the current domain name is HTTP, and the request protocol of the current request is also HTTP, then the current domain name is considered to be the protocol corresponding to the current request.

[0126] Further, after obtaining the current domain name, the step of appending the absolute path and the target route path to the current domain name to generate the page path corresponding to the current request includes:

[0127] In the JavaScript code, the `fetch` function is called and saved to the predefined `originFetch` variable; the `window.fetch` property is overridden, and a new `fetch` function is defined. In the new `fetch` function, the `Object.assign` method (which adds the values ​​of all enumerable properties from one or more source objects to the target object) is used to add the absolute path and the target route path to the current domain; the new `fetch` function is then called to initiate a request to generate the page path corresponding to the current request.

[0128] This method allows you to append additional target route paths and absolute paths to the current domain name corresponding to the current request, thereby obtaining the page path information corresponding to the current request. This makes it easier to quickly locate the corresponding page and troubleshoot performance issues such as errors and anomalies.

[0129] Furthermore, in some other embodiments, the step of identifying the current domain name of the browser request object includes:

[0130] Identify the request interface corresponding to the browser request object;

[0131] If the request interface is an XMLHttpRequest interface, intercept the XMLHttpRequest.prototype.open and XMLHttpRequest.proptotype.send methods of the XMLHttpRequest interface, and obtain the current interface information of the XMLHttpRequest interface as the current domain name of the browser request object.

[0132] The following is an explanation of the above terms:

[0133] XMLHttpRequest.prototype.open: Used to initialize an HTTP request. This method accepts three parameters: the request method (such as GET, POST, etc.), the request URL, and whether to use asynchronous mode (default is true).

[0134] XMLHttpRequest.prototype.send: This method is used to send a request to the server and retrieve the response data. It accepts an optional parameter to specify the request body (such as the data in a POST request).

[0135] Unlike the fetch method described above, the XMLHttpRequest interface in this embodiment can directly intercept the XMLHttpRequest.prototype.open and XMLHttpRequest.proptotype.send methods to obtain the current interface information of the XMLHttpRequest interface, which can then be used as the current domain name of the browser request object.

[0136] Specifically, the `XMLHttpRequest.prototype.open` method is overridden to intercept and modify the browser request object. The first parameter is the request URL, which can be recorded for later troubleshooting or performance analysis.

[0137] Once the request URL is obtained, the XMLHttpRequest.proptotype.send method is intercepted, and the URL recorded above is obtained as the current domain name. Then, the request protocol of the current domain name is compared with the request protocol of the current request to determine whether the current domain name corresponds to the current request.

[0138] Currently, after obtaining the current domain name, the step of appending the absolute path and the target route path to the current domain name to generate the page path corresponding to the current request includes:

[0139] The absolute path and the target route path are appended to the current domain name, and the XMLHttpRequest.prototype.open and XMLHttpRequest.proptotype.send methods are called to initiate a request to generate the page path corresponding to the current request.

[0140] This method allows you to append additional target route paths and absolute paths to the current domain name corresponding to the current request, thereby obtaining the page path information corresponding to the current request. This makes it easier to quickly locate the corresponding page and troubleshoot performance issues such as errors and anomalies.

[0141] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware with computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When executed, the program can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).

[0142] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0143] Further reference Figure 3 As a response to the above Figure 2 The implementation of the method shown in this application provides an embodiment of a page path processing apparatus, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0144] like Figure 3 As shown, the page path processing device 300 described in this embodiment includes: a first acquisition module 301, a second module 302, an identification module 303, and a generation module 304, wherein:

[0145] The first acquisition module 301 is used to obtain the absolute path of the current request in the browser;

[0146] The second acquisition module 302 is used to determine the target routing component corresponding to the current request based on the absolute path, and to acquire the target routing path corresponding to the target routing component;

[0147] The identification module 303 is used to intercept the browser request object corresponding to the current request and identify the current domain name of the browser request object; and

[0148] The generation module 304 is used to append the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request.

[0149] In this embodiment, the application first obtains the absolute path of the current request in the browser through the first acquisition module 301, and confirms the target routing component corresponding to the current request based on the absolute path, thereby the second acquisition module 302 obtains the target routing path corresponding to the target routing component; then, it intercepts the browser request object corresponding to the current request, and identifies the current domain name of the browser request object through the identification module 303; finally, it appends the absolute path and the target routing path to the current domain name, and generates the page path corresponding to the current request through the generation module 304. In this way, the target routing path and the absolute path can be added to the current domain name to generate the page path corresponding to the current request, that is, to locate the related page corresponding to the current request more quickly, narrow the scope of investigation, and facilitate the investigation of performance problems such as errors and anomalies.

[0150] See Figure 4 This is a schematic diagram of the structure of a specific embodiment of the identification module 303. The identification module 303 in this embodiment includes a first identification unit 3031, an acquisition unit 3032, a second identification unit 3033, a first processing unit 3034, and a second processing unit 3035. Wherein:

[0151] The first identification unit 3031 is used to identify the request interface corresponding to the browser request object;

[0152] The acquisition unit 3032 is used to intercept the Fetch interface and acquire the first parameter of the interface information of the Fetch interface when the requested interface is the Fetch interface;

[0153] The second identification unit 3033 is used to identify the first parameter of the interface information;

[0154] The first processing unit 3034 is configured to, if the first parameter of the interface information is a string object, use the string object as the current domain name of the browser request object; and

[0155] The second processing unit 3035 is used to obtain the current domain name of the browser request object by calling the Request.url method of the Request object if the first parameter of the interface information is a Request object.

[0156] In other words, the identification module 303 provided in this embodiment can accurately obtain the current domain name of the browser request object, so as to attach additional target routing paths and absolute paths to the current domain name corresponding to the current request, thereby obtaining the page path information corresponding to the current request, so as to quickly locate the corresponding page and facilitate the troubleshooting of performance problems such as errors and anomalies.

[0157] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 5 , Figure 5 This is a basic structural block diagram of the computer device in this embodiment.

[0158] The computer device 4 includes a memory 41, a processor 42, and a network interface 43 that are interconnected via a system bus. It should be noted that only the computer device 4 with components 41-43 is shown in the figure; however, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0159] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.

[0160] The memory 41 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as the hard disk or memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, smart memory card (SMC), secure digital card (SD), flash card, etc., equipped on the computer device 4. Of course, the memory 41 may also include both the internal storage unit and its external storage device of the computer device 4. In this embodiment, the memory 41 is typically used to store the operating system and various application software installed on the computer device 4, such as computer-readable instructions for page path processing methods. In addition, the memory 41 can also be used to temporarily store various types of data that have been output or will be output.

[0161] In some embodiments, the processor 42 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is used to execute computer-readable instructions stored in the memory 41 or to process data, such as computer-readable instructions for executing a method for processing the page path.

[0162] The network interface 43 may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 4 and other electronic devices.

[0163] The computer device provided in this embodiment can execute the page path processing method described above. The page path processing method here can be any of the page path processing methods described in the various embodiments above.

[0164] In this embodiment, the application first obtains the absolute path of the current request in the browser and identifies the target routing component corresponding to the current request based on the absolute path, thereby obtaining the target routing path corresponding to the target routing component. Then, it intercepts the browser request object corresponding to the current request and identifies the current domain name of the browser request object. Finally, it appends the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request. In this way, the target routing path and absolute path can be added to the current domain name to generate the page path corresponding to the current request, thus locating the relevant page corresponding to the current request more quickly, narrowing the scope of investigation, and facilitating the investigation of performance issues such as errors and anomalies.

[0165] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by at least one processor to cause the at least one processor to perform the steps of the page path processing method described above.

[0166] In this embodiment, the application first obtains the absolute path of the current request in the browser and identifies the target routing component corresponding to the current request based on the absolute path, thereby obtaining the target routing path corresponding to the target routing component. Then, it intercepts the browser request object corresponding to the current request and identifies the current domain name of the browser request object. Finally, it appends the absolute path and the target routing path to the current domain name to generate the page path corresponding to the current request. In this way, the target routing path and absolute path can be added to the current domain name to generate the page path corresponding to the current request, thus locating the relevant page corresponding to the current request more quickly, narrowing the scope of investigation, and facilitating the investigation of performance issues such as errors and anomalies.

[0167] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0168] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.< / route> < / route> < / route> < / route> < / route> < / switch> < / route> < / switch>

Claims

1. A method of processing a page path, characterized by, Includes the following steps: Get the absolute path of the current request in the browser; The target routing component corresponding to the current request is determined based on the absolute path, and the target routing path corresponding to the target routing component is obtained; Intercept the browser request object corresponding to the current request, and identify the current domain name of the browser request object; as well as Appending the absolute path and the target route path to the current domain name to generate the page path corresponding to the current request specifically includes: calling the fetch function in JavaScript code and saving the fetch function to a predefined originFetch variable; overriding the window.fetch property and defining a new fetch function, in which the Object.assign method is used to add the absolute path and the target route path to the current domain name; and calling the new fetch function to initiate a request to generate the page path corresponding to the current request. The step of determining the target routing component corresponding to the current request based on the absolute path includes: The `createElement` method of the React library is obtained, and the React component tree is traversed to obtain the route path of each React component, wherein the React component tree includes all React components rendered by the `createElement` method; the route path of each React component is matched with the absolute path; if the match is successful, the matched React component is rendered using a predetermined rendering function to obtain the rendered React component, and the rendered React component is used as the target route component; if the match is unsuccessful, the React component is re-rendered using the `createElement` method, and then the process of obtaining the `createElement` method of the React library and traversing the React component tree to obtain the route path of each React component is returned.

2. The processing method of page paths according to claim 1, characterized in that, After a successful match is found, and before the step of rendering the matched route component using a predetermined rendering function, the method further includes: Get the current type identifier of the React component after a successful match; Compare the current type identifier with the type identifier corresponding to the target routing component; If the current type identifier is the same as the type identifier corresponding to the target route component, then continue executing the step of rendering the successfully matched route component using a predetermined rendering function; and If the current type identifier is different from the type identifier corresponding to the target routing component, then return to the step of matching the routing paths of each React component with the absolute path respectively.

3. The method of claim 1, wherein, The step of identifying the current domain name of the browser request object includes: Identify the request interface corresponding to the browser request object; If the requested interface is a Fetch interface, intercept the Fetch interface and obtain the first parameter of the interface information of the Fetch interface; The first parameter of the interface information is identified; If the first parameter of the interface information is a string object, then the string object is used as the current domain name of the browser request object; and If the first parameter of the interface information is a Request object, the current domain name of the browser request object can be obtained by calling the Request.url method of the Request object.

4. The processing method of page paths according to claim 1, characterized in that, After the steps of confirming the target routing component corresponding to the current request based on the absolute path and intercepting the request object of the browser corresponding to the current request, the method further includes: Perform anomaly detection on the target routing component and the request object; and When any of the target routing component and the request object encounters an exception, an exception message is generated, and exception handling is performed based on the exception message.

5. A processing device of a page path, characterized by, include: The first acquisition module is used to obtain the absolute path of the current request in the browser; The second acquisition module is used to determine the target routing component corresponding to the current request based on the absolute path, and to acquire the target routing path corresponding to the target routing component; The identification module is used to intercept the browser request object corresponding to the current request and identify the current domain name of the browser request object; as well as The generation module is used to append the absolute path and the target route path to the current domain name to generate the page path corresponding to the current request. Specifically, it includes: calling the fetch function in JavaScript code and saving the fetch function to a predefined originFetch variable; overriding the window.fetch property and defining a new fetch function, in which the Object.assign method is used to add the absolute path and the target route path to the current domain name; and calling the new fetch function to initiate a request to generate the page path corresponding to the current request. The second acquisition module is further configured to acquire the createElement method of the React library and traverse the React component tree to obtain the routing path of each React component, wherein the React component tree includes all React components rendered by the createElement method; match the routing path of each React component with the absolute path respectively; if the match is successful, render the matched React component using a predetermined rendering function to obtain the rendered React component, and use the rendered React component as the target routing component; and if the match is unsuccessful, re-render the React component using the createElement method, and then return to execute the steps of acquiring the createElement method of the React library and traversing the React component tree to obtain the routing path of each React component.

6. The processing means of page paths according to claim 5, characterized in that, The identification module includes: The first identification unit is used to identify the request interface corresponding to the browser request object; The acquisition unit is used to intercept the Fetch interface and acquire the first parameter of the interface information of the Fetch interface when the requested interface is the Fetch interface; The second identification unit is used to identify the first parameter of the interface information; The first processing unit is configured to, if the first parameter of the interface information is a string object, use the string object as the current domain name of the browser request object; and The second processing unit is used to obtain the current domain name of the browser request object by calling the Request.url method of the Request object if the first parameter of the interface information is a Request object.

7. A computer device comprising a memory and a processor, the memory storing computer-readable instructions, wherein the processor, when executing the computer-readable instructions, implements the steps of the page path processing method as described in any one of claims 1 to 4.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the page path processing method as described in any one of claims 1 to 4.

Images