前端错误监控上报公共方法,可在父页面及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 ...
随机推荐
- LInux 下PHP环境配置 Redis 总结
系统 Deepin ,环境 PHP7.0 + Apache2 安装 Redis 服务 sudo apt-get install redis-server //安装 sudo /etc/init.d/r ...
- 你的第一个Quartz程序
package org.quartz.examples.example1; import java.util.Date; import org.slf4j.Logger; import org.slf ...
- 让DOM元素自动滚到视野内ScrollIntoView
概述 项目中需要把一个DOM元素自动滚动到视野内,百思不得其解,最后再element库里面发现了这个方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料:element scroll-int ...
- Zabbix4.0.1使用自带模板监控Linux主机 CPU、内存、硬盘、网卡
环境: 前提已经安装好zabbix服务端.zabbix客户端, zabbix_server端ip和主机名信息: ip:192.168.1.204 hostname: www.test.com ...
- C# Hook 方法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- IntelliJ IDEA 2019.1.1 maven框架web.xml中web-app版本过低导致不能正常使用EL表达式的解决方案
1.软件版本 IDEA版本:IntelliJ IDEA 2019.1.1 maven版本:apache-maven-3.6.1 Tomcat版本:tomcat-8.5 2.问题描述 IDEA使用如下 ...
- session 、cookie、token的区别(转)
session session的中文翻译是“会话”,当用户打开某个web应用时,便与web服务器产生一次session.服务器使用session把用户的信息临时保存在了服务器上,用户离开网站后ses ...
- [ScreenOS] How to manually generate a new system self-signed certificate to replace the expired system self-signed certificate without resetting the firewall
SUMMARY: This article provides information on how to manually generate a new system self-signed cert ...
- python-应用OpenCV和Python进行SIFT算法的实现
如下图为进行测试的q和h,分别验证基于BFmatcher.FlannBasedMatcher等的SIFT算法 代码如下: import numpy as np import cv2 from matp ...
- input函数以及while处理列表和字典
一.函数input()的工作原理 .input()函数:获取输入的字符串 示例: message = input('请输入信息,方便电脑显示') print(message) print('您输入的信 ...