错误监控大白话就是发现运行时候出现的错误。
一、前端错误的分类
1.即时运行错误:代码错误
console.log(a)
错误信息:
2.资源加载错误
如css、js资源加载错误
二、错误的捕获方式
1.即时运行错误的捕获方式
1) try...catch
<input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="button" value="提交" id="btn">
<p id="err"></p>
btn.onclick = function(){
try {
if(!username.value) throw "用户名不能为空"
if(!password.value) throw "密码不能为空"
}catch(e){
err.innerHTML = `错误:${e} !`//抓住上面throw抛出的错误,给p标签显示
}finally{
// 这里上面抱什么错都会显示
console.log("请输入")
}
}
2) window.onerror 错误
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { console.log("错误信息:" , errorMessage); console.log("出错文件:" , scriptURI); console.log("出错行号:" , lineNumber); console.log("出错列号:" , columnNumber); console.log("错误详情:" , errorObj); } <script type="text/javascript" src="error.js"></script>
2.资源加载错误
1) object.onerror(不能捕获)
比如img=new Image,img.οnerrοr=函数
2) performance.getEntries() 获得所有已加载资源的加载时常,可以间接的拿到资源错误。
比如说 performance.getEntries().forEach((item)=>console.log(item.name))获取所有已经加载的资源,
然后获取document.getElementsByTag('xxx') 去减去已经加载的资源,就是你还没有加载的资源。
3)Error捕获事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>错误监控</title> <script> window.addEventListener('error', function(e){ console.log('捕获', e) }, true) </script> </head> <body> <script src="//baidu.com/test.js"></script> </body> </html>
延伸:跨域的js运行错误可以捕获吗,错误提示什么,应该怎么处理?
首先在没解决之前是这个样子的,都是script error
1.在script标签添加crossorigin属性,如:<script type="text/javascript" src="//doitbegin.duapp.com/error.js" crossorigin></script>,打印的结果是这样子的
2.出现这个error也不意外,既然设置了error.js为crossorigin,那error.js的HTTP Response Header也必须设置非同源可访问。设置js资源响应头Access-ControlAllow-Origin: * ,这个必须要在服务端设置//*代表全部,以php举例
三、上报错误的基本原理
1.采用Ajax通信的方式上报(可以,但是一般不使用这种方式)
2.利用Image对象上报(常用的方式,不用依赖第三方库)
(new Image()).src = 'http://baidu.com/tesjk?r=要上报的信息'
请求已经发出去了