什么是前端监控和前端埋点
前端监控和前端埋点,一个是目的,一个是实现方式,做前端埋点,是为了做前端监控。
前端监控的目的是:
获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化的方向。
前端监控可以分为三类:数据监控、性能监控和异常监控。
实现前端监控,第一步肯定是将我们要监控的事项(数据)给收集起来,再提交给后台,最后进行数据分析。数据收集的丰富性和准确性会直接影响到我们做前端监控的质量,因为我们会以此为基础,为产品的未来发展指引方向。
收集监控数据我们是通过前端埋点来实现的,目前常见的前端埋点方法有三种:手动埋点、可视化埋点和无埋点。
手动埋点,也叫代码埋点,即纯手动写代码,调用埋点 SDK 的函数,在需要埋点的业务逻辑功能位置调用接口,上报埋点数据。
可视化埋点听起来比较高大上,实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。
无埋点则是前端自动采集全部事件,上报埋点数据,由后端来过滤和计算出有用的数据。
在不同场景下我们需要选择不同的埋点方案。例如对于简单的用户行为类事件,可以使用全埋点(无埋点)解决;而对于需要携带大量运行时才可获知的业务字段的埋点需求,就需要声明式埋点(手动埋点)来解决。
错误监控
前端错误的分类:
代码运行错误和资源加载错误
代码运行错误的捕获方式:
1.try...catch
2.window.onerror
资源加载错误:
首先要清楚资源加载的错误不会冒泡,所以资源加载的错误可以通过performance.getEntries()这种间接的方式去获得加载错误的资源
performance.getEntries().forEach((item)=>{console.log(item.name)})
打印出来加载出来的所有资源文件的名字
打印通过document.getElementByTagName获取所有资源标签的数量,如果不一致,则存在没加载出来的资源
另外可以通过Error事件通过捕获的方式获得资源加载错误,注意第三个参数一定要是true
window.addEventListener('error', function (e) {
console.log('捕获',e)
}, true)
跨域的js运行错误可以捕获吗,错误提示是什么,应该怎么处理?
跨域的js错误可以在控制台中直接看到,报错内容resource interpreted as script but transferred
处理方法:
1.在script标签中增加crossorigin属性
2.设置js资源响应头Access-Control-Allow-Origin:*
上报错误的常用方式:
ajax接口可以进行上报,但实际应用中几乎不会这样使用,而是使用image方式发送上报错误的请求:
(new Image()).src = 'http://baidu.com/tesjk?r=tksjk'