页面卸载时自定义上报请求被浏览器取消怎么办？

皇甫米娅提问于 2026-02-06 17:40:28 阅读 52

优化

我在做页面性能监控时，想在页面关闭前上报用户停留时长。用了window.addEventListener('beforeunload')触发上报，但发现大部分请求都被浏览器取消了。尝试改用unload事件也不稳定，有时候数据完全没收到。

试过用AbortController控制请求，但发现页面关闭时信号量自动置为aborted。代码大致这样写的：


window.addEventListener('beforeunload', () => {
  fetch('/log', {
    method: 'POST',
    body: JSON.stringify({ duration: Date.now() - startTime }),
    headers: { 'Content-Type': 'application/json' }
  });
});

控制台报错说请求因页面卸载被取消了。有没有更可靠的上报方式？听说navigator.sendBeacon能解决这个问题，但不太清楚具体怎么用。

监控优化自定义上报

我来解答赞 4 收藏

反馈

1 条解答

技术红彦 Lv1

用 navigator.sendBeacon 替代 fetch，它专为页面卸载时可靠发送请求设计。
修改你的代码如下：

window.addEventListener('beforeunload', () => {

  const data = JSON.stringify({ duration: Date.now() - startTime });

  navigator.sendBeacon('/log', data);

});

确保后端用 Content-Type: application/json 解析请求体，就这样。

2026-02-06 17:50