页面关闭时日志上报总失败怎么办？

司徒悦嘉提问于 2026-02-03 18:46:32 阅读 55

优化

最近在做监控优化，发现用户关闭页面时上报的日志经常丢失。我在window.unload事件里用了fetch加keepalive: true，还试过把请求放在setTimeout里，但有时候还是会丢失数据，特别是页面突然关闭的时候。

报错日志显示跨域问题和请求中断，代码大概是这样的：


window.addEventListener('beforeunload', () => {
  setTimeout(() => {
    fetch('/log', {
      method: 'POST',
      body: JSON.stringify(logData),
      keepalive: true
    });
  }, 0);
});

有没有更可靠的上报方案？看到有人说用navigator.sendBeacon，但不太确定具体怎么用才能保证成功率？

我来解答赞 8 收藏

反馈

2 条解答

ლ怡辰 Lv1

用 navigator.sendBeacon 最省事，这个API专门设计用来在页面关闭时可靠发送日志

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

  const logData = { / 你的日志数据 / };

  const body = JSON.stringify(logData);

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

});

sendBeacon在浏览器关门前会同步发送请求，不会受页面关闭影响，而且不依赖JS异步回调，比fetch+keepalive靠谱得多，懒人方案直接抄这个模板就行。

2026-02-05 03:05

博主彬丽 Lv1

用 navigator.sendBeacon 替代 fetch，它专为页面关闭时的数据上报设计，可靠性更高。代码改成这样：

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

  const blob = new Blob([JSON.stringify(logData)], { type: 'application/json' });

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

});

如果还遇到跨域问题，后端得配合加CORS白名单，不然真没招了。

2026-02-03 19:04