异常监控
1、前端错误分类:
- 即时运行错误:代码错误
- 资源加载错误
- 对于跨域的代码运行错误会显示 Script error. 对于这种情况我们需要给 script 标签添加 crossorigin 属性,并且服务器添加Access-Control-Allow-Origin
2、即时运行错误捕获
(1)try ....catch
(2) window.onerror 或者 window.addEventListener 记住事件捕获阶段获得,不是冒泡阶段
3、资源加载错误
(1)object.onerror,如img.onerror
(2)performance.getEntries (getEntries api返回一个资源加载完成数组,假设为img,再查询页面中一共有多少个img,二者的差就是没有加载上的资源)
(3)Error事件捕获
4、错误如何上报
(1)ajax
(2)image的src上报
-
(new Image()).src = '错误上报的请求地址'
一般来说,大厂都是采用利用image对象的方式上报错误的;使用图片发送get请求,上报信息,由于浏览器对图片有缓存,同样的请求,图片只会发送一次,避免重复上报
性能监控
整理中...
埋点
整理中...
参考:
前端埋点与监控方案(juejin)