前端错误监控上报公共方法,可在父页面及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动画
        }
    }

}
 
原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/11310654.html