前端错误监控上报公共方法,可在父页面及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 ...
随机推荐
- tensorflow学习——调试ctc的两个bug
InvalidArgumentError (see above for traceback): Not enough time for target transition sequence (requ ...
- leetcode-mid-sorting and searching-75. Sort Colors-NO
mycode 97.95% class Solution(object): def sortColors(self, nums): """ :type nums: L ...
- 如何获得select被选中option的value和text和其他属性值
比如这个: <select id="select"> <option value="A" url="http://www.baidu ...
- Windows程序调用dll
可以写在WndProc的WM_CREATE里面,不能写在WinMain里面
- sql语句exists 用法
参考:SQL语句exists用法,Sql语句中IN和exists的区别及应用 现在有三张表 学生表S: sno ,sname 课程表C:cno ,cname 学生选课表SC: sno ,cno 查询选 ...
- spss中如何处理极端值、错误值
spss中如何处理极端值.错误值 spss中录入数据以后,第一步不是去分析数据,而是要检验数据是不是有录入错误的,是不是有不合常理的数据,今天我们要做一个描述性统计,进而查看哪些数据是不合理的.下面是 ...
- nohup后台运行
1.信息输出 nohup java -jar xxxx.jar & 2.信息不输出 nohup java -jar xxxx.jar >/dev/null 2>&1 &am ...
- xshell 缺少mfc110u.dll
https://www.microsoft.com/zh-CN/download/details.aspx?id=30679 如果 x64 没有反应,就下载 x86 安装试试,
- laradock 部署 php 环境 和 laravel/lumen 框架
环境是windows 10 版本1809,docker 版本18.09.0 首先是下载docker.git, 具体可以参考 http://laradock.io/ 要求 Docker >= 17 ...
- C盘无损扩容(傻逼拯救者128G固态分两个盘)
下载DiskGenius.exe 进行拆分分区(我从d盘拆分出20G给c盘) 然后右键此电脑,管理->磁盘管理 选中刚分出来的20G空间指向到c盘