Requirements: The developed product cannot guarantee that there are no bugs, even if there are no problems in the testing stage, deployed to the production environment, there may be unexpected situations for users, and the same is true for front-end pages. Sentry and Bugsnag are both very good monitoring products.
review
After monitoring the anomaly information, how do I submit the data to the backend API? Navigator.sendBeacon is an API for sending small amounts of data to the server, especially when a page is about to be unloaded, such as logging, user behavior analysis, etc.
If you use traditional XHR to send data, you need to do special logic processing on the tracking interface on the frontend. navigator.sendBeacon() methodDrop a message into a browser queue so that even if the send fails, its error message will not be caught by the frontend。
Navigator.sendBeacon introduced
The navigator.sendBeacon() method sends an HTTP POST request with a small amount of data to the web server asynchronously. Parameters: url, data (data of type ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData, or URLSearchParams)
Documentation:
The hyperlink login is visible.
The hyperlink login is visible.
Usage scenarios
Logging when the page is uninstalled: Records behavioral data such as page dwell time, click behavior, PV, UV, etc. when the user leaves the page.
Analytics and Monitoring: Sending user behavior data to analytics servers for website performance monitoring and user behavior analysis.
Status Reporting: Reports application status or error information to the server.
Test
The code is as follows:
What are the similarities and differences between Navigator.sendBeacon and XHR and fetch?
Similarities
Sending network requests: All three methods are used to send data from the client to the server.
Support for multiple data formats: They can send data in various formats such as strings, JSON, binary data, etc.
Differences
Navigator.sendBeacon
It is used to send a small amount of data when the page is uninstalled, and is suitable for logging, analyzing data, etc.
Sending data is asynchronous, but it does not return any information to the caller and cannot process the server's response.
Designed to guarantee data delivery when the page is uninstalled, even when the browser is closed or the page jumps.
Always use HTTPPOST requests.
No need to process responses, simple to use.
XMLHttpRequest
For more complex AJAX requests that require processing responses.
Synchronous or asynchronous requests can be made.
You can process the server's response and do further processing (e.g., parsing JSON, handling status codes, etc.).
Provides rich events such as onload, onerror, onprogress, etc., to monitor the various stages of the request.
Widely supported in all major browsers, including some older browsers.
It is more complex to use and requires handling the various stages and states of the request.
Fetch
A modern request interface to replace XMLHttpRequest for simpler and more flexible request and response processing.
Always make an asynchronous request, returning a Promise object.
It supports chained processing responses, making it easy to parse JSON, process status codes, and more.
Supports async/await syntax, which is more in line with modern JavaScript development habits.
Better support for cross-domain requests and CORS (Cross-Domain Resource Sharing).
Allows adding more options to the request (e.g., custom header, request method, etc.).
summary
Navigator.sendBeacon is an API designed for reliability, especially for sending small amounts of data when a page is uninstalled.
It has the advantages of simplicity, non-blocking, and reliability, and is especially suitable for scenarios such as logging and user behavior analysis.
An asynchronous request is made and is a POST request.
It can only determine whether it is placed in the browser task queue, but cannot determine whether it is successfully sent.
There is no need to deal with the return value.
Browser compatibility issues need to be noted. |
Posted on 2025-3-5 09:46:14
|
|
|
|
