前端埋点 - 报错监控

说起埋点又到了谈起前端项目中数据收集与监控,那么今天来简单的聊下前端报错监控的埋点。
首先先安利下自己做的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。
首先我们可以看下前端做报错监控的意义在哪里:

帮助灰度测试发现问题
收集线上错误日志
帮助优化产品稳定性
收集错误数据用于分析
监控第三方资源/CDN 稳定性

总体来说前端监控的主要目的都是为了获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化方向。
常见监控方式
try {
test code // throw error
} catch(e){
console.log(e);
}
复制代码上面的代码在项目中很常见,一般用来捕获某一段可能代码抛出的错误信息。并且在try catch 中的错误并不会阻塞整个页面,即使发生错误,页面也可以继续执行。
当然,我们不太可能对这个项目中的每一段代码都添加 try catch,这样不仅不利于线上定位问题产生的原因,也会让代码难以维护,目前主流的就是在项目中独立引入一个报错监控的 JS 来单独的完成对整个项目的监控。
比如 FE-Monitor 就提供开源的项目报错监控的能力,只需要将 SDK 引入自己的项目中,即可监控整个项目的js执行报错,资源加载异常,ajax错误等信息了。
ajax 错误监控
ajax 的错误监控主要是为了发现服务接口返回值的问题。
看了一些产品的实现都是对 window 下的 XMLHttpRequest 重写,但是这样直接重写不仅会造成调用链的修改也会让宿主页面上的多个 ajax 库产生冲突,如使用了 jquery 的话 jquery 中是直接使用 XMLHttpRequest 对象的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值