[发明专利]一种基于录屏回放的web前端监控方法与系统

权利要求书

1.一种基于录屏回放的web前端监控方法，其特征在于，所述监控方法通过对前端进行录屏获得页面信息，将出现问题前的一段时间内的页面信息发送给后台，后台将页面信息还原并以视频方式播放。

2.如权利要求1所述的监控方法，其特征在于，包括：快照生成步骤、每隔一段时间将页面的DOM存储并生成快照；数据转化步骤、将前端页面操作信息进行记录，与页面快照一起，转化成带有时间戳的定量数据并记录；问题反馈步骤、当页面出现问题时，上传出现问题前的一段时间内的所述定量数据到后台；还原播放步骤、在后台将得到的数据以时间戳的形式还原成视频并播放。

3.如权利要求2所述的监控方法，其特征在于，所述快照生成步骤包括：将页面的DOM从顶层到底层，依次遍历，存储为树形结构的对象，并且进行如下操作：

1)把样式转成内联形式；

2)script标签转换成noscript，防止被执行；

3)href、SRC、CSS中的相对路径设置为绝对路径；

4)给每个Node节点提供唯一的ID。

4.如权利要求2所述的监控方法，其特征在于，所述还原播放步骤包括：根据所述问题反馈步骤反馈的定量数据，创建DOM和对应的CSS，放在iframe里进行播放。

5.如权利要求4所述的监控方法，其特征在于，所述放在iframe里进行播放包括：根据时间戳，逐秒还原DOM变化，而且能利用进度条和倍速控件，通过数据里的时间戳调整此时要看的帧和速度。

6.一种基于录屏回放的web前端监控系统，其特征在于，所述监控系统通过对前端进行录屏获得页面信息，将出现问题前的一段时间内的页面信息发送给后台，后台将页面信息还原并以视频方式播放。

7.如权利要求6所述的监控系统，其特征在于，包括：快照生成模块，用以每隔一段时间将页面的DOM存储并生成快照；数据转化模块，用以将前端页面操作信息进行记录，与页面快照一起，转化成带有时间戳的定量数据并记录；问题反馈模块，用以当页面出现问题时，上传出现问题前的一段时间内的所述定量数据到后台；还原播放模块，用以在后台将得到的数据以时间戳的形式还原成视频并播放。

8.如权利要求7所述的监控系统，其特征在于，所述快照生成模块用于将页面的Dom从顶层到底层，依次遍历，存储为树形结构的对象，并且进行如下操作：

1)把样式转成内联形式；

2)script标签转换成noscript，防止被执行；

3)href、SRC、CSS中的相对路径设置为绝对路径；

4)给每个Node节点提供唯一的ID。

9.如权利要求7所述的监控方法，其特征在于，所述还原播放模块用于根据所述问题反馈步骤反馈的定量数据，创建DOM和对应的CSS，放在iframe里进行播放。

10.如权利要求9所述的监控方法，其特征在于，所述还原播放模块放在iframe里进行播放包括：根据时间戳，逐秒还原DOM变化，而且能利用进度条和倍速控件，通过数据里的时间戳调整此时要看的帧和速度。