zoukankan      html  css  js  c++  java
  • 前端错误监控上报公共方法,可在父页面及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动画
            }
        }
    
    }
     
  • 相关阅读:
    cookie 当天12点 过期
    ps 前端常用技巧
    定时器遇到的坑
    ajax 会遇到的问题总结
    立即执行函数表达式 项目经常用到js 代码Module模式
    Hello world
    div position:fixed后,水平居中的问题
    关于div中图片水平垂直居中的问题
    [学习]Activiti流程引擎 入门(1) 初步认识
    SSO框架介绍前篇
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/11310654.html
Copyright © 2011-2022 走看看