Application Real-Time Monitoring Service:Integrate a HarmonyOS application

Axios network data collection

1. (Optional) To enable end-to-end distributed tracing, you must insert Alibaba Cloud's custom business request headers into the request. If you do not need distributed tracing, you can skip this step. Note that if you use end-to-end distributed tracing, you must first configure a host whitelist in the console. For more information, see Associate frontend and backend traces in Application Monitoring.

   Important

   You must obtain and assign a new custom header for each network request. Do not reuse the API call results for different request URLs.

   function getInsertHeaderMap(requestUrl: string): Map<string, string> | undefined

   Parameter	Required	Description	Parameter constraints	Result if failed
   requestUrl	Required	Request URL	String. A valid request URL.	The retrieval failed.

   // The example shows how to insert a request header using `AxiosRequestConfig`. You can also implement a request interceptor to process `InternalAxiosRequestConfig.headers` to insert the header.
   import axios, {
     AxiosError,
     AxiosHeaders,
     AxiosResponse,
     AxiosRequestConfig,
     InternalAxiosRequestConfig
   } from '@ohos/axios'
   import { AlibabaCloudRumTrace } from '@alibabacloud_rum/harmony_sdk'
   
   let customHeaders: AxiosHeaders = new AxiosHeaders()
   let traceHeader = AlibabaCloudRumTrace.axios.getInsertHeaderMap("https://www.example.com");
   if (traceHeader) {
     traceHeader.forEach((value: string, key: string) => {
       customHeaders.set(key, value);
     })
   }
   // Insert into the actual request header using AxiosRequestConfig.
   let requestConfig: AxiosRequestConfig = {
     method: this.currMethod,
     headers: customHeaders,
     params: this.currRequestParam
   }
   axios.get("https://www.example.com", requestConfig);

2. (Required) Collect data for normal and abnormal network requests.

   function handleSuccess(requestUrl: string, method: string, responseCode: number,
       requestDataSizeByte?: number, downloadSizeByte?: number,
       timingParam?: object, remoteAddressIP?: string, requestHeader?: Record<string, Object>,
       responseHeader?: Record<string, Object>, resourceType?: string, requestBody?: string)

   Metric description:

   Parameter	Required	Description	Parameter constraints	Result if failed
   requestUrl	Required	Request URL	String. A valid request URL.	The network event is not collected.
   method	Required	Request method	String. For non-HTTP request methods, pass an empty string.	The network event is not collected.
   responseCode	Required	Response code	Number.	The network event is not collected.
   requestDataSizeByte	Optional	Size of the uploaded request data	Number. Unit: bytes.	The network event is not collected.
   downloadSizeByte	Optional	Download size	Number. Unit: bytes.	The network event is not collected.
   timingParam	Optional	Time spent in each phase of the axios request	http.PerformanceTiming	The network event is not collected.
   remoteAddressIP	Optional	Destination IP address	String	The related field is missing for the network event.
   requestHeader	Optional	Request header. This parameter is required to use the distributed tracing feature.	Record type	The related field is missing for the network event.
   responseHeader	Optional	Response header	Record type	The related field is missing for the network event.
   resourceType	Optional	Resource type	String. Follows the Content-Type field of Multipurpose Internet Mail Extensions (MIME) types.	The related field is missing for the network event.
   requestBody	Optional	Request content	String data type	The related field is missing for the network event.

   Collect data for abnormal network requests:

   function handleError(requestUrl: string, method: string, requestDataSizeByte: number, errorParam: Error,requestHeader?: Record<string, Object>)

   Parameter	Required	Description	Parameter constraints	Result if failed
   requestUrl	Required	Request URL	String. A valid request URL.	The network event is not collected.
   method	Required	Request method	String. For non-HTTP request methods, pass an empty string.	The network event is not collected.
   requestDataSizeByte	Required	Size of the uploaded request data	Number. Unit: bytes.	The network event is not collected.
   errorParam	Required	Network error	Business error type	The network event is not collected.
   requestHeader	Optional	Request header	Record type	The related field is missing for the network event.

   The following is an example:

   axios.get("http://www.example.com"，requestConfig).then((responseData: AxiosResponse) => {
     AlibabaCloudRumTrace.axios.handleSuccess("http://www.example.com", "GET", responseData.status, requestDataSize, downloadSize, responseData.performanceTiming);
   }).catch((err: BusinessError) => {
     AlibabaCloudRumTrace.axios.handleError("http://www.example.com", "GET", 0, err);
   });

Webview data collection

Add the SDK collection logic to the lifecycle callbacks of the Web component. The steps are as follows:

1. Insert the JS script:

   In the parameters of javaScriptOnDocumentStart, add AlibabaCloudRumTrace.Web.getScriptItem().

2. Add instrumentation in the `onPageEnd` lifecycle:

   In onPageEnd, add AlibabaCloudRumTrace.Web.onPageEndHilt(this.controller).

3. Destroy the SDK collection resources when the component is uninstalled:

   In onDisAppear, add AlibabaCloudRumTrace.Web.onDisAppearHilt(this.controller).

Code example:

import { AlibabaCloudRumTrace } from '@alibabacloud_rum/harmony_sdk';

Web()
  .javaScriptOnDocumentStart([AlibabaCloudRumTrace.Web.getScriptItem()])
  .onPageEnd(() => {
    AlibabaCloudRumTrace.Web.onPageEndHilt(this.controller); 
    // this.controller: Must be the WebviewController bound to the current Web component.
  })
  .onDisAppear(() => {
    AlibabaCloudRumTrace.Web.onDisAppearHilt(this.controller);
    // this.controller: Must be the WebviewController bound to the current Web component.
  })