前端错误监控上报公共方法,可在父页面及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动画
}
}
}
前端错误监控上报公共方法,可在父页面及iframe子页面同时使用的更多相关文章
- 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...
- 腾讯AlloyTeam发布AlloyLever - 开发调试发布错误监控上报用户问题定位尽在1kb代码
AlloyLever [官网][Giuhub] 1kb(gzip)代码搞定开发调试发布,错误监控上报,用户问题定位. 支持错误监控和上报 支持 vConsole错误展示 支持开发阶段使用 vConso ...
- 父窗口调用iframe子窗口方法
一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></i ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- layui 如果调用 from 内嵌入的 iframe子页面方法
(人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...
- 使用AlloyLever来搞定开发调试发布,错误监控上报,用户问题定位
传送门: # gituhbhttps://github.com/AlloyTeam/AlloyLever # 官网https://alloyteam.github.io/AlloyLever/ 下载和 ...
- 实现 iframe 子页面调用父页面中的js方法
父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <s ...
- html中 iframe子页面 与父页面之间的方法调用 ;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 父窗口和iframe子窗口之间相互传递参数和调用函数或方法
1.父窗口向子窗口传递参数: 可以在url中添加参数:2.html?a=1&b=2&c=3 然后在子页面上可用js解析,提供一个函数: function getQueryStr(sAr ...
随机推荐
- HDU 6625 (01字典树)
题意:给定两个长为n的数组a和b:重新排列a和b,生成数组c,c[i]=a[i] xor b[i]:输出字典序最小的c数组. 分析:将a中的数插入一颗01字典树a中:将b中的数插入一颗01字典树b中: ...
- 待处理bug
https://laravel-china.org/docs/laravel/5.1/installation/1039#installation composer 下载laravel 有问题
- Java 有几种修饰符?分别用来修饰什么
4种修饰符 访问权限 类 包 子类 其他包 public ∨ ∨ ∨ ∨ protect ∨ ∨ ∨ × default ∨ ∨ ...
- leetcode-easy-array-189 Rotate Array
mycode 75.59% class Solution(object): def rotate(self, nums, k): """ :type nums: Lis ...
- Python深度学习读书笔记-4.神经网络入门
神经网络剖析 训练神经网络主要围绕以下四个方面: 层,多个层组合成网络(或模型) 输入数据和相应的目标 损失函数,即用于学习的反馈信号 优化器,决定学习过程如何进行 如图 3-1 所示:多个层 ...
- RocketMQ 主从同步
RocketMQ 的主和从一直在使用 nio 进行数据同步: master master 监听端口 org.apache.rocketmq.store.ha.HAService.AcceptSocke ...
- nginx访问控制用户认证两种方式
一.用户认证1.首先需要用http来生成密码文件即安装apache :yum install -y httpd 生成密码文件:htpasswd -c /usr/local/nginx/conf/htp ...
- HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket
web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...
- Chapter03 第三节 浮点数
3.3 浮点数 3.3.1 浮点数的表示 常规表示:12.34.0.01.8.0 E表示: 2.5e+8(2.5 10^8).7E6(7.0 10^6) (e大小写随意) (e+x或者E-x表示小数点 ...
- python pandas 自动生成批量测试数据插入数据库 mysql
1.python连接数据库游标 # coding:utf-8 from sqlalchemy import create_engine class connet_databases: def __in ...