Front-end buried point scheme and link tracing realize topology

First, why do you need a front-end burial point

The purpose of the front-end data burying point is:

Obtain user behavior and track the use of products on the client side, and point out the direction of product optimization based on the monitoring data.

Front-end monitoring can be divided into three categories: data monitoring, performance monitoring, and exception monitoring.

(1) Data monitoring

Data monitoring, as the name suggests, is monitoring the behavior of users. Common data monitoring includes:

• PV/UV:PV(Page view), that is, page views or clicks. UV: Refers to the number of people visiting a site or clicking on a news item from different IP addresses
• The amount of time a user spends on each page
• What entry point does the user use to access the page
• Actions triggered by the user on the corresponding page

Statistics of these data are meaningful. For example, we know the source channels of users, which can promote product promotion, and know the time that users stay on each page. We can increase advertising push for pages that stay longer, and so on.

(2) Performance monitoring

Performance monitoring refers to the performance of the monitoring front end, mainly including the monitoring of web pages or product experience on the client side. Common performance monitoring data includes:

• First screen loading time for different users, different models and different systems
• Bad time
• Response time for requests such as HTTP
• Total download time for static resources
• Page rendering time
• Page interactive animation completion time

The results of these performance monitoring can show how well the front-end performance is. Based on the results of performance monitoring, the front-end performance can be further optimized, such as compatibility with animation effects of lower versions of browsers, faster first-screen loading, and so on.

(3) Abnormal monitoring

In addition, exceptions can occur during the execution of the product’s front-end code, so exception monitoring needs to be introduced. Timely reporting of abnormal conditions can avoid the occurrence of online faults. While most exceptions can be caught by try catch, exceptions such as memory leaks and other incidental exceptions are difficult to catch. Common exceptions that need to be monitored include:

• Javascript exception monitoring
• Exception monitoring for style loss

Two, buried point scheme

(1) Code burying point

Code burying refers to burying in the form of embedded code. For example, to monitor the user’s click event, it will choose to insert a piece of code when the user clicks, save the listening behavior or directly transmit the listening behavior to the server in a certain data format. In addition, such as the need to statistics product PV and UV, the need to initialize the web page, send user access information.

Advantages of code burying:

• It can send or save the required data information accurately at any time.

Disadvantages:

• The workload is large, each component of the buried point need to add the corresponding code

(2) Visualization of buried points

By means of visual interaction, instead of code burying points. Business code and buried code separation, provide a visual interaction page, input for business code, through this visualization system, can be customized in the business code to add buried events, etc., the final output of the code coupling business code and buried code.

Visual burying points may sound fancy, but they’re actually not that different from code burying points. That is, a system to manually insert code burying points.

Disadvantages:

• Visual buried points can be buried controls are limited, can not be manually customized.

(3) there is no point

No burying point does not mean that there is no burying point, but all burying point, any event in the front end is bound to a logo, all events are not recorded. By regularly uploading record files and cooperating with file analysis, we can parse out the data we want and generate visual reports for professional analysis, so as to achieve “no-buried point” statistics.

It is also easy to implement unburying at the language level, such as finding the events bound to the DOM from the JS code of the page, and then performing full burying.

Advantages of no buried point:

• Due to the collection of full data, there is no need to pay attention to burying logic in the process of product iteration, and there will be no missing burying, misburying and other phenomena

Disadvantages:

• Full data collection without burial point, increase the pressure on data transmission and server
• The data to be uploaded for each event cannot be flexibly customized

Events available to the front end

(1) Browser window events

(2) Mouse events

(3) Keyboard events

(4) Form events

4. Front end buried point scheme selection and front end reporting scheme design

(1) Monitoring data

First of all, we need to define a product or web page, which generally requires monitoring and reporting data. The monitoring is divided into three stages: the user enters the homepage of the web page, the user interacts within the web page and reports errors in the interaction. The data to be monitored and reported at each stage is shown in the following figure:

(2) Buried point scheme

In the initial stage of the actual project, some system changes will be relatively large. In order to minimize user configuration and the principle of less code modification, the method without buried points is selected.

(3) Reporting period and reporting data type

If there are not many buried events, the event type triggered by the user can be reported immediately after the user triggers the event. If there are many buried events or frequent internal web page interactions, you can cache the reported information locally and report it periodically.

Type of data reported:

{
  "elementID": "elm_xxxxx".// The unique ID of the trigger element
  "useragent": "".// The user's system
  "networkstate": "".// Network information
  "currenturl": ""./ / the current url
  "fromurl":"".// From which page to jump to the current page
  "ip": "".//ip
  "traceid": "".// Link identifier
  "fingerprint": "".// Fingerprint identification
  "eventtype": "".// Event type
  "userid": ""./ / user
  "useriype": "".// User type
  "parentid": "".// Record the previous link
  "spanid": "".// Use elementId instead
  "timeStamp": ""./ / timestamp
  "widgettype": '',// Current element
}
Copy the code

(4) Burying point and reporting examples

/ * * *@author: visupervi
 * @Date: 2021 1/3/5 1:21 PM *@param: 
 * @return: 
 * @Description: Records data by user click behavior */
const postPointObj = (data) = > $fetch(`http://localhost:8088/apis/setPointData`, data, "post");
document.querySelector("body").addEventListener("click".async (evt) => {
  const selector = OptimalSelect.select(evt.target,{
    ignore: {id: true}})const element = document.activeElement.tagName;
  const eltType = document.activeElement.type;
  const spanId = `spanId_${uuid()}`;
  if (element === "BUTTON" || element === "A" || eltType === "button") {
    delDomHTML();
    let obj = {
      userAgent: window.navigator.userAgent,
      networkState: window.navigator.connection.effectiveType,
      url: window.location.href,
      ip: "".fingerprint: fingerprint,
      eventType: "click".userId: "".userType: "".timeStamp: Date.now(),
      widgetType: document.activeElement.tagName,
      traceId: traceId,
      "parentID": "".spanId: spanId,
    };
    postPointObj(obj);
    console.log("click event", obj); }});Copy the code

(5) Communication encryption of front and back end of buried point system

In the communication between the front and back ends of reported data, the encryption mechanism needs to be negotiated with the server. OpenSSL library is used to achieve encryption. OpenSSL is a widely used encryption algorithm. The front-end can use node’s Crypto module.

To create a hash instance, crypto.createHash() uses the following hash algorithm:

• md5
• sha1
• sha256
• sha512
• ripemd160

5. Design of visual display system for front-end monitoring results

After the back-end gets the information reported by the front-end, the front-end needs to visually display the results of the data analysis after data analysis and processing.

For the moment, show the topology.