错误监控
呛再首 12/30/2022 其他
# 前端错误分类
- 代码错误
- 资源加载错误
# 错误捕捉方式
代码错误捕捉方式
- try...catch
- window.onerror
资源加载错误捕捉方式
- object.onerror
- Error 事件捕获
- performance.getEntries()
window.onerror 只能捕获即时运行错误，不能捕获资源加载错误，因为资源加载错误不会冒泡。 资源加载错误可以通过捕获 Error 来拿到，代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>错误监控</title>
<link rel="stylesheet" href="">
<script type="text/javascript">
window.addEventListener("error", function(e){
console.log('捕获了错误：', e)
}, true)
</script>
</head>
<body>
<script src="//baidu.con/test.js" charset="utf-8"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 错误上报的方法
- Ajax上传:Ajax上报就是在上文注释错误捕获的地方发起Ajax请求，来向服务器发送错误信息。
- 利用Image对象发送信息:(new Image()).src="http://post.error.com?data=xxx"