必须用事件委托监听动态元素、sendbeacon可靠上报、上下文脱敏字段设计，三者缺一不可；否则采集数据无法精准还原用户操作现场。
前端行为日志不能靠“猜”，必须用事件委托 + sendBeacon + 上下文脱敏三件套，否则采集到的全是废数据。
怎么监听动态插入的按钮和表单而不漏事件
DOM 节点动态生成时，直接给元素绑 click 或 submit 会失效。监听 document 或 body 的事件委托是唯一稳定方案。
- 用
document.addEventListener('click', e => { if (e.target.matches('[data-log]')) { /* 记录 */ } })，比遍历所有按钮更轻量 - 表单提交必须监听
submit事件而非按钮click，否则用户按回车提交会完全丢失 -
change适合下拉、复选框等离散操作；input适合搜索框，但必须加防抖（如 300ms），否则每敲一个字都上报 - 绝对不要监听
mousemove或scroll—— 数据量爆炸、无业务价值、拖慢主线程
上报字段怎么设计才真正可查、可回溯
只记 “用户点了啥” 没用，排查时根本拼不出现场。5 个基础字段是底线：
-
timestamp：用performance.now()，不是Date.now()，毫秒精度对分析操作链路至关重要 -
page：取location.href，别用location.pathname，带参数的 URL 才能还原真实入口 -
elementId：优先读e.target.dataset.logId，其次e.target.id，最后 fallback 到e.target.name；避免用innerText（易变、含空格、多语言不稳） -
eventType：固定为'click'/'submit'/'change'等，别写成中文或自由文本 -
value：仅对input/select等有意义的控件采集，且必须过滤：if (e.target.type === 'password') return;
sendBeacon 发不出去？这些兼容性坑要提前踩
navigator.sendBeacon() 是目前最可靠的前端日志上报方式，但它有硬性限制，不处理好就静默失败。
- 后端必须支持接收
POSTbody（不是 query string），否则sendBeacon('/log', JSON.stringify(data))会被丢弃 - 如果服务端只认 GET 参数，改用
new Image().src = '/log?' + new URLSearchParams(data).toString()，兼容性更好 - 页面卸载前（如关闭标签页）调用
sendBeacon是安全的，但千万别在beforeunload里做序列化、计算或异步等待——浏览器只给约 50ms，超时直接终止 - 降级方案必须有：
fetch(..., { keepalive: true })作为备选，但要注意 Safari 对keepalive支持不稳定
本地缓存失败日志时最容易被忽略的边界
网络差时把日志存在 localStorage 很合理，但没人提过两个致命细节：
- 每条日志必须带时间戳和重试次数，否则旧日志可能无限重发（比如用户半年没打开页面，一启动就狂刷 50 条历史记录）
- 缓存上限不能只设“50 条”，得结合单条体积估算总大小；
JSON.stringify()后一条带上下文的日志常超 2KB，50 条就逼近localStorage5MB 上限，触发 QuotaExceededError - 写入前先用
try...catch包住，localStorage.setItem失败时降级为内存队列（只保最近 5 条），避免整个采集链路中断
行为日志的价值不在“有没有”，而在“能不能精准还原用户那一次点击前后的完整上下文”。字段设计、事件绑定时机、上报通道选择，三者缺一不可——少做一步，排查时就要多花十倍时间补数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
