前端错误监控总结
程序员文章站
2022-06-02 23:46:29
【要点】 1. 前端错误的分类 2. 错误的捕获方式 3. 上报错误的基本原理 【总结】 1. 错误分类 运行时错误,代码错误 资源加载错误 2.捕获方式 代码错误捕获 try ... catch: try { console.log("欢迎光临!"); } catch(err) { documen ......
【要点】
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中就可以看到发送了请求