前端监控、埋点

1,069

异常监控

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请求,上报信息,由于浏览器对图片有缓存,同样的请求,图片只会发送一次,避免重复上报

性能监控

整理中...

埋点

整理中...

参考:

前端异常监控-看这篇就够了

实现埋点上报方案过程中的思考

前端性能与异常上报

前端埋点统计方案思考

一步一步搭建前端监控系统:如何定位前端线上问题?

小公司自建前端监控埋点体系,证明可行

手刃前端监控系统

前端异常和性能监控

10分钟彻底搞懂前端页面性能监控

深入理解前端性能监控—Performance

5 分钟撸一个前端性能监控工具

前端高频面试题整理 前端两年-月入30K | 掘金技术征文

前端监控平台系列:JS SDK(已开源)

去大厂,你就应该了解前端监控和埋点!

项目实战-埋点系统初探

前端监控和前端埋点

前端埋点总结

前端监控SDK开发分享

如何打造一款标准的JS-SDK

前端代码错误上报

钉钉前端-如何设计前端实时分析及报警系统

如何在 Web 关闭页面时发送 Ajax 请求

Web Beacon 刷新/关闭页面之前发送请求

统计用户停留网站时长

【得物技术】前端性能监控实践

前端异常的捕获与处理

前端监控平台系列:微信小程序监控和Web监控(已开源)

通过自定义Vue指令实现前端曝光埋点

前端埋点与监控方案

前端埋点与监控方案(juejin)

无痕埋点设计

前端录制回放系统初体验

深入了解前端监控原理

基于typescript开发前端错误及性能监控SDK

前端异常埋点系统初探

还在手动埋点么,out 了,不到百行代码实现自动埋点

前端页面性能参数搜集

利用Live Templates打造埋点自动化利器

SourceMap 与前端异常监控

前端白屏监控探索

调研字节码插桩技术,用于系统监控设计和实现

一篇讲透自研的前端错误监控

性能监控指标|8月更文挑战

前端性能与异常监控系统

如何进行 web 性能监控?

搭建前端监控系统(四)接口请求监控篇

蚂蚁金服如何把前端性能监控做到极致?

前端监控 SDK 的一些技术要点原理分析