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

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

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

    _this.addEventListener('error', function (event) {
        console.log(source, event)
        // TODO 错误上报
    }, 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动画
        }
    }

}