• 前端错误监控上报公共方法,可在父页面及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动画
            }
        }
    
    }
     
  • 相关阅读:
    [stm32] Systick
    [stm32] GPIO及最小框架
    51单片机-PC数据传输 温度 距离 监控系统设计
    [游戏学习29] Win32 图像处理1
    [51单片机] 串口通讯 简单通信
    [汇编] 闰年计算
    Java常用工具类之ArrayUtil
    常用工具类系列之DateUtil
    SpringBoot 获取当前登录用户IP
    Spring data jpa Specification查询关于日期的范围搜索
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/11310654.html
Copyright © 2020-2023  润新知