前端错误监控总结
【要点】
1. 前端错误的分类
2. 错误的捕获方式
3. 上报错误的基本原理
【总结】
1. 错误分类
- 运行时错误,代码错误
- 资源加载错误
2.捕获方式
-
代码错误捕获
- try ... catch:
try { console.log("欢迎光临!"); } catch(err) { document.getElementById("xxx").innerHTML = err.message; }
- window.onerror
1 window.onerror = function(){ 2 3 console.log(error msg); 4 5 }
- try ... catch:
- 资源加载错误 (不会冒泡到window, 这也是window.onerror捕获不到的原因)
- object.onerror:img标签、script标签都可以添加onerror事件,用来捕获资源加载错误;
- performance.getEntries():可以获取所有已加载资源的加载时间,通过这种方式,可以间接的拿到没有加载的资源错误。
- Error事件捕获:资源加载错误,虽然会阻止冒泡,但是不会阻止捕获。true:捕获,false:冒泡
【延申】
跨域js运行错误也是可以捕获到的,但是拿不到具体的信息,比如:出错行号、出错列号,错误详情等,这种问题应该怎么处理呢?
分两步:
- 1.在script标签上增加crossorigin属性;
- 2.设置js资源响应头Access-Control-Allow-Origin:*;(也可以设置特定的域名) 这样就可以拿到具体的错误信息了
3.上报错误的基本原理
1. 利用Ajax通信的方式上报
2.利用Image对象上报 (推荐的方式) 是大部分浏览器的监控体系选择的方法
然后在network中就可以看到发送了请求