目录

Web组件页面加载失败后如何获取加载异常的信息

问题现象

Web组件加载页面时可能会出现加载异常的情况，此时如何获取加载异常的信息？场景1：网页加载时使用什么方法可以获取到异常信息？场景2：如何获取网络请求和响应的异常信息？场景3：如何监听SSL校验出错？

背景知识

解决方案

完整参考代码如下：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // src可更换为自己业务地址
      Web({ src: 'www.example.com', controller: this.controller })
        .fileAccess(false)
        .geolocationAccess(false)
        .onErrorReceive((event) => {
          if (event) {
            // 部分打印，其他打印可参考onErrorReceive接口
            console.info('getErrorInfo:' + event.error.getErrorInfo());
            console.info('getErrorCode:' + event.error.getErrorCode());
            console.info('url:' + event.request.getRequestUrl());
            // 根据isMainFrame判断是主资源还是子资源报错
            console.info('isMainFrame:' + event.request.isMainFrame());
          }
        })

        .onHttpErrorReceive((event) => {
          if (event) {
            // 部分打印，其他打印可参考onHttpErrorReceive接口
            console.info('url:' + event.request.getRequestUrl());
            // 根据isMainFrame判断是主资源还是子资源报错
            console.info('isMainFrame:' + event.request.isMainFrame());
            console.info('getResponseCode:' + event.response.getResponseCode());
            console.info('getReasonMessage:' + event.response.getReasonMessage());
          }
        })

          // 只加载主资源时通过此方法监听SSL校验错误
        .onSslErrorEventReceive((event) => {
          if (event) {
            console.error('ssl check failed,error is : ' + event.error.toString());
            event.handler.handleCancel();
          }
        })
          // 加载的资源有主资源和子资源时使用此方法监听SSL校验错误
        .onSslErrorEvent((event: SslErrorEvent) => {
          if (event) {
            // 根据isMainFrame判断是主资源还是子资源报错
            console.info('onSslErrorEvent isMainFrame: ' + event.isMainFrame);
            event.handler.handleCancel();
          }
        });
    };
  }
}

总结

回调方法

使用场景说明

onErrorReceive

可以获取到ArkWeb网络协议栈错误列表中的所有错误码，此回调中尽量执行简单逻辑。开发中建议使用此回调，及时获取到错误码，以便定位问题。

onHttpErrorReceive

只可以获取到ArkWeb网络协议栈错误列表大于等于400的HTTP错误，只想获取到网络加载错误时可以使用此回调。

onSslErrorEventReceive

只加载主资源时发生SSL错误会被调用，SSL校验出错时推荐使用handleCancel通知Web取消此请求。

onSslErrorEvent

加载主资源和子资源时发生SSL错误会被调用，可通过isMainFrame判断是否为主资源，SSL校验出错时推荐使用handleCancel通知Web取消此请求。