前端错误监控上报公共方法,可在父页面及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 ...
随机推荐
- 关于vue给对象新增属性页面不会动态更新
不知道大家有没有遇到过这个问题,当我们给data里边声明或者已经赋值过的对象或者数组,添加新的属性时,如果更新此属性的值是不会动态更新视图的. $set 看以下实例: 我们开始给drug_list追加 ...
- zabbix监控惠普打印机
http://www.ttlsa.com/zabbix/zabbix-monitor-hp-printer/
- 请简述一下 Ajax 的原理及实现步骤
简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行 ...
- 常见iPhone设备尺寸及分辨率(持续更新)
开发中常用的px与pt区别 px就是表示pixel,像素,是屏幕上显示数据的最基本的点: pt就是point,是印刷行业常用单位,等于1/72英寸. px全称为pixel,是一个点,它不是自然界的长度 ...
- nw.js node-webkit基本程序结构与配置package.json配置说明
(一)基本程序结构 如上图,是一个nw程序的基本组织结构,在根目录下有package.json(程序的配置文件)和index.html(可以是任意名称,应用的启动页面):js/css/resource ...
- PHP面向对象-设计模式 单例模式 简单工厂模式 工厂方法模式
1.单例模式 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例.即一个类只有一个对象实例. 要实现每一个类只有一个实例,就需 ...
- ASP.NET对路径"C:/......."的访问被拒绝 解决方法小结 [转载]
问题: 异常详细信息: System.UnauthorizedAccessException: 对路径“C:/Supermarket/output.pdf”的访问被拒绝. 解决方法: 一.在IIS中的 ...
- 【Python基础】_1 Python简介
1 Python简介 Python是一种计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项 ...
- kafka之config/server.properties配置参数说明
broker.id--服务器编号 host.name--推荐写本机ip advertised.host.name--外网访问ip advertised.port--外网访问端口 num.partiti ...
- 获取kafka最新offset-java
之前笔者曾经写过通过scala的方式获取kafka最新的offset 但是大多数的情况我们需要使用java的方式进行获取最新offset scala的方式可以参考: http://www.cnblog ...