前端数据采集，前端异常数据采集，用户行为监

Supporting dataAcquisition.js

dataAcquisition.js is a collect what happens to the user on the web page behavior and abnormal data usage

中文文档戳这里 Support for Vue.js Tips：

Everyone has any needs or dissatisfaction in the use process
You can give me pull requests
If it helps you, please give me a star

demo：

Data collection page(Operations on this page will be collected and reported):
http://open.isjs.cn/demo-jquery/index.html

Display data page(The reported data will be displayed on this page):
http://open.isjs.cn/admin/index.html

Target： Realize front-end data reporting and analysis Realize user data portrait modeling and behavior trace analysis Realize active burying point and automatic burying point reporting Achieve front-end page loading speed reporting Implement front-end interface exception reporting Implementation of front-end code exception reporting Usage： Clone code to local Modify store.sendurl to submit interface address Modify the store.selector input element selector to specify the input event listening range If you want to filter the input collection, you can change store.acrange to specify, and password is better not to collect. Here is an example only Click the element to bubble up and collect two layers by default. You can modify store.acblength to change the number of layers Place file before logical code load (AMD supported) The server directory is the collection data receiver developed based on node.js Active burying / automatic burying

Only need to modify the classTag configuration to realize the two collection methods.
Collect all elements when classTag is empty
When a classTag has a value, only the elements in the class containing the value are collected

Manual data escalation

Just call window.dataAc.postData()

Journal：

2017-04-03 - Realize basic page access data reporting

2017-04-22 - Achieve click data reporting

2017-05-28 - Full function completion test

2017-05-31 - Official online operation

Version：1.0.1

2017-06-18 - Increase the collection limit of click elements to avoid excessive data

2017-06-20 - Add input box collection type configuration

2017-06-21 - Add interface exception reporting and proxy Ajax error handling function

2017-06-22 - Add code exception reporting. Listen for onerror events

2017-06-23 - Add performance API statistics page load time information

Version：1.0.2

2018-08-9 - Reduce dependency on jQuery and replace all except selector

2018-08-10 - Add configuration and demo

2018-08-24 - Add server code to make the project run locally

Version：1.0.3

2019-11-11 - Remove dependency on jQuery, including selector, request interceptor

2019-11-12 - Add image data reporting method

Configurable：

sendUrl : "http://localhost:9090/logStash/push", //Collection data receiving address selector : 'input', //Configure the selector of input box to limit the listening range of input, focus and blur events; acRange : ['text','tel'], //Configure the type attribute of the input box to control the collection range maxDays : 5, //Cookie duration, default: 5 days userSha : 'userSha', //User uuid save key classTag : 'isjs-ac', //When the class of active burying point is set to '', it is full collection, and the data will be large openInput : 'true', //Enable input acquisition or not openCodeErr : 'true', //Enable code exception collection openClick : 'true', //Enable click data collection openAjaxData : 'true', //Whether to collect params of exception request (pay attention to the protection of privacy data) openPerformance : 'true', //Whether to start page performance collection acblength : 2, //Click the element to collect the layers. The deeper the layers, the larger the data Configuration details： sendUrl

With the background interface, nodejs can be used to write a receiver to write logs Warning: it is better not to block this interface to avoid affecting page response selector

The selector option is used to control the collection range of input, focus and blur events. It's actually a document.queryselectorall selector, Value reference：https://www.runoob.com/cssref/css-selectors.html The function of active burying point can be realized by specifying ID acRange

This condition is used to control the collection range of the input box, which is consistent with the function of the selector option, but the priority is lower than the selector option Warning: try not to collect element content of type password to avoid information disclosure classTag

It is used to implement the active burying point. It will verify whether the element class contains the specified tag Only the elements that need to be collected:<input class="qyd_aci_0001" />Set classTag to qyd_aci userSha

The key saved by the user UUID in the browser can be modified manually in case of conflict maxDays

It is not recommended to set the cookie storage period for too long to avoid affecting the storage of other cookies acblength

This option is used to limit the number of bubble layers for click events We use document. Addeventlistener ("click", function (E) {...}); to listen for click events Select the principle of event bubbling to collect, because some HTML content is generated dynamically by JS, and fixed selectors will be missed At present, click acquisition is an automatic burying point. All elements will be bubbled up and collected in two layers. The collected results will have many small elements, more specific display of user behavior Of course, click event also supports active embedding. You only need to untie 329 lines of commented code Warning: only one kind of active burying point and automatic burying point can be reserved data format：

User behavior data

{ "uuid":"F6A6C801B7197603", //User uuid, valid for 5 days "acData":[ //data set { "type" : "ACINPUT/ACPAGE/ACCLIK", //Report data type: input box / page access / click event "path" : "www.domain.com/w/w/w/", //URL where the event occurred "eId" : "qyd_acb_0_1", //ID of the element where the event occurred "className" : "js_acb_2_0", //Event occurrence element class "sTme" : "13000000", //Event start time "eTme" : "130020122", //Event end event "val" : "123,3000:1234,4000:12345", //Values of different time elements after the event "utk" : "usertoken" //Associated background log (not implemented) } ] }

Interface abnormal data

{ "type" : "ACRERR", //Report data type: interface exception "path" : "www.domain.com/w/w/w/", //URL of the event occurrence page "sTme" : "2017-06-21 13:31:31", //Event time "requrl" : "/mt/klalsjdjlenm", //Interface address "readyState" : "2", //Current status, 0-uninitialized, 1-loading, 2-loaded, 3-data interaction, 4-completed. "status" : "301", //Request status code "statusText" : "Internal Server Error", //404 the error message is not found, 500 is internal server error. "textStatus" : "parsererror", //timeout", "error", "abort", "parsererror" }

Code exception data

{ "type" : "ACCERR", //Report data type: Code exception "path" : "www.domain.com/w/w/w/", //URL of the event occurrence page "sTme" : "2017-06-21 13:31:31", //Event time "msg" : "script error", //Exception summary "line" : "301", //Number of lines "col" : "error", //Exception stack data "err" : "error message", "ua" : "ios/chrome 44.44" //Browser version }

performance data

{ "type" : "ACTIME", //Report data type: Code exception "path" : "www.domain.com/w/w/w/", //URL of the event occurrence page "DNS" : "152", //DNS query time "TCP" : "525", //TCP connection time consuming "WT" : "555", //White screen time "DR" : "123", //DOM ready time, script load completion time "ONL" : "152", //Time consuming for onload event execution "ALLRT" : "152", //All requests take time "PRDOM" : "152", //DOM parsing time consuming "FXHR" : "152" //First request start time }