断网、弱网、关页都不怕:前端日志上报怎么做到不丢包
在前端监控系统中,数据采集只是第一步,如何确保数据能够稳定上报到服务器才是关键挑战。用户可能面临断网、弱网环境,或者快速关闭页面,这些情况都可能导致日志数据丢失。
一、上报方式与策略:如何选出最优解?
前端数据上报主要有三种方式:Image(图片请求)、sendBeacon 和 XHR/Fetch。
1. 三种上报方式详解
GIF/Image
利用图片请求(new Image().src)来传输数据,将上报数据拼在URL后面,服务器返回一张1×1的透明GIF图完成上报。
特点:天然支持跨域,绝无"预检"请求(因为是简单请求)。
局限:只能发GET请求,URL长度有限(通常<2KB),无法携带大数据。
sendBeacon
使用navigator.sendBeacon(url, data),浏览器将数据放入后台队列,即使页面关闭也会尽力发送。
特点:异步非阻塞(不卡主线程),可靠性极高。
局限:数据量有限(约64KB),无法自定义复杂的请求头。
XHR/Fetch
使用XMLHttpRequest或fetch发送POST请求。
特点:容量极大(几兆都没问题),适合发送录屏、长堆栈。
局限:跨域时通常会触发OPTIONS预检(成本高),页面关闭时请求容易被掐断(fetch需配合keepalive)。
刺鸟的荆棘树 
