前端錯誤監控上報公共方法，可在父頁面及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動畫
        }
    }

}