前端埋点监控跟踪之 navigator.sendBeacon() 方法

小渣渣

需求：开发完成的产品无法保证没有 BUG，即使在测试阶段没有任何问题，部署到正式环境，面向用户都可能会有意想不到的情况，前端页面也是一样，如何埋点监控跟踪，而不是等待用户反馈，及时发现问题变得非常重要。Sentry 和 Bugsnag 都是两款非常不错的监控产品。

回顾

ASP.NET Core 链路追踪（四）接入 Jaeger 链路追踪
https://www.itsvse.com/thread-9537-1-1.html

ASP.NET Core 链路追踪（一）安装 Skywalking 教程
https://www.itsvse.com/thread-9456-1-1.html

监控到异常信息后，如何将数据提交给后端 API 呢？Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API，尤其适用于在页面即将卸载时发送数据，如日志记录、用户行为分析等。

如果使用传统的 XHR 发送数据，需要前端对跟踪接口做特殊逻辑处理，如果不做特殊处理，接口挂掉后进入死循环。navigator.sendBeacon()  方法是将消息放到浏览器队列中，即使发送失败，其错误信息也不会被前端捕获到。

Navigator.sendBeacon 介绍

该 navigator.sendBeacon()  方法以异步方式向 Web 服务器发送包含少量数据的HTTP POST请求。参数：url、data（ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据）

文档：

超链接登录可见。
超链接登录可见。

使用场景

页面卸载时的日志记录：在用户离开页面时记录行为数据，如页面停留时间、点击行为，以及 pv、uv 等。
分析和监控：发送用户行为数据到分析服务器，用于网站性能监控和用户行为分析。
状态报告：向服务器报告应用程序状态或错误信息。

测试

代码如下：

登录可见。

Navigator.sendBeacon 和 XHR、fetch 有什么异同点

相同点

发送网络请求：所有这三种方法都用于从客户端向服务器发送数据。
支持多种数据格式：它们都可以发送字符串、JSON、二进制数据等多种格式的数据。

不同点

Navigator.sendBeacon

用于在页面卸载时发送少量数据，适合日志、分析数据等用途。
发送数据是异步的，但不返回任何信息给调用者，无法处理服务器的响应。
设计为在页面卸载时保证数据发送，即使在浏览器关闭或页面跳转时。
始终使用 HTTPPOST 请求。
不需要处理响应，使用简单。

XMLHttpRequest

用于更复杂的、需要处理响应的 AJAX 请求。
可以进行同步或异步请求。
可以处理服务器的响应，并进行进一步处理（如解析 JSON、处理状态码等）。
提供丰富的事件（如 onload、onerror、onprogress 等），可以监控请求的各个阶段。
在所有主流浏览器中都得到了广泛支持，包括一些较老的浏览器。
使用较复杂，需要处理请求的各个阶段和状态。

Fetch

现代化的请求接口，用于替代 XMLHttpRequest，支持更简单和更灵活的请求和响应处理。
始终进行异步请求，返回 Promise 对象。
支持链式处理响应，可以轻松解析 JSON、处理状态码等。
支持 async/await 语法，更符合现代 JavaScript 开发习惯。
更好地支持跨域请求和 CORS（跨域资源共享）。
允许在请求中添加更多的选项（如自定义头部、请求方法等）。

总结

Navigator.sendBeacon 是一个专为可靠性设计的 API，特别适用于在页面卸载时发送少量数据。
它具有简单、非阻塞、可靠等优点，特别适合日志记录和用户行为分析等场景。
发出的是异步请求，并且是 POST 请求。
只能判断出是否放入浏览器任务队列，不能判断是否发送成功。
无需处理返回值。
需要注意浏览器兼容问题。