前言

之前写了一篇文章作为前端开发，如何调试线上代码？深受大家喜爱，后面有网友说可以接入前端监控系统。我就写了前端数据监控平台 ,这篇文章在发送错误消息的时候用的是http请求，有网友说埋点和错误可以用navigator.sendBeacon发送数据。今天就来学习学习navigator.sendBeacon,让我们的代码更加健壮。

本文记录navigator.sendBeacon异步请求的使用，以及他的应用场景和埋点小demo。

一、navigator.sendBeacon

navigator.sendBeacon 是浏览器的 API，用于在浏览器后台发送异步请求,它不会等服务端响应。

它可以用于在页面卸载或关闭的时候，发送数据，以及在不阻塞页面卸载的情况下发送数据。

使用 navigator.sendBeacon 方法发送的请求是异步的，不会阻塞页面的卸载或关闭过程。

这对于需要在用户离开页面之前发送数据的情况非常有用。

优点

不受页面卸载过程的影响，确保数据可靠发送。
普通的http请求如XMLHttpRequest 和Fetch在页面关闭或者刷新、前进、后退等操作时 , 这些请求有可能在页面销毁之前没有完成，导致数据丢失。
navigator.sendBeacon的优先级是较低的，XMLHttpRequest 和fetch这些同步请求，以及其他高优先级任务在它之前，navigator.sendBeacon并不会立即执行，可以说它会在空闲时间发送请求。
能够发送跨域请求
navigator.sendBeacon是不受跨域限制的

- 缺点

只能发送POST请求
只能传输少量数据（64 KB以内）
无法自定义请求头
只能传输ArrayBuffer、ArrayBufferView、Blob、DOMString、formData或URLSearchParams类型数据
如果处于危险网络环境、开启了广告屏蔽插件该请求将无效。

二、navigator.sendBeacon应用场景

发送心跳包

利用navigator.sendBeacon发送心跳包，与服务器保持长连接，避免长时间未请求而断开连接。

function sendHeartbeat() {
  const data = 'heartbeat'; // 心跳包数据
  const url = 'http://localhost:3001/api/heartbeat'; // 心跳包目标 URL

  navigator.sendBeacon(url, data);
}

// 每隔一定时间发送心跳包
setInterval(sendHeartbeat, 5000); // 每 5 秒发送一次心跳包

埋点

可以使用navigator.sendBeacon在页面卸载时记录停留时间，以及pv、uv、错误日志的上报、按钮点击次数等用户反馈对于一些小的表单，如：用户反馈、意见和建议等可以使用navigator.sendBeacon进行请求。

三、navigator.sendBeacon的使用

基本使用

navigator.sendBeacon(url, data);

url：是要发送请求的目标地址，可以是相对路径或绝对 URL。
data：是要发送的数据，可以是字符串、ArrayBuffer 或 Blob。

navigator.sendBeacon 方法发送的请求是 POST 请求，并且请求头中会自动添加 Content-Type: application/x-www-form-urlencoded。

需要发送JSON格式的数据的时候，可以使用Blob进行包装从而发送JSON数据


let data = {name:"smz"}
let blob = new Blob([JSON.stringify(data)],{type:'application/json; charset=UTF-8'})

四、用户停留时间埋点

当打开页面时记录时间，在页面销毁的时候记录时间，这样就得到了用户停留时间，再通过navigator.sendBeacon进行上报用户名、时间、页面等信息完成数据的统计。

前端：

const reportData = () =>{
    //统计停留时间
    let startTime = performance.now(); // 进入页面的时间点
    let logVisit = async function() {
        if (!navigator.sendBeacon) return false;

        const endTime = performance.now(); // 页面卸载的时间点

        let data = new FormData();
        const reportDataList = {
            name: 'smz',
            page: 'home',
            stayTime: ((endTime - startTime)/60000).toFixed(2) + '分钟' // 用户停留时间
        };
        let time = new Blob([JSON.stringify(reportDataList)],{type:'application/json; charset=UTF-8'})
        navigator.sendBeacon("http://localhost:3001/api/b", time);
    };
    window.addEventListener("beforeunload", logVisit);
}
reportData()

后端：这里使用node

const express = require('express')
const app = express()

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63342');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
    next();
});

// 解析req.body中的内容
app.use(express.text())
// 心跳包
app.post('/api/heartbeat',(req,res)=>{
    console.log(req.body)
    res.send('ok')
})

// 解析req.body中的内容
app.use(express.json())

// navigator.sendBeacon
app.post('/api/b',(req,res)=>{
    console.log(req.body)
    res.send('ok')
})

app.listen(3001,()=>{
    console.log('server is running')
})

总结：

总结

总之，navigator.sendBeacon 是一个非常有用的 API，在页面卸载或关闭时发送异步请求，非常适合发送统计数据、日志记录、表单提交等场景。

网络-navigator.sendBeacon

前言