Shadow Tracker: a lightweight front-end sensorless monitoring framework

Written in front

Shadow tracker official website address: click here
Shadow tracker code warehouse: click here

1, introduction

Shadow tracker is a lightweight front-end sensorless monitoring plug-in, which provides the following functions:

Serial number function Corresponding log type
1 Collect the click and keyboard input events when the user interacts with the web page Event Log
2 Collect error information for all JS Error Log
3 Collect all XMLHTTPRequest network request information Request log (XMLHttpRequest Log)
5 Collect performance data information for page loading Performance Log
6 Collect user's device information Device Log
7 Provide time travel function, generate NightWatch e2e test code according to user's operation, and repeat user's operation in each step nothing
8 Support custom expansion of logs nothing

Note: the log function of "page performance data information" supports IE9 and above browsers, and other log functions support IE7 and above browsers.

2. How to use

2-1. Import through npm

npm install shadow-tracker
// You can access the tracker API by importing the tracker with import
// Only the code of "initialize tracker" and "get log information" are shown here. Please refer to the third part "API description" for other API usage

import tracker from 'shadow-tracker'

tracker.init() // Initialize tracker
console.log(tracker.getLogList()) // Get log information

2-2. Import through < script > tag

<script src="./shadow-tracker-script.js"></script>
<script>
  // After importing, the tracker object will be hung under the window object, and the tracker API can be accessed by using window.tracker
  // Only the code of "initialize tracker" and "get log information" are shown here. Please refer to the third part "API description" for other API usage

  window.tracker.init() // Initialize tracker
  console.log(window.tracker.getLogList()) // Get log information
</script>

Note: due to the limited server resources, it is recommended to download the shadow tracker script file from "http://www.shadowingszy.top/ShadowTracker/script/shadow-tracker-script.js".

3. API description

3-1,init(options)

Initialize tracker

Parameter Description:
options - to pass in a configuration item object, see section 4 "configuration item description"

Use example:

tracker.init({})

3-2,getDeviceInfo()

Obtain the user's device information and write the device information into the logList. For details, see Part 5 "logList description and custom Log"

Use example:

console.log(tracker.getDeviceInfo())

3-3,getPerformanceInfo()

Obtain the page performance data and write the page performance information into the logList. For details, see Part 5 "logList description and custom Log"

Use example:

console.log(tracker.getPerformanceInfo())

3-4,getLogList()

Get the Log data. See Part 5 "logList description and user defined Log" for details

Use example:

console.log(tracker.getLogList())

3-5,getTimeTravelCode()

Get the time travel code, see Part 6 "time travel function"

Use example:

console.log(tracker.getTimeTravelCode())

4. Configuration item description

When initializing the tracker, configuration items can be passed in to enrich the function of the tracker.

// This is the default configuration item of shadow tracker. Let's take this as an example
const option = {
  useClass: false, // Whether to use class as the unique ID of the element
  maxResponseTextLength: 1000, // Record the maximum length of XMLHttpRequest return value
  timeTracelInitTime: 3000, // In the generated time travel code, the waiting time of the initialization page
  timeTravelClickDelayTime: 1000, // In the generated time travel code, click the delay time of the element
  timeTracelInputDelayTime: 1000, // In the generated time travel code, the delay time of input data
  custom: false, // Whether to add custom data to the log object
  customizeLog: (logType, logContent) => {}, // For the function of generating user-defined Log data, see "logList description and user-defined Log" in part 5
  customizeEventLog: (event) => {}, // The function to generate the user-defined event log is shown in part 5 "logList description and user-defined Log"
  customizeErrorLog: (error) => {}, // The function to generate the user-defined error log is shown in part 5 "logList description and user-defined Log"
  customizeXMLHttpRequestLog: (event) => {}, // The function to generate the custom XMLHttpRequest log is shown in part 5 "logList description and custom Log"
  customizeDeviceLog: (userAgent) => {}, // The function to generate the custom device log is shown in Section 5 "logList description and custom Log"
  customizePerformanceLog: (performance) => {} // The function to generate the custom performance log is shown in part 5 "logList description and custom Log"
}

5. logList description and custom Log

logList is a js array for storing all logs. We can use getLogList() to get this array, and further develop the logic of log reporting and log storage according to our business needs.
In addition, we can expand the log object according to our own business requirements.

If we need to add custom data, first of all, we need to assign the custom attribute in the configuration item object passed into the tracker to true, and implement the custom data function according to our own needs.

5-1. Log object description

5-1-1. Basic description

The Log object is the basic Log object, which contains the following properties:

{
  "logTime": 1584262658187, // Log generation time
  "url": "www.shadowingszy.top", // url to generate the log page
  "logType": "Error Log", // The types of logs include: Event Log | Error Log | XMLHttPRequest Log | Device Log | Performance Log
  "logContent": {} // Log details
}

5-1-2. User defined description

The custom Log object contains the following properties:

{
  "logTime": 1584262658187, // Log generation time
  "url": "www.shadowingszy.top", // url to generate the log page
  "logType": "Error Log", // The types of logs include: Event Log | Error Log | XMLHttPRequest Log | Device Log | Performance Log
  "logContent": {} // Log details
  "custom":{ // Custom log fields
    "log": {}, // Value returned after executing the customizeLog() method in the configuration item
    "detail": {} // The value returned by a type of log after executing the corresponding customizeEventLog(), customizeErrorLog(), customizeXMLHttpRequestLog(), customizeDeviceLog(), customizePerformanceLog() methods in the configuration item
  }
}

By implementing the customizeLog method in the configuration item, we can customize the Log object and take the return value of the customizeLog function as the value of the custom.log attribute in the Log object.

Parameter description of customizeLog method:

Parameter name Parameter type Parameter description
logType string The types of logs include: Event Log | Error Log | XMLHttPRequest Log | Device Log | Performance Log
logContent object Log specific information, that is, the value of the logContent property in the log object

5-2. Description of Event Log object

5-2-1. Basic description

The Event Log object is a Log object that records user clicks and enters events. It will be displayed in the logContent property of the corresponding type of Log object.
Event Log includes two types of log: "click" and "input", respectively including the following attributes:

Click event:

{
  "domPath": "h1", // dom path of the current event
  "trackingType": "mousedown", // Event category
  "offsetX": "0.5", // The relative x coordinate of the current click event. If the current page width is 700, then the x of the click event is 350
  "offsetY": "0.5" // The relative x coordinate of the current click event. If the current page width is 700, then the y of the click event is 350
}

Enter event:

{
  "domPath": "h1", // dom path of the current event
  "trackingType": "keyup", // Event category
  "inputKey": "3", // Input value
  "currentValue": "123" // The value of the current input box
}

5-2-2. User defined description

By implementing the customizeEventLog method in the configuration item, we can customize the Log object and take the return value of the customizeEventLog function as the value of the custom.detail property in the Log object.

Parameter description of customizeEventLog method:

Parameter name Parameter type Parameter description
event object The event object of the current trigger event

5-3. Error Log object description

5-3-1. Basic description

The Error Log object is a Log object that records js errors on the current page. It will be displayed in the logContent property of the corresponding type of Log object.
The Error Log object contains the following properties:

{
  "errorType": "customize", // error type, including: JS | customize | window.onerror | window.onunhandledrection
  "errorMsg": "This is error message", // Wrong information
  "lineNumber": 0, // Number of lines in error location
  "columnNumber": 0 // Number of columns in error location
}

Note: errorType details

type Explain
js javascript code error
customize console.error() reports an error, which does not contain the error stack information
window.onerror window.onerror callback error
window.onunhandledrejection The callback of window.onunhandledrejection reports an error

5-3-2. User defined description

By implementing the customizeErrorLog method in the configuration item, we can customize the Log object and take the return value of the customizeErrorLog function as the value of the custom.detail property in the Log object.

Parameter description of customizeErrorLog method:

Parameter name Parameter type Parameter description
error object Error object that triggered the error

5-4. XMLHttPRequest Log object description

5-4-1. Basic description

XMLHttPRequest Log object is a Log object that records XMLHttpRequest. It will be displayed in the logContent property of the corresponding Log object.
XMLHttPRequest Log contains two types of log: "request start" and "request end", respectively including the following attributes:

Request start:

{
  "event": "ajaxLoadStart" // Current events
}

Request end:

{
  "event": "ajaxLoadEnd", // Current events
  "status": 200, // Status code
  "response": "" // Return content
}

5-4-2. User defined description

By implementing the customizeXMLHttpRequestLog method in the configuration item, we can customize the Log object and take the return value of the customizeXMLHttpRequestLog function as the value of the custom.detail attribute in the Log object.

Parameter description of customizeXMLHttpRequestLog method:

Parameter name Parameter type Parameter description
event object Event triggering ajaxLoadStart or ajaxLoadEnd

5-5. Device Log object description

5-5-1. Basic description

The Device Log object is a Log object that records user device information. It will be displayed in the logContent property of the corresponding type of Log object, including the following properties:

{
  "browser": true, // PC browser or not
  "mobile": false, // Mobile browser or not
  "type": "computer", // Category of current terminal, including: computer, IOS, Android, wechat, Windows Phone, unknown
  "version": "80.0.3987.132", // Version number
  "name": "chrome", // Category of current browser, including msie, firefox, chrome, sarfari, android, ios, unknown
  "userAgent": "" // Value of navigator.userAgent
}

5-5-2. User defined description

By implementing the customizeDeviceLog method in the configuration item, we can customize the Log object and take the return value of the customizeDeviceLog function as the value of the custom.detail property in the Log object.

Parameter description of customizeDeviceLog method:

Parameter name Parameter type Parameter description
device object navigator.userAgent object

5-6. Description of Performance Log object

5-6-1. Basic description

The Performance Log object is a Log object that records page performance data. It will be displayed in the logContent property of the corresponding type of Log object, including the following properties:

{
  "loadType": "reload",
  "loadPageTime": 0, // Time of page loading completion
  "domReadyTime": 0, // Time to parse DOM tree structure
  "redirectTime": 0, // Time of redirection
  "domainLookupTime": 0, // DNS query time
  "timeToFirstByte": 0, // The time to read the first byte of the page, that is, the time the user takes to get your resources
  "requestTime": 0, // Time content load completed
  "loadEventTime": 0, // Time to execute onload callback function
  "cacheTime": 0, // DNS cache time
  "unloadTime": 0, // Time to uninstall page
  "connectTime": 0 // Time for TCP to establish connection and complete handshake
}

Note: the Performance Log object uses window.performance to record page performance data, so only IE9 and above browsers are supported

5-6-2. User defined description

By implementing the customizePerformanceLog method in the configuration item, we can customize the Log object and take the return value of the customizePerformanceLog function as the value of the custom.detail property in the Log object.

Parameter description of customizePerformanceLog method:

Parameter name Parameter type Parameter description
performance object window.performance object

6. Time travel function

This function will reproduce all the user's operations according to the Event Log data in the logList, and generate NightWatch e2e test code according to the log. We only need to install NightWatch and execute this part of code to reproduce the user's operations.

We can set parameters in the configuration item of Tucker.

Parameter name Parameter description
timeTracelInitTime In the generated time travel code, the waiting time of the initialization page
timeTravelClickDelayTime In the generated time travel code, click the delay time of the element
timeTracelInputDelayTime In the generated time travel code, the delay time of input data

Generate code example:

function test(browser) {
  browser
    .url('www.shadowingszy.top')
    .pause(3000)
    .assert.elementPresent('#xml-test')
    .click('#xml-test')
    .pause(2000)
    .assert.elementPresent('#get-log')
    .click('#get-log')
    .pause(2000)
    .assert.elementPresent('#get-log')
    .click('#get-log')
    .pause(1000)
}
Published 35 original articles, won praise 158, visited 50000+
Private letter follow

Tags: Attribute npm Mobile iOS

Posted on Mon, 16 Mar 2020 03:33:30 -0700 by whitelion