Session Replay 技术与产品调研

266 阅读14分钟

前言

目前公司内部已经搭建起日志采集、日志存储、日志分析、性能度量的系统工程,目前排查问题依赖于日志的上报和开发对产品的了解来定位问题,无法对用户现场进行复现,加速问题的解决。

此类产品分为以下三类:

  • Exception Trackers:Bugsnag, Sentry, Rollbar, TrackJS
  • Session Replay: Dynatrace, Inspectlet, FullStory, Jaco, Smartlook
  • Application Performance Monitoring

我们重点关注 Session Replay 领域的解决方案。

目前业内比较成熟的用户行为记录方案则是 Session Replay 技术体系,在用户交互过程中记录用户行为,然后通过 Replay 框架将用户行为日志重现为页面现成视频,配合抓取用户的网络、cpu、store、pageSpeed等信息配合问题的排查过程。这也是我们希望集成进来的核心功能,既能对用户行为进行记录辅助问题排查,也能对用户行为进行追踪,做深入的用户行为分析。

接下来将从两个维度逐步对 Session Replay 技术和产品进行深度调研。

  • 分析业内成熟的 SaaS Session Replay 商业化产品,对比功能优劣,并且提取符合需求的功能集合。
  • 基于商业化产品的功能集合,调研不同开源框架下自研产品的实现技术难度和人力成本。

Session Replay 概览

回话回放(Session Replay)是一种在Web和移动端应用中录制用户操作行为的技术,通过在客户端应用中采集和上报用户行为数据,服务端通过将用户回话期内的行为数据进行聚合和分析,最终以类视频播放的形式重新复现了用户行为现场。

采集过程

  • MutationObserver API 监听用户事件
  • XHR 和 fetch APIs 的重载,监听网络
  • Performance 日志收集
  • Console 和 应用状态收集(Redux action/state)
    传输过程
  • 工作进程数据压缩、二进制封装
  • 对数据体积敏感、丢弃低优先级的大数据包
  • 独立域名上传
    分析过程
  • 日志重现成视频回放
  • 前后端日志关联
  • 性能分析
  • 用户行为-漏斗分析
  • 数据多维度检索
  • 实时视频
  • 数据二次加工

因此 session replay 技术主要应用于

  • 前端 APM 治理
  • 用户行为分析。

业内《G2最优会话回放排名》针对各个厂商的用户满意度进行了排名,前12名的信息如下:

高居榜首的 Glassbox 主要功能有用户旅程、会话回放、性能分析、产品分析、交互热点、漏斗分析、错误分析等核心功能,可以作为平台的精品参考。

本文选取了排名比较靠前的 LogRocket、FullStory、Dynatrace、DataLog进行精品调研。

竞品分析

LogRocket

LogRocket 是 session replay 领域的领跑者,其功能涉及录制回放、数据分析、性能数据分析、可视化交互。

  • 会话视频回放-mobile端和web端
  • 支持开发套件-network trace、console trace、application state trace(Redux、Vuex、Mobx)、browser store、pageSpeed、in-depth debugging(sourcemap)等。
  • 支持检索-用户识别过滤(鉴权状态)、会话元数据过滤、会话活动过滤、用户过滤、性能过滤,其中对自定义事件有良好的schema设计,因此用户行为分析比较灵活。
  • 实时共享-延迟小于10s
支持服务器端渲染
// you can import these packages anywhere
const LogRocket = require('logrocket');
const setupLogRocketReact = require('logrocket-react');

// only initialize when in the browser
if (typeof window !== 'undefined') {
  LogRocket.init('app/id');
  // plugins should also only be initialized when in the browser
  setupLogRocketReact(LogRocket);
}
  • 无性能压力-8k js 包、从主进程转移大部份工作到工作进程、对于数据量大的请求、console、redux state及时进行暂停、使用二进制传输数据(优于json,使用工作进程计算)
  • 漏斗分析-数据检索、用户id追踪、行为标签

数据安全性

默认对用户敏感数据进行脱敏、也支持一定程度的独立部署和数据兼容。

工程侵入性

Web端和mobile端均支持,也支持React、Redux、Vue.js 等应用的内部状态同步,也提供 IOS、Android、RN SDK,代码侵入性小。

import LogRocket from 'logrocket';
LogRocket.init('app/id');

性能/瓶颈分析

从产品体验来看,LogRocket确实行业内的标杆,几乎覆盖了所有业务场景,对应用的性能影响也不大。

官网地址:
logrocket.com/

DataDog

www.datadoghq.com/product/rea…
IT监控领域老牌产品,其功能涵盖日志、APM治理、数据行为分析,其前端监控模块提供session replay 特性;

相对于 LogRocket 新的功能:

  • 用户行为热力图

总结

DataLog的功能丰富更高,也具有数据分析、脱敏等功能,但是其 session replay 功能专业度比不上 LogRocket,页面交互性比较差,也不支持mobile端。
imgix.datadoghq.com/video/produ…

dynatrace

Dynatrace 是 APM 领域的头部厂商,提供了一整套的涉及应用监控、运维、云服务的应用SaaS服务。其中涉及到前端监控有三个模块:

  • Observer and explore
  • Applications & Microsservices
  • Digitial Experience

第一部分涉及前端监控在下面用红框标出来,主流的前端数据都有支持。

日志检索页面

问题治理页面,可以自动帮助客户重点关注应用的核心问题。

第二部分主要是针对第一部分功能的延伸,评价衡量性能的影响因素,明确影响性能的用户行为,提供指标监控预警的能力。


第三部分主要是对第二部分的细化,细分为Mobile、Web、SessionReplay、Query user sessions等模块,增加了各自领域的特性指标分析。
SessionReplay 采用的是主流的视频模拟用户行为的方式,同时支持网络日志、错误日志、数据脱敏。和其他服务商提供的服务基本一致。

数据安全性

默认对用户敏感数据进行脱敏,数据存储依赖云。

工程侵入性

服务器需要部署 OneAgent,wen端插入 RUM JavaScript 脚本,UI是绑定在官网上,工程侵入性比较大。

性能/瓶颈分析

目前覆盖web、mobile、后端的全流程,对于前端的性能压力官方没有做重点介绍,其性能中规中矩。

官网地址:
www.dynatrace.com/platform/se…

FullStory

整体体验下来,FullStory 更加定位为用户全流程的行为分析和性能指标度量的数字产品用户体检分析产品,功能比较精简,session replay是其核心功能。
FullStory 可以通过机器学习将 history router 的路由进行分组将同一个页面归属到一个页面组,同时可以将用户按照时间、用户属性、设备、自定义事件进行分组,进行漏斗分析、页面流转分析。

FullStory 有个新特性叫做 Jourerys,将设置用户形成的起点、终点、中间动作,因此对用户进行分组,这也是 FullStory 用户行为分析的基础手段。

SessionReplay 功能,会同步展示用户行为热力图。

工程侵入性

日志上报只需在页面head加入下面的代码片段,同时在代码中引入npm i @fullstory/browser --save

数据安全性

支持比较细致的隐私控制,可以调整截取的氛围、GDPR数据脱敏、增加蒙层控制。

支持跨端

支持 Web、Android、iOS、RN

官网地址:
Session Replay | FullStory Digital Experience Intelligence

开源框架自研分析

rrweb

rrweb 是前端自治的开源组件,是由三部分组成组成 rrweb-snapshot、rrweb、rrweb-player,不涉及后台的数据存储和部署,只提供了基于前端的会话录制和回放的功能。功能集合如下:

  • 基于事件的增量更新、基于快照的页面构建。
  • 实时回放
  • 支持回放视频的UI

数据安全性

目前只支持基础性的前端套件,数据安全行需要自行设计。

工程侵入性

rrweb 支持 npm 依赖集成,具有简易UI播放。

rrweb.record({
    emit(event) {
        // store the event in any way you like
    },
});
new rrwebPlayer({
    target: document.body, // customizable root element
    props: {
        events,
    },
 });

性能/瓶颈分析

基于事件的增量更新+快照,意味着其数据体不会小,且不做gzip压缩,对前端压力比较大。
rrweb不涉及后台因此后台实现没有成熟的实践,其性能和效果难以保证。
不支持移动端、离线存储、日志检索、行为分析,适合小规模的产品接入。

OpenReplay

最近才开源的完整 session replay 解决方案,下面是产品截图。


openReplay是对标 FullStory、LogRocket 的开源替代产品,主打的是面向开发者的会话回放,因此其对于开发相对友好。其功能集合如下:

  • 会话视频回放
  • 支持开发套件-network trace、console trace、application state trace(Redux、Vuex、Mobx)、browser store、pageSpeed 等。
  • 实时共享-支持 WebRTC 实时音频AI
  • 支持检索-可以对用户行为、数据、会话属性、技术事件进行检索,目前来看功能一般,定制性较差
  • 漏斗分析-数据检索、用户id追踪、行为标签
  • 前后端日志回放-支持 Sentry、Elastic的前后日志打通,待试用后评价。

数据安全性

目前来看支持通用公有云 AWS、Google Cloud、Azure、Kubernets的部署,私有化或者独立部署官方并没有详细的支持,一旦启动独立部署来保证用户数据安全,其部署后的服务会面临部分功能无法支持的尴尬情况。

工程侵入性

OpenReplay 有 frontend 的工程支持会话回放的前端UI可以 iframe 嵌入到平台。
后台部署支持 Vagrant 和 VirtualBox 的部署。
前端 OpenReplay Tracker 支持 npm 依赖集成。

import Tracker from '@openreplay/tracker'
const tracker = new Tracker({projectKey: YOUR_PROJECT_KEY,})
tracker
    .start({
        userID: 'Mr.Smith',
        metadata: {
            version: '3.5.0',
            balance: '10M',
            role: 'admin',
        },
   })
.then((startedSession) => {
    if (startedSession.success) {
        console.log(startedSession)
    }
 })

性能/瓶颈分析

  • 目前来看是在前端做gzip压缩,数据本身官方并没有做出数据算法上的优化。
  • 数据库有要求不支持MarialDB/MySQL,支持PostreSQL。
  • 自定义数据不支持分组、数据脱敏。
  • 不支持Canvas。
  • 不支持离线存储、sentry私有化、移动端SDK。

开源github:
github.com/openreplay/…
官网:
docs.openreplay.com/

总结

openreplay 作为一个开源项目,其设计思路是按照业内比较主流的思想来设计的,基础的框架结构比较完整,可以作为逆向工程来研究。

核心功能集合P0

  • 数据脱敏

    • 客户端脱敏-支持在客户端进行特定DOM、标签、正则、cookie+表单等类型维度的数据屏蔽
    • 回放脱敏-在回放框架内进行数据数据脱敏,管理员或者开发查看未经脱敏原数据
  • 日志多端上报,关注下bytedance

    • Android
    • IOS
    • web
    • RN
  • 会话回放

    • 页面dom变动-DOM相关的展示和消失,
    • 用户行为-click、mouse、scroll、选中
    • 网络-网络日志
    • console面板日志查询
    • storage-监控local storage日志、session-storage、前端框架的storage(可选)
  • 日志查询

    • Userid查询

    • 用户事件查询-点击、DOM类型、跳转、交互(前端交互控件)

    • 错误类型检索-网络、JS错误、接口、渲染错误(可选)

次级功能集合P1

  • 会话回放

    • 用户操作路径、页面跳转路径、用户点击热区
  • 漏斗分析

    • 基于用户操作路径、页面跳转路径、用户画像分类,进行一定程度的错误分析,例如可以来判断是否为页面质量差的模块,推荐重点整改。
  • 实时视频录制-session replay测试的核心功能

  • 离线存储和发送

    • 离开页面也要能发送到后台,浏览器有api,原生需要客户端实现

衍生的功能集合P2

能够有效提升错误处理效率的功能集合。

  • 接入后台管理系统-用来管理错误的处理情况,处理后二次出现预警,监控报警(可以更加定制化)
  • 错误智能分析-自动分析以往的历史,自动推荐修复方案

数据脱敏技术方案

本方案希望将日志脱敏的方案可以集成到各个系统中去,因此调研分为两个调研方向:

  • Session Replay 回放数据脱敏-上报端/展示端
  • 日志上报数据脱敏-日志处理中间层

Session replay 数据脱敏常规步骤实现:

  1. 确定哪些字段需要脱敏,例如手机号、邮箱、姓名等。
  2. 制定脱敏策略,常用的脱敏方式有:
  3. 删除:直接将字段删除,不保留任何信息。
  4. 掩码:保留部分信息,例如只显示手机号的前三位和后四位,中间的数字用 * 号代替。
  5. 加密:对字段进行加密,只有具备解密权限的人才能看到原始信息。
  6. 替换:用虚拟的信息替换真实信息,例如采用随机生成的名字代替真实姓名。
  7. 实施脱敏操作,对需要脱敏的字段进行处理,并保存已脱敏的数据。
    需要注意的是,Session replay 数据脱敏需要遵守相关的法律法规和隐私政策要求,确保脱敏后的数据仍然能够满足业务需求。

在上报端提供脱敏上报和数据加密上报,后台加密的两种选择,支持是否可以全量上报用户信息。
上报快照的时候要对常规的页面敏感数据进行掩码。

  • 表单和标签
  • 用户输入和标签
  • 非背景的图片
  • a连接
  • 段落、标签和其他特殊文本块
    上报时支持更细粒度的元素录制控制,支持白名单、黑名单的节点控制,不在录制范围的元素统一掩码。
    日志上报给定ignoreElement的参数,进行元素过滤,不抓取部分元素;用户行为删除,可以对部分用户行为或者页面访问可以跳过录制。

其他脱敏方式

日志处理中间层的脱敏是指通过一个通用的服务中间层,对外漏数据进行统一的标准化的数据脱敏,该套件可以被集成到各个系统中去。
目前市面上有很多数据库日志脱敏产品,下面列举几款比较常见的:

  1. G-Scout:一款基于深度学习和自然语言处理技术的数据脱敏工具,可以对各类数据库中的数据进行实时脱敏。
  2. DMask:支持MySQL、Oracle、SQL Server等多种常见数据库的日志脱敏工具,采用屏蔽替换和加密算法,保护用户数据安全。
  3. SuningDBMasks:一个大型分布式数据库管理平台,具备数据脱敏、数据分区、数据检索等多种功能,支持动态授权和权限控制。
  4. UpSafe:支持多种数据库和文件格式的备份和还原工具,可以对备份数据进行加密和压缩处理,确保数据安全可靠。
  5. 阿里云RDS数据脱敏:阿里云RDS提供了数据脱敏的功能,可以通过管理控制台或API进行配置和操作,支持多种脱敏方法和参数自定义。
  6. 华为云数据脱敏GaussDB(DWS)提供列级别的数据脱敏(Dynamic Data Masking)功能。针对某些敏感信息(如身份证号、手机号、银行卡号等),通过应用脱敏函数进行原始数据的变形改写,实现敏感隐私数据的可靠保护,从而增强产品在数据安全和隐私保护方面的能力。

结论

根据产品分析,我们主要关注一下衡量指标。

因此基于这些指标对所有调研内的产品做个对比分析。

Session Replay 技术目前应用的领域主要还是集中于用户行为分析,错误定位等场景,还有类似 FullStory 的不仅仅有自身的方案,还提供了和集成的能力,比如监控领域很出名的 Sentry 就是采用的FullStory的集成方案来透出。Session Replay 的相关功能,而绝大部分商业化产品都是提供了一个大而全的数字化分析方案,Session Replay 只是其中很小的一环,需要结合日志数据、时序数据、全链路Trace、机器学习等方案进行全方面的分析。