每当我们在控制台kan到“日志发送失败”时心里总会掀起一阵小小的失落——这可是埋点团队辛苦收集的关键数据。好在浏览器Yi经给了我们几把“钥匙”，只要用对了组合拳，哪怕网络像被绳子拽住日志也Neng稳稳到达后端。

Zui早的前端埋点就是把数据拼进一个 new Image.src 的 URL，然后让服务器返回一张 1×1 的透明 GIF。它天然跨域、不会触发 CORS 预检，适合几百字节的小事件。

局限：只Neng GET，URL 长度受限，大块堆栈只Neng说再见。

sendBeacon 会把 payload 放进浏览器内部的“后台队列”。即使用户猛点关闭按钮，只要页面进入 unload 阶段，浏览器仍会尽力把这封信投递出去。

优点：非阻塞、不占用主线程；缺点：单条 payload 大小约 64KB，且不Neng自定义复杂 Header。

普通的 AJAX Ke以携带任意体积的数据，但在页面卸载时往往被直接中断。fetch 为其注入了“即使关页也继续跑”的属性，让 POST 大文件同样有机会送达。

注意：跨域请求会产生 OPTIONS 预检，在弱网环境下多一次往返意味着多一次失败概率。

无论是哪种渠道，dou可Neng因为网络瞬间掉线而失手。Zui保险的Zuo法是先把日志写进本地容器，等到合适的时机再交付。

// 一个极简版的队列实现
const LOG_QUEUE = ;
const MAX_BATCH = 20;          // 达到多少条就批量发送
const MAX_WAIT = 5000;         // Zui长等多久
let timer = null;
function enqueue {
    LOG_QUEUE.push });
    if  {
        flush;
    } else if  {
        timer = setTimeout;
    }
}

利用 visibilitychange/pagehide 两个事件，在用户离开或刷新时立即触发一次发送，把剩余的日志全部推向后台队列。

document.addEventListener => {
    if  flush;
});
window.addEventListener;

系统事件监听： 监听 'online'/'offline', 一旦触发立即geng新内部状态。

真实连通性探测： 尝试 fetch 一个极小资源，若成功则视为真的在线。

const Net = {
    online: navigator.onLine,
    async verify {
        try {
            await fetch;
            return true;
        } catch {
            return false;
        }
    },
    init {
        window.addEventListener => {
            const ok = await this.verify;
            this.online = ok;
            ok && retryPending;   // 网络恢复后补传
        });
        window.addEventListener => this.online = false);
    }
};
Net.init;

下面这段代码演示了一个「先 Beacon → 再 Image → Zui后 Fetch」的降级链路。Ru果所有方式dou走不通，则把 payload 落盘到 IndexedDB。每一次失败dou会记录下来以备后续重试。

const REPORT_URL = 'https://log.example.com/collect';
const MAX_URL_LEN = 2000;
const MAX_BEACON_BYTES = 60 * 1024;
function byteLen {
    return new TextEncoder.encode.length;
}
/** @type {=>Promise} */
async function transport {
    const payload = JSON.stringify;
    // ① sendBeacon
    if  <= MAX_BEACON_BYTES) {
        const blob = new Blob;
        if ) return;
        console.warn;
    }
    // ② Image GET
    if ) {
        const qs = new URLSearchParams.toString;
        if  {
            return new Promise => {
                const img = new Image;
                img.onload = res;
                img.onerror = rej;
                img.src = `${REPORT_URL}?${qs}`;
            });
        }
    }
    // ③ Fetch keepalive
    try {
        await fetch(REPORT_URL, {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: payload,
            keepalive: true
        });
        return;
    } catch  { /* fallthrough */ }
    // ④ 本地持久化
    saveToLocal;
}

const RETRY_KEY = 'LOG_RETRY';
const BATCH_SIZE = 10;
const GAP_MS   = 300;
function saveToLocal {
    const arr = JSON.parse||'');
    arr.push;
    localStorage.setItem);
}
async function retryPending {
    let pending = JSON.parse||'');
    while  {
        const batch = pending.slice;
        try {
            await transport;
            pending.splice;
            localStorage.setItem);
            console.log;
        } catch{
            console.warn;
            break;   // 暂停循环，由下一次 online 再触发
        }
        await new Promise);
}
}
window.addEventListener;