前端可观测正在越过“有没有报错”这条边界。页面没有异常日志，不代表用户体验正常：按钮可能被遮挡，输入过程中可能频繁卡顿，用户也可能在关键步骤来回点击却无法继续。阿里云发布的前端可观测方案把关注点推进到用户行为层，通过 DOM 增量追踪支撑会话回放，并结合热力图帮助开发者理解页面上真实发生了什么。
为什么传统指标解释不了用户行为
错误率、白屏率、接口耗时和 Core Web Vitals 适合回答“系统是否异常”，但很难单独回答以下问题：
- 用户为什么没有完成支付？
- 某个按钮是否出现了视觉遮挡或点击无响应？
- 页面卡顿发生时，用户正在输入、滚动还是切换选项？
- 转化率下降究竟集中在哪个页面区域？
会话回放补充的是行为上下文。系统记录页面初始状态，以及之后发生的 DOM 变化、输入、点击、滚动和视口变化，再按照时间顺序重建操作过程。热力图则聚合多次会话中的点击或移动位置，将单个用户的问题提升为页面级趋势。
这两种能力并不替代指标监控。更合理的组合是：先用指标发现异常时间段或受影响版本，再通过会话回放查看具体过程，最后用热力图判断问题是个例还是普遍模式。
DOM 增量追踪为什么比连续截图更适合回放
持续录制视频或频繁截图实现直观，但会产生明显的网络、存储和隐私成本。DOM 增量追踪采用另一条路径：
- 首次进入页面时记录一份可序列化的初始结构。
- 使用
MutationObserver监听节点增加、删除和属性变化。 - 单独采集点击、输入、滚动和视口尺寸等交互事件。
- 为事件附加相对时间戳，并按批次上传。
- 回放端加载初始结构，再按时间顺序应用增量事件。
关键难点不只是“监听到变化”，而是让节点在采集端和回放端拥有稳定身份。真实系统通常需要维护节点 ID 映射，而不能长期依赖 CSS 选择器。动态列表、Shadow DOM、iframe、Canvas 以及虚拟滚动组件也需要专门处理。
增量事件应当采用有界队列并批量发送。如果每次 DOM 变化都立即请求后端，监控代码本身就可能制造性能问题。上传失败时也要限制重试次数，不能让观测流量争抢业务请求资源。
可以这样实践：采集 DOM 变化和点击热力数据
下面是一个可以直接保存为 HTML 并在浏览器中打开的最小示例。它演示了 MutationObserver、点击坐标归一化、事件批处理和敏感输入脱敏。示例默认把批次打印到控制台；接入服务时，把 UPLOAD_URL 改成自己的采集地址。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DOM 增量追踪示例</title>
</head>
<body>
<button id="add">添加一行</button>
<input id="email" type="email" placeholder="敏感内容不会被记录">
<ul id="list"></ul>
<script>
const UPLOAD_URL = ""; // 改为自己的采集接口，例如 /observability/events
const sessionId = crypto.randomUUID();
const startedAt = performance.now();
let queue = [];
function selectorOf(element) {
if (!(element instanceof Element)) return null;
if (element.id) return `#${CSS.escape(element.id)}`;
const name = element.tagName.toLowerCase();
const parent = element.parentElement;
if (!parent) return name;
const peers = [...parent.children].filter(node => node.tagName === element.tagName);
return `${selectorOf(parent)} > ${name}:nth-of-type(${peers.indexOf(element) + 1})`;
}
function record(type, data) {
queue.push({
sessionId,
type,
elapsedMs: Math.round(performance.now() - startedAt),
page: location.pathname,
data
});
if (queue.length >= 20) flush();
}
async function flush() {
if (queue.length === 0) return;
const batch = queue.splice(0, queue.length);
if (!UPLOAD_URL) {
console.table(batch);
return;
}
try {
await fetch(UPLOAD_URL, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ events: batch }),
keepalive: true
});
} catch (error) {
console.warn("observability upload failed", error);
}
}
const observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
record("dom-mutation", {
target: selectorOf(mutation.target),
kind: mutation.type,
attribute: mutation.attributeName || null,
addedNodes: mutation.addedNodes.length,
removedNodes: mutation.removedNodes.length
});
}
});
observer.observe(document.documentElement, {
subtree: true,
childList: true,
attributes: true
});
document.addEventListener("click", event => {
const target = event.target instanceof Element ? event.target : null;
record("click", {
target: selectorOf(target),
xRatio: Number((event.clientX / window.innerWidth).toFixed(4)),
yRatio: Number((event.clientY / window.innerHeight).toFixed(4)),
scrollY: Math.round(window.scrollY)
});
}, { capture: true });
document.addEventListener("input", event => {
const target = event.target;
if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return;
record("input", {
target: selectorOf(target),
value: "***",
length: target.value.length
});
}, { capture: true });
setInterval(flush, 5000);
window.addEventListener("pagehide", flush);
document.querySelector("#add").addEventListener("click", () => {
const item = document.createElement("li");
item.textContent = `新增节点 ${Date.now()}`;
document.querySelector("#list").appendChild(item);
});
</script>
</body>
</html>
这个示例只用于解释采集链路，并不是完整的生产级回放实现。CSS 选择器在 DOM 重排后可能失效，示例也没有序列化初始 DOM、样式表和资源状态。生产系统应为节点分配稳定 ID，并在回放环境中隔离脚本执行，避免重放页面中的业务代码或第三方脚本。
热力图需要先解决坐标语义
直接保存 clientX 和 clientY 很难跨屏幕聚合。桌面端的 800 像素位置，与移动端的 800 像素位置并不代表同一区域。上面的示例记录视口归一化坐标：
xRatio = clientX / viewportWidth
yRatio = clientY / viewportHeight
实际落地还要同时保存页面版本、视口尺寸、滚动偏移和目标元素标识。分析时可以按路由、设备类别和页面版本分组，避免把布局不同的页面强行叠在一起。
热力图也不能只显示“哪里点击多”。高点击区域可能是主按钮运行良好，也可能是用户反复点击一个没有响应的控件。可以将点击数据与接口失败、长任务、路由跳转以及转化事件关联，区分正常高频操作和疑似“愤怒点击”。
上线前必须划清隐私和性能边界
会话回放记录的信息比普通性能指标更敏感。密码、邮箱、手机号、聊天内容、支付信息和身份标识都不应以明文进入采集链路。仅在上传前做脱敏还不够，最好在事件生成阶段就丢弃敏感值，并提供元素级屏蔽规则，例如 data-observe-mask 和 data-observe-ignore。
采用这类能力时，可以按以下清单推进：
- 默认屏蔽所有输入值，只对经过审核的字段开放采集。
- 对不同页面设置采样率，支付和身份页面应采用更严格策略。
- 限制单会话事件数、批次大小、上传频率和重试次数。
- 将采集 SDK 的 CPU、内存和网络消耗纳入性能预算。
- 为数据设置访问控制、审计记录和明确的保留期限。
- 按发布版本标记会话，便于对比变更前后的行为差异。
- 用错误指标定位范围，用回放还原过程，用热力图验证普遍性。
DOM 增量追踪让前端可观测从结果指标走向过程证据，但它并不是无成本的全量录像。真正可用的方案需要在还原精度、运行开销、存储成本和隐私保护之间做明确取舍。建议从关键漏斗页面的小比例采样开始，先验证它是否能缩短问题定位时间，再逐步扩展覆盖面。