Skip to content

WebView Data Monitoring¶

This document is used to describe the data collection methods for HarmonyOS WebView scenarios.

Enable Method¶

Enable setEnableTraceWebView(true) in the RUM Configuration, the SDK will automatically collect RUM data in WebView.

Configure Host Whitelist¶

Use setAllowWebViewHost(...) to restrict the hosts that are allowed to use the WebView JavaScript Bridge. The whitelist will be provided to the Browser SDK in the WebView; passing null or an empty array means no host restrictions.

import { FTSDK, FTRUMConfig } from '@guancecloud/ft_sdk/Index';

const rumConfig = new FTRUMConfig()
  .setRumAppId('your-rum-app-id')
  .setEnableTraceWebView(true)
  .setAllowWebViewHost(['example.com', 'm.example.com']);

FTSDK.installRUMConfig(rumConfig);

Usage Example¶

import { FTWebViewHandler } from '@guancecloud/ft_sdk/Index';
import { webview } from '@kit.ArkWeb';

@Component
export struct MyWebViewPage {
  @State webController: webview.WebviewController = new webview.WebviewController();
  private webViewHandler: FTWebViewHandler = new FTWebViewHandler();

  aboutToAppear() {
    this.webViewHandler.setWebView(this.webController);
  }

  aboutToDisappear() {
    this.webViewHandler.clearWebController();
  }

  build() {
    Web({
      src: 'https://example.com',
      controller: this.webController
    })
    .javaScriptAccess(true)
    .javaScriptProxy(this.webViewHandler.getJavaScriptProxy(this.webController))
  }
}

Notes¶

FTWebViewHandler will read the RUM configuration at the application entry point
Bind webController when the page enters, and clean up promptly when the page leaves
If setEnableTraceWebView(true) is not enabled, WebView data will not be automatically collected
When a Host whitelist is set, only the pages in the whitelist can use the JavaScript Bridge