Chrome 124关闭标签页时navigator.sendBEacon()调用偶发丢失求助

1. 锁定版本差异，排除环境干扰 #

• 用极简页面做版本对比：写一个不含Angular的静态页面，绑定window.pagehide事件调用sendBeacon，分别在Chrome 124和之前正常的版本（如123）中测试标签页关闭场景，抓包确认请求是否发送。快速区分是Angular应用代码的问题，还是Chrome版本的行为变更。
• 查Chrome官方更新日志：重点看124版本中关于pagehide、visibilitychange或sendBeacon的调整，比如是否收紧了后台任务的执行优先级或资源限制。

2. 检查事件绑定的可靠性 #

• 确认Angular中事件绑定时机：如果用@HostListener('window:pagehide')绑定，注意组件销毁时是否会自动解绑，导致页面关闭时事件回调未触发。建议改为全局绑定（比如在AppComponent初始化时绑定，直到应用卸载），避免组件生命周期的干扰。
• 尝试替换触发事件：改用visibilitychange事件，当document.visibilityState === 'hidden'时调用sendBeacon。部分场景下pagehide的触发时机可能晚于浏览器的资源回收，而visibilitychange在页面进入隐藏状态时就会触发，更稳定。

3. 排查sendBeacon的自身限制 #

• 校验数据大小：Chrome对sendBeacon的单次发送数据量通常限制在64KB左右，超过这个值会直接返回false且不发送请求。可以在回调中打印navigator.sendBeacon(url, data)的返回值，判断是否因数据过大失败。
• 跨域配置检查：如果请求是跨域的，确认后端是否配置了正确的CORS响应头（如Access-Control-Allow-Origin），Chrome 124可能对跨域sendBeacon的规则做了调整，导致请求被拦截。
• 规范数据格式：sendBeacon对数据格式有要求，尽量用Blob、FormData或序列化后的字符串，不要直接传复杂对象，否则可能导致发送失败。

4. 优化抓包与调试手段 #

• 改用Chrome DevTools抓包：打开DevTools的“网络”面板，勾选「保留日志」（Preserve log），并确保选择「全部」（All）请求类型，Beacon请求会被归类在「Other」或「Beacon」分类下。Fiddler可能因代理设置或浏览器隐私策略漏掉这类请求。
• 启用后台任务追踪：在chrome://flags中开启「Background Tracing」，捕获标签页关闭时的后台任务日志，查看sendBeacon是否被浏览器调度，或者是否被提前终止。

5. 排查应用代码的干扰 #

• 清理阻塞操作：pagehide事件回调中如果有同步AJAX、大量DOM操作或其他阻塞任务，会挤占sendBeacon的执行时间，导致浏览器来不及发送就关闭页面。回调中应只保留sendBeacon调用，避免额外逻辑。
• 绕过zone.js影响：Angular的zone.js可能会包装事件回调，导致执行时机延迟。可以尝试在NgZone.runOutsideAngular()中调用sendBeacon，绕开zone的变更检测逻辑，提升执行速度。

6. 替代方案对比验证 #

• 用fetch keepalive替代测试：将sendBeacon替换为带keepalive: true的fetch请求，示例代码：

  fetch('/api/log', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' },
    keepalive: true,
    credentials: 'include'
  });
  

  对比两种方式在Chrome 124中的成功率，判断是否是sendBeacon本身的兼容性问题。

内容的提问来源于stack exchange，提问作者Karunakaran GN