WebView Data Monitoring¶

WebView data monitoring in UniApp requires integrating the Web Monitoring SDK into the pages accessed by the WebView.

Android only supports offline packaging and uni-mini-program scenarios.

Configuration¶

Configure during Real User Monitoring (RUM) initialization for standard uni-app:

import { rum } from '@/uni_modules/GC-UniPlugin';

rum.setConfig({
    enableTraceWebView: true,
    allowWebViewHost: [
        'example.com'
    ]
});

enableTraceWebView: Whether to enable the WebView RUM bridge, default true;
allowWebViewHost: List of WebView hosts allowed for tracing; if not set, all hosts are collected.

Standard uni-app should complete Mobile SDK and RUM initialization before loading the WebView. For uni-mini-programs, the host App initializes the SDK and RUM; do not initialize them again.

Platform Notes¶

Android and iOS use the standard <web-view>; actual capabilities depend on the Native SDK and packaging method;
HarmonyOS selects the corresponding integration method based on whether the business side holds a WebviewController; see HarmonyOS Integration for details;
The WebView collection capability of uni-mini-programs is provided by the Native SDK integrated into the host App; the Android host also needs to install and apply the ft-plugin.

HarmonyOS Integration¶

The HarmonyOS WebView Bridge must be installed before the target page loads. Depending on whether your business side holds a WebviewController, choose one of the following methods; do not use both methods on the same WebView.

Business Side Does Not Hold WebviewController¶

When a standard uni-app page does not directly manage a WebviewController, use the plugin’s native embedded component gcwebview on the HarmonyOS platform. This component automatically installs the Bridge when the controller is available and releases it when the component is destroyed.

<!-- #ifdef APP-HARMONY -->
<embed
  class="harmony-webview"
  tag="gcwebview"
  :options="{
    src: webviewUrl,
    viewName: 'order-detail'
  }"
></embed>
<!-- #endif -->

<!-- #ifndef APP-HARMONY -->
<web-view :src="webviewUrl" />
<!-- #endif -->

src: The URL of the web page to load;
viewName: Optional Native RUM View name. It is recommended to set a meaningful and stable name for each business WebView; if not set, the default value is webview;
When using gcwebview, there is no need to call rum.attachWebView() or rum.detachWebView().

Business Side Holds WebviewController¶

In HarmonyOS native pages, UTS native WebViews, or uni-mini-program host Apps, if the business code holds a WebviewController itself, call rum.attachWebView() in the controller’s onControllerAttached callback, and ensure the target page has not been loaded yet:

Web({ src: webviewUrl, controller })
  .onControllerAttached(() => {
    rum.attachWebView(controller, 'order-detail');
  });

Release the corresponding Bridge when the WebView is destroyed:

rum.detachWebView(controller);

rum.attachWebView() only takes effect when RUM has been initialized and enableTraceWebView is true. Therefore, you should call rum.setConfig() first, then create the WebView or bind the controller; binding after the page has loaded will miss the Web RUM Bridge for the first document.

Before using this method in a uni-mini-program host App, you must also register the host extension’s registerNativeModules(context) before opening the uni-mini-program for the first time.

Usage Recommendations¶

Integrate the Web Monitoring SDK in the web pages;
Load the WebView after the Native SDK/RUM initialization is complete;
Use allowWebViewHost to restrict the business domains allowed for bridging;
Choose either the gcwebview method or the manual attachWebView() method for HarmonyOS, not both;
Verify the association between WebView data and the current RUM View on real Android, iOS, and HarmonyOS devices.