Session Replay，可以译为会话回放、会话追踪，相关商业化软件的目的在于提供给用户在网站中记录和回放浏览者的会话的能力，用户体验团队、产品团队、营销团队往往会利用这些 Session Replay 产品提供的清晰的交互画面，进行一系列的数据分析，以便了解浏览者真实的使用体验并进行针对性的优化，这其中包括但不限于：
- 核心功能的交互路径
- 遇到的错误
- 一些困惑的使用交互
产品视图
结合G2商业化软件的搜索结果和G2评分排名，我们可以看到老牌劲旅 Dynatrace，以及专注于做会话分析的LogRocket、fullstory名列前茅，更多维度的比较和排名可以参考：https://www.g2.com/categories/session-replay?utf8=%E2%9C%93&order=g2_score
本文接下来将会从功能使用、隐私处理和问题三个方面，挑选 Dynatrace 和 LogRocket 进行产品进行调研和分析
Dynatrace
Dynatrace 作为 APM 领域的佼佼者，在可观测性方面的产品能力一直保持领先，单看 Session Replay 这一项功能，其可配置项几乎是同类产品中最多的，首先看看功能
功能
通过其控制台 Web 页签，创建一个 Web 类型的应用，利用 Agentless 的方式注入 JavaScript 的探针采集一些网页的基础数据
此时，我们可以清晰的看到一张当前网页各类分析的仪表盘，并提供了详细分析的入口，其中包含了
- 会话分析
- 性能分析（页面加载、用户交互性能分析）
- 用户行为分析（Top action、event）
- 错误分析
- 网站可用性分析
- 域名分析
- 页面访问分布
本文不做具体展开，后续会有专门的文章来讲解 Dynatrace 的 Web APM 功能，本文重点看会话分析相关功能
点击网页右上角的用户会话分析按钮，我们可以进入一个会话分类搜索的页面，这里我们看到可以通过各类过滤条件进行筛选，比如应用名、应用类型、浏览器类型、浏览器版本、地理位置等，下面就是根据过滤条件得到的结果，包含了此类型会话的一些基础信息（平均时长、会话数、平均访问情况等）
进入具体的页面能看到该类型会话的具体每一个会话列表，如果打开了 Session Replay 功能，则可以进入 Replay 页面进行查看
隐私处理
从上面的动图可以看到，回放时候，页面的绝大部分被 * 所替代，大多数类似的产品在设计功能的时候都需要考虑用户隐私，毕竟采用录屏的方式去获取浏览者的访问行为，很大程度上会带来用户隐私的挑战。在 Dynatrace 中，主要提供了以下几个功能：
- 设置录制开关
首先我们可以看到，Dynatrace 提供了一个开关来供用户进行可操作的 Session Replay 模式，打开这个模式的时候，Dynatrace 中的 Session replay 功能需要用户在代码中手动调用 enableSessionReplay 从而开始录制数据的采集，这样用户就可以根据一些页面url、特定访问路径，来灵活的控制什么时候进行页面数据的录制
- 录制数据的敏感信息屏蔽
另外可以看到，Dynatrace 提供了几个敏感数据屏蔽的等级，可以依据自身网页的特点，对录制数据的关键信息进行屏蔽，比如承载用户输入的 input 框这类敏感操作，就可以利用 Mask user input 这个等级进行处理。
问题
由于录制页面并不是传统的录屏技术，而是采用的浏览器增量快照的形式，具体的浏览器录制技术可以参考之前写的调研文章：浏览器录制技术，所以存在很多录制内容的限制，Dynatrace 也在文档中有所说明
我们也可以看到，利用DOM增量快照的形式，无法录制的环节主要就会集中在以下3个方面的内容
- 特殊的标签：媒体元素、Canvas、WebGL、浏览器控件等
- Iframe：跨越了Frame的方式，无法保证同源和 Iframe 内部的脚本
- 过期的资源或者需要权限访问的私人资源，包括但不限于图片资源、CSS样式资源、URL外链
LogRocket
功能
相对于 Dynatrace 非常庞大的功能组合，LogRocket 非常简单轻量，LogRocket几乎只专注于用户行为分析方面的研究和深入，提供访问日志、会话分析、错误分析、时序分析、路径分析、热力图等功能，整理而言都是为了用户体验、用户行为分析服务，我们可以看到功能分布也十分清晰
会话分析部分，也是包含了一些会话的基本内容（发生时间、时长、浏览器版本、IP等），也可在很明显的位置看到回放的按钮。
在会话回放的页面，我们可以看到 LogRocket 除了提供基本的回放窗口以外，还提供了类似 Chrome 的 Devtool 工具，从而帮助用户从性能、访问栈的维度，对此次回放进行更深层次的分析，另外回放的进度条上也标注了错误的点，toolbar 也和 Dynatrace 类似，提供了倍数、跳过无交互阶段、全屏、键盘事件等一系列的功能。
隐私处理
LogRocket 并未像 Dynatrace 一样提供了几个等级的隐私策略，而是利用几种规则来处理：
- 通过data-private标签来指定具体的 DOM 块进行屏蔽
- 通过两个配置 textSanitizer 和 inputSanitizer 来进行配置，对 text 和 input 单独处理，类似 mask-all 和mask-user-input 的屏蔽等级
- 通过data-public也可以屏蔽掉的元素显示置回来
问题
和 Dynatrace 一样，基于 DOM 增量快照录制的方式，几乎都有类似的问题，比如 CSS 资源不可访问、Shadow DOM等，更多的详情可以参考：https://docs.logrocket.com/docs/troubleshooting-sessions
写在最后
Session Replay 技术目前应用的领域主要还是集中于用户行为分析，错误定位等场景，还有类似 FullStory 的不仅仅有自身的方案，还提供了和集成的能力，比如监控领域很出名的 Sentry 就是采用的FullStory的集成方案来透出 Session Replay 的相关功能，而绝大部分商业化产品都是提供了一个大而全的数字化分析方案，Session Replay 只是其中很小的一环，需要结合日志数据、时序数据、全链路Trace、机器学习等方案进行全方面的分析。
