插件代码已上传到gitHub,链接:https://github.com/adminV/dataAcquisition
希望大家给个小星星。多提需求以及建议。逐步完善这个插件

端午节前后,ceo发起了一场数据分析比赛。
我特别想参加,但是我找不到数据来分析啊。想到之前团队做的前端数据采集,
采集的是一些用户行为,但是我觉得这个数据可分析的点不够多,只能对用户行为轨迹进行复现
还不太满足我的需求,我更希望他能为前端团队带来更大的好处
尤其对一些线上的异常情况,能及时的采集回来,而不是等用户反馈之后才去处理
有了初步的想法,下一步就对想法具体化,列出实际的需求

一.需求整理:

1.实现用户页面访问数据上报
2.实现用户输入数据上报
3.实现用户点击数据上报
4.实现接口异常数据采集上报
5.实现代码异常数据采集上报
6.实现静态资源加载异常上报
7.页面时间点,DNS解析,首屏渲染,白屏时间进行上报
8.对用户进行标记,关联后台接口
9.基于项目实际情况实现主动埋点与自动埋点兼容
10.使用node开发数据接收端
12.基于powerBI对采集数据进行图表化
大致需求列出来之后,便可以逐步实现了。
大的方向没错就可以开始定数据模型了。

二.数据定义:

1.公共数据

{
 	"uuid":"F6A6C801B7197603",        //用户标识
 	"acData":[]			  //数据集
}

2.行为数据格式:

{
	"type":"ACINPUT/ACPAGE/ACCLIK",   //上报数据类型:输入框/页面访问/点击事件
	"path":"www.domain.com/w/w/w/",   //事件发生的url
	"eId":"qyd_acb_0_1",		  //事件发生的元素ID	
	"class":"js_acb_2_0",		  //事件发生的元素class	
	"sTme":"13000000",		  //事件发生开始时间
	"eTme":"130020122",		   //事件结束事件							
	"val":"123,3000:1234,4000:12345",  //事件发生后不同时间元素的值	  		
	"utk":"usertoken"		   //关联后台日志						
}

3.代码异常数据格式:

{
    "type":"ACCERR",     		//上报数据类型:代码异常
    "path":"www.domain.com/w/w/w/",     //事件发生页面的url
    "sTme":"2017-06-21 13:31:31",	//事件发生时间
    "msg"     : "script error",         //异常摘要
    "line"    : "301",  		//代码行数
    "col"     : "异常",  		//异常堆栈数据
    "err"     : "异常信息",  
     "ua"     : "ios/chrome 44.44"      //浏览器版本
}

4.接口异常数据格式:

{
    "type":"ACRERR",     			//上报数据类型:接口异常
    "path":"www.domain.com/w/w/w/",   		//事件发生页面的url
    "sTme":"2017-06-21 13:31:31",		//事件发生时间
    "requrl"     : "/mt/klalsjdjlenm",          //接口地址
    "readyState" : "2",    			//当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
    "status"     : "301",  			//请求状态码:400,500,404
    "statusText" : "Internal Server Error",     //404错误信息是not found,500是Internal Server Error。
    "textStatus" : "parsererror",  		//timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误)     
}

5.时间点数据格式:

{
    "type":"ACTIME",     		//上报数据类型:代码异常
    "path":"www.domain.com/w/w/w/",     //事件发生页面的url
    "DNS"     : "152",                  //DNS查询时间
    "TCP"     : "525",  		//TCP连接耗时
    "WT"      : "555",  	        //白屏时间
    "DR"      : "123", 			//dom ready时间,脚本加载完成时间
    "ONL"     : "152",  		//执行onload事件耗时
    "ALLRT"   : "152",  		//所有请求耗时
    "PRDOM"   : "152",  		//dom解析耗时
    "FXHR"    : "152"  			//第一个请求发起时间
}

数据格式定义好之后,开始逐步实现,
你也可以直接检出代码查看,整体比较易懂。
下面对比较关键的点进行说明。

三.关键逻辑:

1.上报逻辑
当前页面采集数据,下个页面上报,上报接口不阻塞,直接返回

2.页面访问数据获取方式
在代码开始执行时,记录当前url,保存到session中(低版本浏览器使用cookie,cookie数据过多会导致接口400)

3.点击数据获取方式
通过给document绑定点击事件,利用事件冒泡对点击元素进行采集
为了防止数据过多,只便利指定的层数

4.输入数据获取方式
通过对所有输入框元素进行事件监听
使用input的type来过滤选择哪些输入框

5.请求异常数据获取方式
通过对ajax包装,代理其error处理函数,转交采集函数优先处理

bindAjaxHook: function () {//对ajax中的异常进行捕获,需将代码置于业务代码之前,对所有ajax进行代理
    var _ajax = $.ajax;
    $.ajax = function (opts) {
        var errorCallback = opts.error;
        opts.error = function (XMLHttpRequest, textStatus, errorThrown) {
            dataAcquisition.setAjErrAc(opts, XMLHttpRequest, textStatus);
            errorCallback && errorCallback(XMLHttpRequest, textStatus, errorThrown);
        };
        _ajax(opts);
    }
}

6.代码异常,静态资源异常获取方式
通过监听window.onerror事件,对异常数据进行上报

7.页面加载渲染时间获取方式
window.performance 属性中获取数据上报

四.数据图形化展示

以往的数据采集需要配合kibana来进行统计
并没有很好的图形化界面,往往复现问题很困难
这次我们使用的是powerBI来做数据展示层
powerBI是微软提供的一款数据图形化工具
可以连接各种数据源来做分析展示,一次配置,永久有效
整体还是很不错的,本来想放一下我们做出来的效果图的,
还是考虑到有一些业务数据在里面,不做展示了。
放一些官网的效果,有兴趣的朋友可以搜索看一下,很不错的一个工具