前端监控建设之《用户行为录制》

背景

1. 当我们收到系统异常通知的时候，普通的监控系统只能告诉你系统出现了错误，但是不能给出错误的复现路径，对于稳定复现的错误而言还好，但对于偶发错误或复现路径隐藏较深的场景我们就较难去解决问题。
2. 当我们想要分析用户的系统行为，如果是常见埋点只能分析一些简单的行为例如点击，对于用户完整的行为无法跟踪。

所以如果我们可以获取到用户在一定时间内的所有操作行为，也就是录制用户行为，包括整个会话中的每一个点击、滑动、输入等行为，同时支持回放录制的操作行为，完整且真实地重现用户行为以帮助我们回溯或分析某些使用场景。对于我们排查问题的效率有很大提升。

最终期望结果

1. 必须做到用户对录屏无感知
2. 尽可能少的影响原本项目的性能，同时需要有一个开关可以全局控制是否开启录屏
3. 可以关联录屏时间内的其他相关日志，例如sentry等
4. 可以区分上报类型，例如错误上报/用户行为上报等

方案调研

一：视频录制

录制用户行为最容易想到的就是将屏幕操作通过视频的方式录制下来，目前浏览器本身已经提供了一套基于音视轨的实时数据流传输方案 WebRTC（Web Real-Time Communications）。可以通过调用其原生的API就能实现录屏。

原理分析

在我们的录屏使用场景主要关注以下几个 API：

• getDisplayMedia() - 提示用户给予使用媒体输入的许可从而获取屏幕的流；
• MediaRecorder() - 生成对指定的媒体流进行录制的 MediaRecorder 对象；