js错误监控
2019-09-26 本文已影响0人
Aniugel
https://juejin.im/post/5c39ebe7e51d4551c75f961f
面试询问如何保证产品质量，就是询问如何错误监控
①前端错误的分类、②错误的捕获方式、③上报错误的基本原理
前端错误的分类：
1.即时运行错误：代码错误
2.资源加载错误
错误的捕获方式：
1.及时运行错误的捕获方式：try…catch、window.onerrr
2.资源加载错误：object.onerror、performance.getEntries、Error事件捕获
资源加载错误不会触发冒泡，也就是只会触发本身的onerror事件（object.onerror），不会向上触发到window.onerror了。但是可以捕获，所以可以用Error事件捕获。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>错误监控</title>
<script type="text/javascript">
window.addEventListener('error', function (e) {
console.log('捕获', e);
}, true);
</script>
</head>
<body>
<script src="//badu.com/test.js" charset="utf-8"></script>
<script type="text/javascript">
(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';
</script>
</body>
</html>
延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？
报错提示：
image.png
解决方法：
1.在script标签增加crossorigin属性（客户端）。
2.设置js资源响应头Access-Control-Allow-Origin：*（服务端）。
上报错误的基本原理：
1.利用Ajax通信的方式上报
2.利用Image对象上报
<script type="text/javascript">
(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';
</script>
原文链接：https://blog.csdn.net/u014465934/article/details/86491034
