data-log 是跨环境日志上报最轻量载体，以合法JSON存于HTML属性中，通过MutationObserver监听自动上报，需规避敏感信息、长度限制与注入风险，并配合环境判断和采样控制。
data-log 属性是跨环境日志上报最轻量的载体
浏览器端、WebView、小程序 WebView 容器、甚至某些 SSR 渲染后保留属性的场景，data-log 都能原样透出且不干扰渲染。它不是为日志设计的标准属性，但正因“无语义”，反而规避了浏览器策略限制（比如 src 或 href 的预加载/跳转副作用）。
实际使用时，把结构化日志字段序列化进该属性即可：
<button data-log='{"e":"click","m":"submit_btn","p":{"form_id":"f123","step":2}}'>提交</button>
-
data-log值必须是合法 JSON 字符串（双引号、无注释、无尾逗号），否则 JSJSON.parse()会报SyntaxError - 避免在服务端模板中拼接用户输入到
data-log，防止 JSON 注入（如"p":{"x":"<script>..."}</script>） - 若字段值含单引号或换行，服务端需做
JSON.stringify()而非简单字符串替换
用 MutationObserver 监听 data-log 元素并自动上报
手动给每个元素绑定事件太重，且无法覆盖动态插入的节点。用 MutationObserver 监听 childList 和 subtree，捕获带 data-log 的新元素，再绑定一次点击/曝光等行为更可靠。
关键点在于：只监听「新增」，不重复处理已上报过的元素（用 Element.dataset.logId 或 WeakMap 标记）：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
const logCache = new WeakMap();<br>new MutationObserver(mutations => {<br> mutations.forEach(m => {<br> m.addedNodes.forEach(node => {<br> if (node.nodeType === 1 && node.dataset.log) {<br> if (!logCache.has(node)) {<br> node.addEventListener('click', reportLog);<br> logCache.set(node, true);<br> }<br> }<br> });<br> });<br>).observe(document.body, { childList: true, subtree: true });
上报前必须做环境判断和采样控制
开发环境打点不发请求、生产环境默认 1% 采样、错误日志 100% 上报——这些逻辑不能靠后端过滤，得在前端裁剪，否则浪费用户带宽且污染原始数据。
- 通过
location.hostname或全局ENV变量判断环境，localhost和*.dev域名直接 return - 对非错误类日志，用
Math.random() 控制采样率；错误类（如 <code>e: "error"）跳过采样 - 避免在
reportLog里直接调fetch()，应走统一日志队列（防并发阻塞、支持失败重试）
data-log 不适合存敏感字段或大体积上下文
HTML 属性长度无强制上限，但实际中超过 4KB 容易触发 iOS Safari 的 DOM 序列化截断，部分安卓 WebView 也会静默丢弃超长 data-* 值。更重要的是，所有 data-log 内容都暴露在 DevTools 的 Elements 面板里，可被任意脚本读取。
- 禁止放入
user_id、token、手机号等 PII 信息，可用服务端映射的匿名 ID 替代 - 页面级上下文（如当前 URL 参数、用户权限）不要重复塞进每个按钮的
data-log，改由上报函数统一注入 - 若需记录长文本（如错误堆栈），优先用
console.error()+window.onerror捕获，而非塞进 HTML 属性
真正难的不是怎么塞数据，而是怎么让每个 data-log 值在不同环境里既可解析又不越权、既可追溯又不膨胀——边界感比技术实现更关键。
