前端错误监控上报公共方法，可在父页面及iframe子页面同时使用

先创建公共文件error-reported.js 内容如下：

/**
 * 获取前端错误信息进行上报
 * @param iframe
 */
export function catchError (iframe) {
  let _this = this || window
  let source = '来自外层框架错误信息：'
  if (iframe) {
    _this = iframe.contentWindow
    source = '来自iframe内部错误信息：'
  }

  _this?.addEventListener('error', function (event) {
    let errorMessage = event && event.message
    let errrorType = event && event.type
    let errorStack = event && event.error && event.error.stack
    let errorLineno = event && event.lineno
    let errorColno = event && event.colno
    let errorHref = event && event.target && event.target.location && event.target.location.href
    let errorPathname = event && event.target && event.target.location && event.target.location.pathname
    let errorParams = event && event.target && event.target.location && event.target.location.search
    let errorOrigin = event && event.target && event.target.location && event.target.location.origin
    let errorSrcElement = event && event.srcElement && event.srcElement.src

    // 可忽略错误，不会在控制台打印，不会中断程序
    if (errorMessage === 'ResizeObserver loop limit exceeded') return

    let errorInfo = {
      source: source, // 报错来源，来自iframe内还是外层
      errorMessage: errorMessage || '', // 报错信息，对应message
      errrorType: errrorType || '', // 报错类型，对应type
      errorStack: errorStack || '', // 报错定位信息，对应error->stack
      errorLineno: errorLineno || '', // 报错行号，对应lineno
      errorColno: errorColno || '', // 报错列号，对应colno
      errorHref: errorHref || '', // 报错完整页面url，对应target->location->href
      errorPathname: errorPathname || '', // 报错路径，对应target->location->pathname
      errorParams: errorParams || '', // 报错路径参数，对应target->location->search
      errorOrigin: errorOrigin || '', // 报错域，对应target->location->origin
      errorSrcElement: errorSrcElement || '', // 资源加载错误，对应target->srcElement->src
    }

    const info = window.JSON.stringify(errorInfo);
    (new Image()).src = `/api/error/report?data=${info}`;

  }, true)
}

 

然后在入口文件最前面引入error-reported.js

本文项目背景：使用art-template模板引擎建立了公共框架，使用iframe进行页面套用。所以整个系统分为两部分，一部分是外层框架部分，一部分是iframe子页面部分。

监控也分为两部分：

1.外层框架错误监控

2.子页面iframe错误监控

 

外层框架直接在引用error-reported.js 的下面调用catchError方法即可，如：

<!-- strat 前端错误上报 -->
<script src="error-reported.js"></script>
<script>
    catchError()
</script>
<!-- end 前端错误上报 -->

 

内部iframe需要首先检测iframe是否已创建实例，再使用new操作符调用catchError方法，如：

var iframe = document.getElementsByClassName("content-iframe")[0]
var loadingBox = document.getElementsByClassName("content-loading-box")[0]
if (iframe) {

    new catchError(iframe)

    if (iframe.attachEvent) {
        // IE
        iframe.attachEvent("onload", function () {
            // TODO 关闭loading动画
        })
    } else {
        // 非IE
        iframe.onload = function () {
            // TODO 关闭loading动画
        }
    }

}