先创建公共文件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动画
}
} }
 

前端错误监控上报公共方法,可在父页面及iframe子页面同时使用的更多相关文章

  1. 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

    背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...

  2. 腾讯AlloyTeam发布AlloyLever - 开发调试发布错误监控上报用户问题定位尽在1kb代码

    AlloyLever [官网][Giuhub] 1kb(gzip)代码搞定开发调试发布,错误监控上报,用户问题定位. 支持错误监控和上报 支持 vConsole错误展示 支持开发阶段使用 vConso ...

  3. 父窗口调用iframe子窗口方法

    一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></i ...

  4. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  5. layui 如果调用 from 内嵌入的 iframe子页面方法

    (人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...

  6. 使用AlloyLever来搞定开发调试发布,错误监控上报,用户问题定位

    传送门: # gituhbhttps://github.com/AlloyTeam/AlloyLever # 官网https://alloyteam.github.io/AlloyLever/ 下载和 ...

  7. 实现 iframe 子页面调用父页面中的js方法

    父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <s ...

  8. html中 iframe子页面 与父页面之间的方法调用 ;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 父窗口和iframe子窗口之间相互传递参数和调用函数或方法

    1.父窗口向子窗口传递参数: 可以在url中添加参数:2.html?a=1&b=2&c=3 然后在子页面上可用js解析,提供一个函数: function getQueryStr(sAr ...

随机推荐

  1. rsync aws ec2 pem

    How to use aws ec2 pem http://www.anthonychambers.co.uk/blog/rsync-to-aws-ec2-using-.pem-key/9 方法如下: ...

  2. HBuilder使用逍遥Android模拟器

    Microvirt HBuilder使用逍遥Android模拟器 1.逍遥模拟器安装 地址: 点我下载 2.连接注意事项 a. 复制adb等文件 HBuilder安装目录中tools文件夹下的三个文件 ...

  3. java实验报告&第三周学习总结

    实验报告: 实验1:求水仙花数在C语言中求水仙花数是一个复杂且长的代码,在java中可以通过简单的代码来实现操作,找出水仙花数: 图例如下: 试验2:求13+23-33+43-53.........9 ...

  4. Visual Studio 2019 企业版 注册码 百度云下载

    微软官网下载地址:https://visualstudio.microsoft.com/zh-hans/downloads/ Key: Visual Studio 2019 Enterprise 企业 ...

  5. iOS SDK开发之 .a静态库

    查看.framework静态库的生成及使用单击此处 注:这篇教程将只使用一小部分Objective-C代码,本文主要讲解从开始到应用的详细步骤.环境:xcode 9.2下面我们开始操作: 第一步:创建 ...

  6. 三、robotframework封装的关键字-数据库使用

    1.      从数据库查询结果:   数据库连接:Connect To Database Using Custom Params           用法:Connect To Database U ...

  7. Quartz安装包中的15个example

    Welcome======= Welcome to the Quartz Examples directory. This directory contains 15 examples that sh ...

  8. 阶段3 1.Mybatis_03.自定义Mybatis框架_4.自定义mybatis的编码-解析XML的工具类介绍

    导入xml操作的类和用到的相关包 创建util包,然后把提供好的XMLConfigBuilder.java文件复制3过来 复制过来,里面用到了很多dom4j的东西 打开pom.xml 输入depend ...

  9. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_02.三层架构和ssm框架的对应关系

  10. k8s集群上线web静态网站

    环境准备 一台部署节点,一台master节点,还有两台节点node1,node2 完好的k8s集群环境 思路1: 在node1和node2节点上通过宿主机与容器之间目录映射和端口映射上线静态网站(或动 ...