Front-end monitoring and reporting of three log data

background

Previously, in order to upload log data in real time, we used the following method

1. Initiate a synchronous XMLHttpRequest to send data. Or a GET request or head request
2. Create an img element and set src. Most user agents will delay unloading the document to load the image.
3. Create a no-op loop of several seconds.

In previous projects, img was often used to report data.

1. There are no cross-domain restrictions, and cross-domain GET requests can be sent directly without special processing;
2. Good compatibility. Some static pages may have scripts disabled, so the script tag cannot be used;
3. The advantage of the img tag is that it does not need to be appended to the document. You only need to set the src attribute to successfully initiate the request.

Navigator.sendBeacon() is recommended

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon

Compared with the src of the image, this method has more advantages:

1. It will not compete with the main business code for resources, but will be sent when the browser is idle;
2. And it can ensure that the request is sent successfully when the page is unloaded, without blocking page refresh and jump;
3. Current tracking monitoring tools usually use sendBeacon first, but due to browser compatibility, you still need to use the src of the image.

localStorage temporary storage

You can also temporarily store data through localStorage and upload it when the browser is idle. If the upload is successful, the local data will be deleted.

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods