web前端监控的三个方面探讨
一. js错误监控方式
1. 主动判断
我们在一些运算之后,得到一个期望的结果,然而结果不是我们想要的
// test.js
function calc(){
// code...
return val;
}
if(calc() !== "someVal"){
Reporter.send({
position: "test.js::<Function>calc"
msg: "calc error"
});
}
这种属于逻辑错误/状态错误的反馈,在接口 status
判断中用的比较多。
2. try..catch
捕获
判断一个代码段中存在的错误:
try {
init();
// code...
} catch(e){
Reporter.send(format(e));
}
以 init
为程序的入口,代码中所有同步执行出现的错误都会被捕获,这种方式也可以很好的避免程序刚跑起来就挂。
3. window.onerror
捕获全局错误:
window.onerror = function() {
var errInfo = format(arguments);
Reporter.send(errInfo);
return true;
};
在上面的函数中返回 return true
,错误便不会暴露到控制台中。下面是它的参数信息:
/**
* @param {String} errorMessage 错误信息
* @param {String} scriptURI 出错的文件
* @param {Long} lineNumber 出错代码的行号
* @param {Long} columnNumber 出错代码的列号
* @param {Object} errorObj 错误的详细信息,Anything
*/
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
// code..
}
window.onerror
算是一种特别暴力的容错手段,try..catch
也是如此,他们底层的实现就是利用 C/C++ 中的 goto
语句实现,一旦发现错误,不管目前的堆栈有多深,不管代码运行到了何处,直接跑到顶层或者 try..catch
捕获的那一层,这种一脚踢开错误的处理方式并不是很好。
关于 window.onerror 还有两点需要值得注意
- 对于 onerror 这种全局捕获,最好写在所有 JS 脚本的前面,因为你无法保证你写的代码是否出错,如果写在后面,一旦发生错误的话是不会被 onerror 捕获到的。
- 另外 onerror 是无法捕获到网络异常的错误。
当我们遇到 <img src="./404.png">
报 404 网络请求异常的时候,onerror 是无法帮助我们捕获到异常的。
<script>
window.onerror = function (msg, url, row, col, error) {
console.log('我知道异步错误了');
console.log({
msg, url, row, col, error
})
return true;
};
</script>
<img src="./404.png">
由于网络请求异常不会事件冒泡,因此必须在捕获阶段将其捕捉到才行,但是这种方式虽然可以捕捉到网络请求的异常,但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等,所以还需要配合服务端日志才进行排查分析才可以。
<script>
window.addEventListener('error', (msg, url, row, col, error) => {
console.log('我知道 404 错误了');
console.log(
msg, url, row, col, error
);
return true;
}, true);
</script>
<img src="./404.png" alt="">
这点知识还是需要知道,要不然用户访问网站,图片 CDN 无法服务,图片加载不出来而开发人员没有察觉就尴尬了。
Promise 错误
通过 Promise 可以帮助我们解决异步回调地狱的问题,但是一旦 Promise 实例抛出异常而你没有用 catch 去捕获的话,onerror 或 try-catch 也无能为力,无法捕捉到错误。
window.addEventListener('error', (msg, url, row, col, error) => {
console.log('我感知不到 promise 错误');
console.log(
msg, url, row, col, error
);
}, true);
Promise.reject('promise error');
new Promise((resolve, reject) => {
reject('promise error');
});
new Promise((resolve) => {
resolve();
}).then(() => {
throw 'promise error'
});
虽然在写 Promise 实例的时候养成最后写上 catch 函数是个好习惯,但是代码写多了就容易糊涂,忘记写 catch。
所以如果你的应用用到很多的 Promise 实例的话,特别是你在一些基于 promise 的异步库比如 axios 等一定要小心,因为你不知道什么时候这些异步请求会抛出异常而你并没有处理它,所以你最好添加一个 Promise 全局异常捕获事件 unhandledrejection。
window.addEventListener("unhandledrejection", function(e){
e.preventDefault()
console.log('我知道 promise 的错误了');
console.log(e.reason);
return true;
});
Promise.reject('promise error');
new Promise((resolve, reject) => {
reject('promise error');
});
new Promise((resolve) => {
resolve();
}).then(() => {
throw 'promise error'
});
window.onerror 能否捕获 iframe 的错误
当你的页面有使用 iframe 的时候,你需要对你引入的 iframe 做异常监控的处理,否则一旦你引入的 iframe 页面出现了问题,你的主站显示不出来,而你却浑然不知。
首先需要强调,父窗口直接使用 window.onerror 是无法直接捕获,如果你想要捕获 iframe 的异常的话,有分好几种情况。
如果你的 iframe 页面和你的主站是同域名的话,直接给 iframe 添加 onerror 事件即可。
<iframe src="./iframe.html" frameborder="0"></iframe>
<script>
window.frames[0].onerror = function (msg, url, row, col, error) {
console.log('我知道 iframe 的错误了,也知道错误信息');
console.log({
msg, url, row, col, error
})
return true;
};
</script>
读者可以通过 npm run iframe
查看效果:
如果你嵌入的 iframe 页面和你的主站不是同个域名的,但是 iframe 内容不属于第三方,是你可以控制的,那么可以通过与 iframe 通信的方式将异常信息抛给主站接收。与 iframe 通信的方式有很多,常用的如:postMessage,hash 或者 name 字段跨域等等,这里就不展开了,感兴趣的话可以看:跨域,你需要知道的全在这里
如果是非同域且网站不受自己控制的话,除了通过控制台看到详细的错误信息外,没办法捕获,这是出于安全性的考虑,你引入了一个百度首页,人家页面报出的错误凭啥让你去监控呢,这会引出很多安全性的问题。
异常上报方式
监控拿到报错信息之后,接下来就需要将捕捉到的错误信息发送到信息收集平台上,常用的发送形式主要有两种:
- 通过 Ajax 发送数据
- 动态创建 img 标签的形式
实例 - 动态创建 img 标签进行上报
function report(error) {
var reportUrl = 'http://xxxx/report';
new Image().src = reportUrl + 'error=' + error;
}
收集异常信息量太多,怎么办
如果你的网站访问量很大,假如网页的 PV 有 1kw,那么一个必然的错误发送的信息就有 1kw 条,我们可以给网站设置一个采集率:
Reporter.send = function(data) {
// 只采集 30%
if(Math.random() < 0.3) {
send(data) // 上报错误信息
}
}
二. 接口请求时长
/**
* 拦截接口请求,上报接口信息
*/
//统一拦截ajax请求
var start_time = 0,
gap_time = 0; //计算请求延时
window.addEventListener('ajaxReadyStateChange', function (e) {
var xhr = e.detail,
status = xhr.status,
readyState = xhr.readyState,
responseText = xhr.responseText; /**
* 计算请求延时
*/
if(readyState == 1){
start_time = (new Date()).getTime();
}
if(readyState == 4){
gap_time = (new Date()).getTime() - start_time;
}
/**
* 上报请求信息
* @Author smy
* @DateTime 2018-06-27T16:32:30+0800
*/
if(readyState == 4){
httpReport(gap_time, status, xhr.responseURL)
} })
三. 页面加载时长
参见:https://blog.oldj.net/2012/01/09/measuring-the-user-latency/
--------------------------------------------------------------
已知问题:
1. ios苹果不支持crossorigin=“anonymous”, 只支持crossorigin="use-credentials",cdn 不支持credentials。
2. ios 会对客户端调用webview方法找不到进行报错到window.onerror, 当上报的值是不存在的对象属性时,报错内容为global code,比如这时上报error.stack, 此时error为null,应上报message。
---------------------------------------------------------------
参考:
https://www.cnblogs.com/hustskyking/p/fe-monitor.html
http://web.jobbole.com/93684/
https://github.com/happylindz/blog/issues/5
web前端监控的三个方面探讨的更多相关文章
- web前端安全的三个关键点
一.浏览器的同源策略 同源策略:不同域的客户端脚本在未经授权的情况下不能读写对方的资源. 这里有几个关键词:域.脚本.授权.读写.资源 1.同域要求两个站点:同协议.同域名.同端口.下表展示了所列站点 ...
- web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- Sentry Web 前端监控 - 最佳实践(官方教程)
系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...
- web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- web前端学习(三)css学习笔记部分(7)-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...
- 程序猿必备的8款web前端开发插件三
1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...
- [Web 前端] 015 css 三种元素的介绍
1. 块元素,内联元素,内联块元素 元素就是标签 布局中常用的有三种标签 块元素 内联元素 内联块元素 1.1 块元素 也称为行元素 布局中常用的标签,如 div.p.ul.li.h1~h6.dl.d ...
- [Web 前端] 006 css 三种页面引入的方法
1. 外链式 用法 step 1: 在 html 文档的 head 头部分写入下方这句话 <link rel="stylesheet" href="./xxx.cs ...
- web前端学习(三)css学习笔记部分(6)-- 选择器详解
9.选择器详解 9.1 属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...
随机推荐
- 01-VMware-workstation14安装
VMware-workstation14安装步骤: 首先现在虚拟机wmware,我现在的版本是:VMware-workstation-full-14.1.1.28517.exe 到处这里就安装完成: ...
- 分布式Tomcat session会话Sticky Sessions问题
分布式session会话Sticky Sessions - tomcat_baby的专栏 - CSDN博客https://blog.csdn.net/tomcat_baby/article/detai ...
- Java 找不到或者无法加载主类
1 测试Test 类的时候突然遇到一个很奇怪的问题,网上搜了很多资料才找到解决办法,大多数情况是因为类加了包名编译,执行的时候没有到包下去执行.与我遇到的情况不一样. 问题:写了一个测试类Test,在 ...
- 调整分区大小 转载--------------http://blog.csdn.net/perfectzq/article/details/73606119
centos7重新调整分区大小 centos 7 调整 root 和 home 的容量大小 查看磁盘的空间大小: df -h 备份/home : cp -r /home/ homebak/ 卸载 ...
- Day3-1 函数
定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 语法: def calc(x, y): ...
- Airflow 使用随笔(内含 TimeZone 和 Backfill 等的详解)
其实怎么部署 airflow 又哪些特性,然后功能又是如何全面都可以在 Reference 的文章里面找到,都不是重点这里就不赘述了. 这里重点谈一下我在部署完成仔细阅读文档之后觉得可以总结的一些东 ...
- Golang的channel使用以及并发同步技巧
在学习<The Go Programming Language>第八章并发单元的时候还是遭遇了不少问题,和值得总结思考和记录的地方. 做一个类似于unix du命令的工具.但是阉割了一些功 ...
- python学习笔记(5)-基本数据类型-字符串类型及操作
一.字符串 字符串由一对单引号或者双引号表示,如”abc“,‘中国’,字符串是字符的有序序列,可以对其中的字符进行索引.字符串也可以用三单引号或三双引号表示,可以表示多行字符串,一对单引号或双引号仅表 ...
- java.util.concurrent.TimeoutException: Idle timeout expired: 300000/300000 ms
Request idle timed out at 123000 ms. That means there was no activity (read or write) for 123000 ms ...
- python数据结构与算法第八天【冒泡排序】
1.排序算法的稳定性 稳定排序算法会让原本有相同键值的记录维持相对次序 例如:对以下元组按照元组的第一个元素升序排列,元组如下: (4,1) (3,1) (3,7) (5,6) 若要满足条件,则可能的 ...