可在LocalStorage中维护错误日志队列，以数组序列化存储并配合自动重试机制，在网络恢复时批量上报且清理；每条日志含message、stack、url、timestamp、ua及可选id字段，通过try-catch保障JSON解析健壮性，并限制队列长度与日志时效以防止溢出。
可以在 LocalStorage 中维护一个错误日志队列，用数组序列化存储，配合自动重试机制，在网络恢复时批量上报并清理。
设计错误日志结构
每条日志应包含必要上下文，便于后续排查：
-
message：错误提示（如
Cannot read property 'x' of undefined） -
stack：堆栈信息（
error.stack） - url：当前页面 URL
-
timestamp：毫秒级时间戳（
Date.now()） -
ua：用户代理（
navigator.userAgent） - id：唯一标识（可选，用于去重或幂等控制）
写入与读取队列
使用 JSON.stringify 和 JSON.parse 序列化/反序列化数组。为避免解析失败，建议加 try-catch：
// 写入一条错误
function pushErrorLog(log) {
const queue = getErrorQueue();
queue.push(log);
localStorage.setItem('errorLogQueue', JSON.stringify(queue));
}
// 读取全部日志
function getErrorQueue() {
const raw = localStorage.getItem('errorLogQueue');
try {
return raw ? JSON.parse(raw) : [];
} catch (e) {
return [];
}
}
自动上报与清理机制
监听 online 事件触发上报；也可定时轮询（如每 30 秒检查一次），避免依赖事件丢失：
立即学习“Java免费学习笔记（深入）”；
- 上报前限制单次数量（如最多 20 条），防止请求过大
- 使用
fetch并设置keepalive: true（适用于页面卸载前） - 上报成功后，从队列中
splice已发送项，并更新 LocalStorage - 若上报失败（网络仍断、服务返回 5xx），保留原日志，下次再试
增强健壮性的小技巧
LocalStorage 容量有限（通常 5MB），需防溢出：
- 队列长度超过阈值（如 100 条）时，剔除最旧的日志（
queue.shift()） - 上报前过滤掉过期日志（如 >7 天的 timestamp 可丢弃）
- 给关键字段加非空校验，避免
null或undefined导致序列化失败 - 可增加版本字段，升级格式时兼容旧数据
