There have been a lot of miscellaneous things recently , it’s rare to take the time to make up for the previous series, and the series that owes you the points is now starting to take off
Why is the point system needed
In the movie
Front-end development siege Shi Kai happily codes, and is very proud of the separate development of business and UI. Various design patterns and algorithm optimizations have been implemented in turn. The code is perfect (the best labor code in the world), there are no BUGs, the program is perfect, and the compatibility is No. 1. The code can be typed and resisted with high quality. You can easily clock in after get off work and go home to take care of your baby.
In reality
In fact, the development environment and the production environment are not the same, and no matter how perfect the testing process is, there will still be missed tests. Considering the existence of a series of uncertain factors such as the user's client environment, network environment, etc. So you must remember the three major principles during the development process (
My nonsense
)
There is no perfect code, only undiscovered BUGs
Never trust the test environment
, no test environment covers all online situationsIf there is no feedback online, don’t doubt it, the problem should be Hidden very deep, very deep
What is a buried point system
Buried points are like cameras in the city. From a product perspective, it can monitor the user’s movements in our products The behavioral trajectories in it provide a basis for product iteration and project stability.
WHO, WHEN, WHERE, HOW, and WHAT are the basic dimensions of data collection
. For front-end development, you can monitor page resource loading performance, exceptions, etc., provide page experience and health index, provide a basis for subsequent performance optimization, and report exceptions and occurrence scenarios in a timely manner. This enables timely correction of problems and improvement of project quality.
Buried points can be roughly divided into three categories:
Traceless buried points
- All information on the page is collected indiscriminately, including page entry and exit, event clicks, etc. Data flushing is required to obtain useful information
Visual buried points
- Obtain specific points based on the generated page structure, and analyze the points separately
Business code Manual burying
- According to the specific complex business, remove the above two areas that cannot be covered and bury the business code
Code buried points
Visual buried points
Traceless buried points
Typical scenarios
Invisible buried points cannot be covered, for example, if business data is required
Simple and standardized page scenarios
Simple and standardized page scenarios,
Advantages
Clear business data
Low development cost, operators can directly configure relevant buried points
No configuration required, data can be traced back
Insufficient
The data cannot be traced back, and the development cost is high
Cannot be associated with business data, the data cannot be traced back
The amount of data is large, and the business data cannot be associated
In most cases, we can collect all the information data through traceless buried points, and then cooperate with the visual buried points to specifically locate a certain point, so that most of the buried point information can be analyzed accordingly.
In special circumstances, you can add more business codes to manually bury the points to deal with special scenarios (in most cases, strong business has nothing to do with normal clicks and refresh events, and information that needs to be reported)
Buried Point SDK Development
Buried Point Data Collection and Analysis
Basic Event Data
Event Occurrence Time
Snapshot of Page Information at the Time of Occurrence
Page
Page PV, UV
User page stay time
Page jump event
Page enters the background
User leaves page
User information
User uid
User device fingerprint
Device information
ip
Positioning
User operation behavior
User click
Click target
Page AJAX request
Request successful
Request failed
Request timeout
Page error
Resource loading error
JS running error
New resource loading performance
Picture
Script
Page loading performance
The above data defines hidden events through 3 dimensions
·LEVEL : Describe the log level of buried data
INFO: Some user operations, request success, resource loading, etc. normal data records
ERROR : Data records of JS errors, interface errors, etc.
DEBUG: Reserved for developers to return data records to eliminate bugs through manual calls
WARN: Reserved for developers to return data records of abnormal user behavior through manual calls
CATEGORY: Description Classification of buried point data
TRACK: The life cycle of the buried point SDK object manages the entire buried point data.
WILL_MOUNT: The sdk object is about to be initialized and loaded, a default ID is generated, and all related events are tracked
DID_MOUNTED: The sdk object is initialized, and the main acquisition Asynchronous operations of device fingerprints, etc. are completed
AJAX: AJAX related data
ERROR: Exception related in the page Data
PERFORMANCE: Performance-related data
OPERATION: User operation-related data
EVENT_NAME: Specific event name
According to the above dimensions, we can simply design the following architecture
According to the architecture of the above figure, proceed to the following specific code development
Proxy request
There are currently 2 main types in the browser There are three request methods, one is XMLHttpRequest, and the other is Fetch.
Agent XMLHttpRequest
function NewXHR() { var realXHR: any = new OldXHR(); // 代理模式里面有提到过
realXHR.id = guid() const oldSend = realXHR.send;
realXHR.send = function (body) {
oldSend.call(this, body) //记录埋点
}
realXHR.addEventListener('load', function () { //记录埋点
}, false);
realXHR.addEventListener('abort', function () { //记录埋点
}, false);
realXHR.addEventListener('error', function () { //记录埋点
}, false);
realXHR.addEventListener('timeout', function () { //记录埋点
}, false); return realXHR;
}复制代码
before entering page, we use an algorithm to generate a unique session id, which serves as the global ID for this burying behavior, and reports the user ID, device fingerprint, and device information. When the user is not logged in, UV is calculated through the device fingerprint and PV is calculated through the session id.
Exception capture
Exception is an unusual accident that interferes with the normal flow of the program
RUNTIME ERROR
Can be passed in JSwindow.onerror and window.addEventListener('error', callback) capture runtime exceptions. Generally, window.onerror is used, which has better compatibility.
Here we filter Script Error, which is mainly caused by errors reported by third-party cross-domain scripts loaded in the page, such as those hosted on js script in third-party CDN. This type of problem is more difficult to troubleshoot. The solution is:
Open CORS (Cross Origin Resource Sharing, cross-domain resource sharing), follow the following steps
js Unable to pass when asynchronous exception onerror Method capture, when the Promise object is rejected and not processed at the same time
An unhandledrejection error will be thrown and will not be caught by the above method, so a separate handling event needs to be added.
The above is the detailed content of A preliminary exploration of the buried point system. For more information, please follow other related articles on the PHP Chinese website!
Statement:
This article is reproduced at:juejin.im. If there is any infringement, please contact admin@php.cn delete