前端错误监控

本文是前端错误监控的学习笔记,涵盖错误分类、捕获方法及上报原理。前端错误分为即时运行错误和资源加载错误,捕获方式包括try...catch、onerror事件及Error事件捕获。资源加载错误可通过对比资源数组间接捕获。上报错误通常利用AJAX或Image对象实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记,便于之后复习。本文从以下几个方面说明错误监控:

1.前端错误的分类

2.错误的捕获方式

3.上报错误的基本原理

1.前端错误的分类

即时运行错误: 一般是代码错误

资源加载错误:图片、js、css等资源加载失败

2.错误的捕获方式

即时运行错误的捕获方式:

  1. try…catch
  2. window.onerror只能捕获即时运行错误,不能捕获资源加载错误。因为资源加载错误,并不会向上冒泡,object.onerror捕获后就会终止,所以window.onerror并不能捕获资源加载错误
// try-catch
try{

}catch(err=>{
    console.log(err)
})
// winodw.onerror
window.onerror = function(msg, url, line)    
{            
    console.log( "错误信息:"+msg+ "\n所在文件:"+ url  + "\n错误行号:" + line);  
}

资源加载错误的捕获方式:

  1. object.onerror    img标签、script标签都可以添加onerror事件,用来捕获资源加载错误;
  2. performance.getEntries()  返回的将是一个数组,数组的每个元素代表对应的静态资源的信息,包含了页面中所有的已成功加载 HTTP 请求,可以与预期加载资源比较,通过这种方式,可以间接的拿到没有加载的资源错误。

         例如:

// 显示出来的资源就是已经成功加载的
performance.getEntries().forEach(function(item){console.log(item.name)})
// 显示出所有的img集合,这是所有需要加载的图片的集合
document.getElementsByTagName('img')

document.getElementsByTagName('img')获取的资源数组减去通过performance.getEntries()获取的资源数组,剩下的就是没有成功加载的,这种方式可以间接的捕获到资源加载错误。

     3.Error事件捕获   资源加载错误,虽然会阻止冒泡,但是不会阻止捕获。

首先在body中请求一个不存在的文件:

<body>
	<!-- 请求一个不存在的js文件 -->
	<script src="//baidu.com/test.js" type="text/javascript"></script>
</body>

使用Error事件捕获:

<script type="text/javascript">
	// Error事件捕获
	window.addEventListener('error', function(e){
		console.log('捕获错误', e);
	},true) // 为true代表是捕获 为false代表是冒泡
</script>

如下图,成功捕获到错误

延伸提问:跨域的js运行错误可以捕获吗,错误提示是什么,应该怎么处理?

可以捕获到错误,但是错误的具体信息(如出错行号、出错详情)不能拿到

处理:步骤一:在script标签增加crossorigin属性,客户端

步骤二:设置js资源响应http头上加Access-Control-Allow-Origin:*/域名,服务端

3.上报错误的基本原理

使用AJAX通信方式上报

利用Image对象上报 // 推荐使用

<script type="text/javascript">
	(new Image()).src = 'http://baidu.com/test?r=1234';
</script>

如下图,请求成功发出

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值