二三面_错误监控类

最新推荐文章于 2022-08-16 14:15:41 发布

煜成'Studio

最新推荐文章于 2022-08-16 14:15:41 发布

阅读量215

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44999716/article/details/117704789

版权

二三面_错误监控类

错误监控类的两种问法：

1.如何检测JS错误

2.如何保证你的产品质量

前端错误的分类？

两大类：

1.即时运行错误，也就是代码错误

2.资源加载错误

比如说你图片加载失败，js加载失败，css加载失败，这种都叫资源加载错误

错误的捕获方式？

1.即时运行错误的捕获方式

1.try…catch

这种需要你把try…catch部署到你的代码中

2.window.onerror

onerror是属于DOM0的，用DOM2的addEventListener去注册事件也是可以的

2.资源加载错误

1.object.onerror

比如说我这个地方是图片，图片的话有一个onerror事件，通过这个onerror事件的话就能捕获到它的加载错误；

script标签上也可以加载一个onerror事件，它出错了也会触发onerror事件

强调：window.onerror只能捕获即时运行错误，对于资源加载错误不能捕获。资源加载错误这种错误不会冒泡，也就是说script标签这个节点发生了错误，到触发它本身的onerror事件就OK了，不会再触发向上冒泡的window了，也就是window.onerror无法捕获资源加载错误的原因

2.performance.getEntries()

高级浏览器上会有一个performance对象，这个对象可以通过getEntries()来获取到所有已加载资源的加载时长，通过这个方式可以间接地拿到没有加载的资源错误。performance.getEntries()这个API返回的是一个数组，数组的话就有forEach()方法，可以遍历一下，随便打开一个网页在控制台中尝试一下

performance.getEntries().forEach(item => console.log(item.name));

显示的资源就是已经成功加载的

用图片举例，在控制台中输入document.getElementByTagName(‘img’);这个就是我们能拿到的所有的img的集合，我们拿到这个集合是我们所需要加载的所有图片的一个集合。再减去我们上面已经成功加载的集合，剩下的就是没有成功加载的。这是间接获取资源加载错误的一个方式，这个方案也很实用。

3.Error事件捕获

在window上通过事件捕获一样可以拦截到资源加载错误，上面说的onerror它阻止了冒泡，但是它没有阻止捕获，所以可以通过捕获阶段拿到这个资源加载错误

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>错误监控</title>
	<script type="text/javascript">
		window.addEventListener('error', function (e) {
			console.log('捕获', e);
		}, true); //true为捕获，false为冒泡
	</script>
</head>
<body>
	<!-- 没有这个文件 -->
	<script src="//baidu.com/test.js" charset="urf-8"></script>
</body>
</html>

上面的代码可以捕获到错误，如果将捕获true改为冒泡false，则不能捕获到错误

后两个方法要是说出来，面试官对你的评价会大大的提高，一方面他能了解你对错误事件了解的很清楚，第二个还能证明你对事件的定义以及事件模型掌握的很清楚，所以他就会认为你的基本功非常扎实，后两点一定要在面试官的面前表现出来。

问题延伸：如果我们的js错误是跨域的，跨域的js运行错误还可以被捕获到吗？如果可以的话会出现什么错误提示？那么对于这种情况应该怎么处理？

跨域的话也是可以捕获到错误的，但是它会拿到一个错误，就是所有跨域文件js的代码错误，获得一个错误信息的时候都是一个Script error，出错的行号和列号和出错详情都没法拿到，因为已经跨域了没有权限，只能捕获到这个错误但是没有拿到相应的具体信息。

在这里插入图片描述

怎么办？两步走：

1.在script标签上增加crossorigin属性

（这是在客户端做的）

2.设置js资源响应头Access-Control-Allow-Origin:*

（在服务端做的，在响应你这个js资源的时候在HTTP头上加一个Access-Control-Allow-Origin:*，这个后面可以是*，也可以是指定你的域名，总之要加这两个处理，你就可以拿到详细的信息了，这块是一定要注意的）

上报错误的基本原理？

1.采用Ajax通信的方式上报

能做到，但是所有的错误监控都不是通过这种方式来做的

2.利用Image对象上报

是所有的监控体系来做的，比如Google的JA，国内的CNZZ，他们都是都是通过Image对象上报的

（如果你能说出第二点，说明你对错误监控这块的原理了解的很清楚，如果你说的第一种，你这块不算及格）

如何利用Image对象上报那？

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>错误监控</title>
	</head>
<body>
	<script type="text/javascript">
		//利用这种方式发送一个请求非常简单，比Ajax简单的多，而且不需要借助任何第三方的库
		//一行代码就可以轻松地实现一个资源向上报，这就是Image对象比较特殊的特点，一定要记住这个用法
		//http://baidu.com/tesjk是你上传的路径，后面可以加任何一个参数
		//在页面中的Network中可以看到请求已经发出去了
		(new Image()).src='http://baidu.com/tesjk?r=tksjk';
	</script>
</body>
</html>