[Front-end monitoring system] 3 ways to report buried point data

foreword

First of all, let's make some brief descriptions of front-end monitoring:

The purpose of front-end monitoring?

1. Improve user experience
2. Discover abnormalities, locate abnormalities, and resolve abnormalities faster
3. Understand business data and guide product upgrades——data-driven thinking
   It refers to obtaining user behavior and tracking the usage of products on the user end through certain means, and based on monitoring data, pointing out the direction for product optimization and providing users with more accurate and complete services.

The direction of front-end monitoring?

Generally speaking, front-end monitoring is nothing more than monitoring from the following three angles:

• Data monitoring (monitoring user behavior)
• Performance monitoring (monitoring web page performance)
• Abnormal monitoring (monitoring code exceptions)

The process of front-end monitoring?

Collect Data>>Report Data>>Analyze Data>>Alarm Notification

Obviously, the first steps of front-end monitoring are front-end burying and data reporting, that is, the data collection stage, and the richness and accuracy of data collection will affect the judgment results of product online effects.

Then, the following will mainly tell you about the first step of data collection stage-relevant knowledge of buried point data reporting.

Buried report

埋点，它的学名是事件追踪（Event Tracking），主要是针对特定用户行为或业务过程进行捕获、处理和发送的相关技术及实施过程。埋点是数据领域的一个专业术语，也是互联网领域的一个俗称。埋点是产品数据分析的基础，一般用于推荐系统的反馈、用户行为的监控和分析、新功能或者运营活动效果的统计分析等。埋点包含两个重要概念：事件（event），属性（param）。

The mainstream solutions for burying points include traceless burying points (full burying points), code burying points, and visual burying points. I won’t go into too much detail here, you can Baidu by yourself.
Portal

Three ways to report data

1. Directly send a request to report

We can directly send data to the backend through ajax, take axiosfor example .

axios.post(url, data);

Problem:
But this method has a problem, that is, if the request is reported when the page is unloaded or refreshed, the request may be canceled by the browser before it is sent to the server before the browser is closed or reloaded, resulting in data reporting failure.

We can change the ajax request to a synchronous method, so that the request can be guaranteed to be sent to the server. Since fetchboth and axiosdo not support synchronous requests, it is necessary XMLHttpRequestto send synchronous requests through .

Example:

const syncReport = (url, { data = {}, headers = {} } = {}) => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, false);
  xhr.withCredentials = true;
  Object.keys(headers).forEach((key) => {
    xhr.setRequestHeader(key, headers[key]);
  });
  xhr.send(JSON.stringify(data));
};

2. Use pictures to report

The second way is to use the src attribute of the picture to send a request for data reporting, because most browsers will delay unloading (unload) the document to load the image (only most browsers still have compatibility), so the loophole of the first method can be solved by using picture reporting.

There are also the following advantages to reporting with pictures :

1. There will be no cross-domain problems in the image request method, because the dot domain name is often not the current domain name;
2. Prevent blocking page loading and affecting user experience;
3. Generally, 1*1 pixel transparent gif is used for reporting, because the gif image format is small (the smallest BMP file requires 74 bytes, PNG requires 67 bytes, and a legal GIF only requires 43 bytes)

Example:

new Image().src = 'https://example.com/aaa?name=hester&num='+Math.random() 

3. sendBeacon

Also in order to solve the problem that the data cannot be reported when the page is unloaded, the sendBeacon method has been added to the bottom layer of the web. MDN description

This method is mainly used for the needs of statistical and diagnostic code that usually tries to send data to the web server before unloading the document. Sending data too early can lead to missed opportunities to collect data. However, it has been difficult for developers to ensure that data is sent during document unloading.

Using sendBeacon()the method will cause the user agent (browser) to send data to the server asynchronously when it gets the chance, without delaying the unloading of the page or affecting the loading performance of the next navigation, which means:

1. Data sending is reliable.
2. Data is transferred asynchronously.
3. Does not affect the loading of the next page.

Example:

navigator.sendBeacon(url, data);

Commonly used buried point reporting processing methods

In order to prevent reporting errors caused by sendBeacon compatibility, the sendBeacon method can be used first, and the Image method can be used as a fallback.

function sendLog(url: string, params: object) {
    if（navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }

I am Abin, looking forward to your attention!