标签页关闭前用sendBeacon发送埋点数据

在网页关闭或跳转前可靠上报埋点数据，关键在于正确使用 `sendBeacon()`：必须以 `pagehide` 事件为触发入口，并严格判断 `event.persisted === false` 以排除 bfcache 场景；传入数据需为 Blob 或 URLSearchParams 等合法类型，避免 JSON 对象直传导致静默失败；严守 64KB 单次限制并务必检查返回值，失败时及时降级或精简数据；同时需确保接口同源、服务端支持幂等处理——因为 `sendBeacon` 不提供网络反馈，真正的可靠性来自前端严谨的兜底逻辑与后端稳健的日志容错机制。

pagehide 事件才是 sendBeacon 的正确触发点

直接在 unload 或 beforeunload 里调用 navigator.sendBeacon()，大概率发不出去——尤其在 Safari、iOS Safari 和启用 bfcache 的 Chrome 中，unload 常被跳过或截断执行。

真正稳定可靠的入口是 pagehide，它在页面真正不可见时触发（包括关闭、跳转、刷新、进入后台），且所有现代浏览器都支持。但必须加一层判断：

• 检查 event.persisted === false：为 true 表示页面进了往返缓存（bfcache），并未真正卸载，此时通常不该发埋点
• 只在 event.persisted === false 时调用 sendBeacon，避免误报“离开”行为
• 别同时监听 pagehide 和 unload —— 它们执行时机冲突，反而增加失败概率

传错 data 类型会导致静默失败

navigator.sendBeacon() 对 data 参数类型极其严格：只接受 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams。传 JS 对象（如 { event: 'exit' }）或未序列化的数据，会直接失败，且不报错。

常见错误写法：navigator.sendBeacon('/log', { event: 'exit' }) → 返回 false，但开发者可能没检查返回值就以为发出去了。

推荐做法：

• 用 JSON.stringify() 转成字符串，再包装成 Blob（服务端按 text/plain 解析）：new Blob([JSON.stringify(data)], { type: 'application/json' })
• 或用 URLSearchParams（适合键值对）：new URLSearchParams({ event: 'exit', duration: '12345' })
• 避免直接传 JSON.stringify(data) 字符串——虽能成功入队，但服务端若按 application/json 解析会出错

64KB 硬限制和返回值必须检查

navigator.sendBeacon() 单次请求有明确的 64KB（65536 字节）硬限制，且整个 Beacon 队列共享该预算。超限会直接返回 false，不抛异常、不警告。

返回 true 仅表示数据成功入队，不代表服务器收到；返回 false 才说明被拒（原因可能是跨域、URL 无效、类型不支持、或超限）。

务必检查返回值并做轻量兜底：

• 若 navigator.sendBeacon(url, data) === false，可降级用 fetch()（需接受弱网下可能丢数据）
• 或拆分数据：比如把大日志切片，只上报关键字段（停留时长、退出原因、最后操作）
• 别依赖 sendBeacon 传大体积数据（如截图 base64、完整 DOM 快照）——它不是为此设计的

同源限制和服务端配合不可少

navigator.sendBeacon() 遵守同源策略，目标 url 必须与当前页面同源。跨域请求会直接失败（返回 false），且无法携带自定义 headers（如 Authorization）。

这意味着：

• 埋点接口必须部署在同域下，或配置 CORS（但注意：CORS 不适用于 sendBeacon，它不发预检请求，也不读响应）
• 服务端不能依赖 header 鉴权，得靠 token 放 query 或 body 里
• 服务端需做好幂等处理——因为浏览器可能重试（尤其在弱网下），也可能因进程终止导致“已入队但未发出”，造成重复或丢失

最易被忽略的一点：sendBeacon 不提供任何网络层反馈。你永远不知道请求是否真的发了出去，也不知道 HTTP 状态码。前端能做的只是保底入队，其余全靠服务端日志 + 幂等 + 客户端采样补漏。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《标签页关闭前用sendBeacon发送埋点数据》文章吧，也可关注golang学习网公众号了解相关技术文章。