加载中...
功能列表
支持一下
标识类配置,作为数据上报信息的分类标识
全局开关,用来自定义采集范围
所以根据实际需要,不要要用户行为,不需要性能分析就关闭开关
上面的配置项有几组关联,分别是:
useStorage,maxDays
openComponent,maxComponentLoadTime
openXhrTimeOut,maxRequestTime,customXhrErrCode,openXhrHock
行为采集配置
根据实际使用情况进行搜集
这里面埋点和全量采集的区别我们放到了class上面,通过指定要采集的元素,精准定位数据
要注意的一点是,点击事件触发的元素可能不是目标元素,我们通过向上递归查找有效元素(有class或id)
数据上报配置
根据实际使用情况进行搜集
这里面埋点和全量采集的区别我们放到了class上面,通过指定要采集的元素,精准定位数据
要注意的一点是,点击事件触发的元素可能不是目标元素,我们通过向上递归查找有效元素(有class或id)
vue.$vueDataAc.setCustomAc( {cusKey: String, cusVal: Any} )
用于自定义事件的约定上报,例如在业务场景中对某些逻辑的埋点
自定义事件上报逻辑与其他事件上报共用,可以通过 openReducer 限制频率
vue.$vueDataAc.postAcData()
手动上报当前采集信息
vue.$vueDataAc.setUserToken(userToken: String)
用于关联用户后台标记,利用用户登录后的userid,sessionId
目的是将前后台日志打通,方便查找模拟用户
页面访问,路由跳转,等同于PV/UV数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", //后端 用户标识/登录标识 默认为空, 通过setUserToken设置 "acData" : { "type" : "ACPAGE" //行为标识 "sTme" : 1591760011268 //数据上报时间 "fromPath" : "/register?type=1" //来源路由 "formParams" : "{'type': 1}" //来源参数 "toPath" : "/login" //目标路由 "toParams" : "{}" //目标参数 "inTime" : 1591760011268 //页面进入时间 "outTime" : 1591760073422 //离开页面时间 } }
代码异常数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACCERR", //上报数据类型:代码异常数据 "path" : "www.domain.com/w/w/w/", //事件发生页面的url "sTme" : "1591760073422", //事件上报时间 "msg" : "script error", //异常摘要 "line" : "301", //代码行数 "col" : "13", //代码列下标 "err" : "error message", //错误信息 } }
资源加载异常数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACSCERR", //上报数据类型:资源加载异常数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "fileName" : "test.js", //文件名 "resourceUri" : "http://ccedit.com/js/test.js", //资源地址 "tagName" : "script", //标签类型 "outerHTML" : "script ...", //标签内容 } }
Promise 异常数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACPRERR", //上报数据类型:Promise 异常数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "reason" : "reason" //异常说明 } }
自定义事件数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACCUSTOM", //上报数据类型:自定义事件数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "cusKey" : "click-button-001" //自定义事件key,用户定义 "cusVal" :"1" //自定义事件值,用户定义 } }
Vue异常监控数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACVUERR", //上报数据类型:Vue异常监控数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "componentName" : "Button" //组件名 "fileName" : "button.js" //组件文件 "propsData" : "{}" //组件props "err" : "..." //错误堆栈 "info" : "信息" //错误信息 "msg" : "1" //异常摘要 } }
点击事件监控数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACCLIK", //上报数据类型:点击事件监控数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "eId" : "" //元素id属性 "className" : "login-form" //点击元素class属性 "val" : "标题" //元素value或者innertext "attrs" : "{class:'...', placeholder:'...', type:'...'}" //元素所有属性对象 } }
输入事件监控数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACINPUT", //上报数据类型:输入事件监控数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "eId" : "" //元素id属性 "className" : "van-field__control" //元素class属性 "val" : "0:111,638:11,395:1,327:,1742:5,214:55,207:555,175:5555" //时间:当前值,用逗号分隔,体现时间变化 "attrs" : "{class:'...', placeholder:'...', type:'...'}" //元素所有属性对象 } }
接口异常数据(包含 请求时间过长/自定义code/请求错误)
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACRERR", //上报数据类型:接口异常数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "errSubType" : "http/time/custom" //异常类型:【time: 请求时间过长】【custom: 自定义code】【http:请求错误】 "responseURL" : "/static/push" //请求接口 "method" : "GET" //请求方式 "readyState" : 4 //xhr.readyState状态码 "status" : "404" //请求状态码 "statusText" : "not found" //错误描述 "requestTime" : 3000 //请求耗时 "response" : "{...}" //接口响应摘要,截取前100个字符 "query" : "{}" //请求参数,用 openXhrQuery 配置打开,注意用户信息泄露 } }
页面性能监控数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACRERR", //上报数据类型:页面性能监控数据 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "WT" : 1000 //白屏时间 "TCP" : 1000 //TCP连接耗时 "ONL" : 1000 //执行onload事件耗时 "ALLRT" : 1000 //所有请求耗时 "TTFB" : 1000 //TTFB读取页面第一个字节的时间 "DNS" : 1000 //DNS查询时间 } }
Vue组件渲染异常数据
{ "uuid": "F6A6C801B7197603", //用户标识 "t" : "", "acData" : { "type" : "ACCOMP", //上报数据类型:页面性能监控 "path" : "www.domain.com/w/w/w/", //事件发生页面地址 "sTme" : "1591760073422", //事件上报时间 "componentsTimes" : [ //渲染超时组件列表 '组件名': [1000,1200,1090] ] } }
解决方案
1.我需要采集用户行为吗?
-- 用户行为相关数据,我认为对产品有益,可以用于分析转化,页面热点图等
-- 根据数据对产品进行调整。所以看你的产品类型 2C 的产品一般有这样的需求
2.我需要监控页面异常吗?
-- 从前端角度是有必要的,用户遇到问题,经过问题上报,汇总,最终分配到你,时间不可控
-- 能在第一时间对端上的问题进行告警,会大大提高解决问题的效率
-- 所以我认为需要有一个监控系统作为生产安全的兜底方案
3.我需要采集页面性能&组件性能吗??
-- 页面性能组件性能,我建议开启,生产测试环境可能因为数据不相同,会有差异性bug
-- 可能会导致组件渲染慢,影响体验
-- 但是前提是要把阈值调大,以免数据过多,大量数据上报,会降低对报警的敏感度
4.数据采集后如何进行整理分析?
-- 我们的数据上报分为两种,接口和图片
-- 其实不论哪一种方式,最终都要将数据本地化,持久化。
-- 可以问一下公司后端的同事,他们的数据怎么分析,对接他们的上报接口就可以。
-- 一般这样的日志搜集分析,会用到 ELK 系统。没有的话让运维帮忙搭建一套。
-- 通过接口将上报的数据存储到本地文件或数据库中。或是通过图片上报,将数据存储在nginx中
-- 然后用ELK对接日志即可。ELK有提供查询API,你可以做一套轮训告警系统
5.我需要采集用户行为吗?
-- 前端日志的唯一标识是uuid,后端唯一标识可以通过 setUserToken方法将用户唯一 id 和 uuid 做关联
6.我需要采集用户行为吗?
-- 建议你分批次,分功能,做足够量的测试之后,逐步打开开关上线。
-- 我只能保证在我的场景下可以正常使用,但是不同的产品,不同的用户场景,不能百分百保证