前端错误的分类
- 即时运行错误—代码错误
- 资源加载错误(比如图片加载错误，CSS加载错误，JS加载错误等)
错误的捕获方式
- 即时运行错误的捕获方式
- try...catch
- window.onerror
window.onerror只能捕获即时运行错误，不能捕获资源加载错误
- 资源加载错误的捕获方式
- object.onerror
比如图片加载的时候，可以给图片添加一个onerror事件；script标签页可以添加一个onerror事件；
object.onerror 触发的时候，不会向上冒泡到window.onerror，这是 window.onerror只能捕获即时运行错误，不能捕获资源加载错误的一个原因 - performance.getEntries()
高级浏览器上的performance对象上的getEntries方法，获取到所有已加载资源的加载时长，通过这种方式可以间接的拿到没有加载的资源错误 - Error事件捕获
这个是通过捕获机制来处理错误的，看例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('error',function(e){
console.log('捕获',e)
},true) // true是捕获，false是冒泡，如果换成false是不能捕获错误的
</script>
</head>
<body>
<script type="text/javascript" src="//baidu.com/test.js"></script>
</body>
</html>
image.png
延伸问题：跨域的JS运行错误可以捕获吗？错误提示是什么，应该怎么处理？
可以拿到一个错误信息，但是行号和列号错误详情都拿不到，因为跨域了。要怎么办才能拿到具体信息呢？
image.png
第一步： 在script标签增加crossorigin属性(在客户端做的)
第二步： 设置JS资源响应头，Access-Control-Allow-Origin:*(可以是星号也可以是某个指定的域名)（在服务端做的）
上报错误的基本原理
- 采用AJAX通信上报
但是所有的错误监控，都不是通过这种方式来做的 - 利用Image对象上报
所有的监控体系，都是利用Image对象上报的，具体做法如下：
<script type="text/javascript">
(new Image()).src = 'http://jianshu.com/testjk?r=jk'
</script>
通过这种方式发送一个请求比AJAX请求要简单的多，而且不用任何第三方的库，一行代码就实现了资源向上报
网友评论