错误监控大白话就是发现运行时候出现的错误。
一、前端错误的分类
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=要上报的信息'请求已经发出去了
