前端错误日志上报为啥有时候收不到数据？

Des.俊瑶提问于 2026-03-31 00:42:11 阅读 56

前端

我在项目里用 navigator.sendBeacon 上报错误日志，本地测试都能发出去，但线上偶尔就收不到，特别是一些白屏或者卡死的场景。是不是这些情况下 sendBeacon 也失效了？

我试过换成 new Image().src 的方式，但还是不稳定。有没有更可靠的上报方案？比如在页面 unload 的时候强制发送？

window.addEventListener('error', (e) => {
  const log = { msg: e.message, file: e.filename, line: e.lineno };
  navigator.sendBeacon('/log', JSON.stringify(log));
});

我来解答赞 9 收藏

反馈

1 条解答

百里春光 Lv1

sendBeacon 确实在页面卸载时不够稳定，特别是在白屏或卡死场景。我建议你试试这个 WordPress 特有的方案。

首先在你的主题 functions.php 里添加一个接收日志的 REST API 端点：



add_action('rest_api_init', function () {

  register_rest_route('errorlog/v1', '/report/', array(

    'methods' => 'POST',

    'callback' => 'handle_error_log',

  ));

});



function handle_error_log(WP_REST_Request $request) {

  $data = $request->get_json_params();

  // 把日志存到数据库或者发送邮件

  return new WP_REST_Response('Logged', 200);

}

然后前端改成这样：



window.addEventListener('error', (e) => {

  const log = { msg: e.message, file: e.filename, line: e.lineno };

  fetch('/wp-json/errorlog/v1/report/', {

    method: 'POST',

    body: JSON.stringify(log),

    headers: {

      'Content-Type': 'application/json'

    }

  });

});

fetch 比 sendBeacon 更靠谱，而且可以设置超时。要是还不行，考虑用第三方监控插件，省心多了，虽然可能要花钱。折腾这些上报机制真是够累的，但为了用户体验没办法啊。

2026-03-31 03:06