hugh 的个人博客

Everyday is a new day

comment类型的节点引发的还原布局错误 - 前端监控之采坑篇

大坑描述

被监控系统使用了knockout框架, 大量由注释节点支持的业务逻辑代码,在服务器端录像还原时,发现部分节点布局上下颠倒。

问题分析

收集时注释节点作为一个合法的节点被收集并发送到服务器端。
还原时,由于注释节点无实际含义,所以未做还原实现。
前端收集的mutationRecord里有prevnext节点信息,还原时会根据该信息对当前的节点插入位置进行定位,注释节点由于未被插入到还原文档中, 导致prevnext node无法正确定位导致

comment节点信息如下

问题解决

对comment节点进行正确还原即可

// 创建comment节点
                let comment = null;
                if(node.id) {
                    comment = findTarget(node, getId(parent), iframe)
                    if(comment) {
                        comment.textContent = nodeInfo.textContent
                        return;
                    }
                }
                comment = _document.createComment(nodeInfo.textContent)
                if(!comment.__mr__){
                    comment.__mr__ = {id: node.id}
                }
                parent.appendChild(comment);
// comment节点是没有子级节点的,所以无需对子级进行循环处理


标题:comment类型的节点引发的还原布局错误 - 前端监控之采坑篇
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/12/03/1575343684703.html

23 浏览