网页表单监控

上周三凌晨两点，网页我盯着浏览器控制台里一条不断重复的表单报错：表单提交事件在Safari 16.4上压根没触发。用户点了“确认支付”，监控页面纹丝不动。网页这不是表单第一次了——网页表单监控这件事，远比大多数人想象的监控要脆弱。

很多人以为表单监控就是网页加个onsubmit回调，记录一下提交成功或失败。表单真干过这活的监控人知道，那只是网页冰山露出水面的尖角。一个表单从渲染到数据抵达后端，表单中间至少经过七道关卡：DOM挂载、监控字段初始化、网页用户输入、表单前端校验、监控序列化、网络请求、服务端响应。任何一环断掉，用户看到的就是“没反应”。而“没反应”是产品经理最怕的三个字。

我见过一个电商站的注册表单，Chrome上一切正常，到了Firefox就丢字段。排查半天，发现是某个第三方库在input事件里做了条件判断，而Firefox对event.target的处理顺序不同。这种问题靠人工点击测试根本覆盖不全。于是监控方案必须细到能捕获每个字段的change、blur、input事件，还要记录事件触发时字段的实际值。

但光记录事件不够。用户填了十个字段，只改了其中两个，你得知道是哪两个。更麻烦的是动态表单——用户点“添加地址”后新增的那组输入框，它们的ID是随机生成的。监控脚本如果写死选择器，新增字段就完全失明。我的做法是用MutationObserver监听表单容器的子节点变化，一旦有新字段插入，立刻给它挂上监听器。这比定时轮询省性能，也比事件委托更精准。

网络层是另一个重灾区。fetch和XMLHttpRequest的失败模式完全不同。前者可能因为AbortController被取消，后者可能卡在readyState 2。我习惯在表单提交时生成一个traceId，塞进请求头，同时在前端记录这个ID对应的所有字段快照。后端收到请求后，无论成功失败都回传这个ID。两边一对，就能还原出“用户填了什么→发了什么→服务端收到什么”的完整链路。有一次发现某个字段在序列化时被encodeURIComponent多编码了一次，导致后端解析出乱码。没有这个链路，根本定位不到。

还有一类问题藏在浏览器扩展里。某金融客户的表单在干净Chrome里正常，装了密码管理器就提交失败。原因是扩展注入的脚本修改了form.submit方法。监控脚本得用Object.defineProperty劫持原生方法，同时保留原始引用，否则连自己都会被绕过去。这听起来像黑客手段，但确实是生产环境里的必要防御。

数据上报本身也要监控。如果监控脚本自己挂了，你连“监控挂了”这件事都不知道。所以我在页面里埋了一个心跳检测：每30秒往一个独立端点发个空请求，如果连续三次没收到，就触发告警。这个端点跟业务接口完全隔离，避免被业务故障连带。

最后说个反直觉的观察：表单监控最大的噪音来源不是技术故障，而是用户行为。有人填到一半关掉页面，有人反复切换输入法，有人用自动填充插件瞬间填完所有字段。这些都会产生大量“异常”事件。我的过滤策略很简单——只关心那些最终触发了提交动作的会话。没提交的，数据再丰富也是垃圾。

凌晨那件事的结论是Safari对submit事件的冒泡处理有个已知bug。解决方案是在form元素上直接绑定监听，而不是在document上委托。改完上线，报错消失。但我知道，下一个浏览器版本、下一个第三方库更新，又会带来新的裂缝。网页表单监控没有终点，只有持续不断的补丁。