先创建公共文件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. leetcode-mid- 50. Pow(x,n)-NO

    mycode  time limited 例如 x=0.00001 n=2147483647 参考: class Solution(object): def myPow(self, x, n): &q ...

  2. Spring 缓存切面

    缓存切面:[通知+目标方法调用] 缓存操作执行过程: 1)如果是同步调用[sync=true],则首先尝试从缓存中读取数据,读取到则直接返回: 否则执行目标方法,将结果缓存后返回. 2)如果不是同步调 ...

  3. Excel导入导出工具——POI XSSF的使用

    工具简介 POI是Apache提供的一款用于处理Microsoft Office的插件,它可以读写Excel.Word.PowerPoint.Visio等格式的文件. 其中XSSF是poi对Excel ...

  4. IDEA maven 阿里云镜像 下载jar失败

    我在使用IDEA搭建SpringCloud项目的时候,发现很多spring cloud 包总是下载不了.maven配置了阿里云镜像.在换了一下新版的镜像地址以后就可以下包了. 官方答疑:新版maven ...

  5. java 上传文件到FTP(centos中的ftp服务)

    ftp服务器系统:centos7 提供ftp的服务:vsftpd pom.xml 依赖 <dependency> <groupId>commons-net</groupI ...

  6. Unity 实现物体拖拽

    Unity实现拖拽: 也可以继承Unity EventSystem中的接口实现. 当鼠标按下的时候以左键为例: Using System.Collections; Using System.Colle ...

  7. Python学习之==>常用模块

    一.string模块 import string print(string.ascii_letters) # 所有大小写字母 print(string.ascii_lowercase) # 所有小写字 ...

  8. delphi : 窗体的close,free,destroy

    一.我用application.create(TForm2,Form2)语句,创建了Form2,可是调用了Form2.close后,重新调用Form2.show. 刚才所创建的Form2仍然存在.问为 ...

  9. 封装一个windows转发端口的脚本

    使用方法: 1.打开文本编辑工具如(Notepad++) 2.新建文件 3.注意:修改文本的编码字符集为:gb2312 4.将下面代码 复制入文件 5.保存文件名为:transmit.bat 6.双击 ...

  10. Centos6.5安装配置svn服务器

    一. yum安装svn服务器 yum -y install subversion 二. 检测安装结果 svnserve --version //显示安装结果,表示安装成功了 三. 创建代码仓库目录 m ...