@tuia/rip

用户行为记录、回放

名字由来

时间大师（Rip Hunter）是美国 DC 漫画旗下超级英雄，初次登场于《Showcase》第 20 期（1959 年 5 月）。本名理查德·“瑞普”·亨特（Richard “Rip ”Hunter），是金色先锋的儿子，也是一位时间旅行者，还是“时间之主”的一员，这个组织的目标就是要保护历史本身。

这个库的目标：保护操作历史

开发

• npm run dev
• npm link 到 demo 项目

发布

• npm run build
• npm publish

一：示例

// 引入(npm install @tuia/rip)

import rip from "@tuia/rip";

// 注册

// rip.init方法，其中system和userIdentifier是必要参数

setTimeout(() => {
  rip.init({
    system: "测试数据", //system:string 必传，接入系统名称
    env: "prod", //env?:string 默认为prod ，可以传入dev仅作为测试使用
    log: true, //log?boolean 默认为false，不打开录制日志
    userIdentifier: JSON.stringify(userInfo), //userIdentifier:string 必传，当前用户信息。推荐json，包含email等用户信息
    path: location.hash, //path:string  默认取当前url，当前路由hash信息
  });
}, 2000);

// 销毁，页面跳转不需要调用。在不想监听或者整个App销毁时可以调用（正常场景下基本不会用到）
rip.stop();

二：你需要了解的

初始化时机

建议放在页面渲染稳定后，也就是用户可操作后再初始化。

这是因为初始化时会对整个页面进行快照，这一部分数据量非常大，对此我们做了特别的优化。如果初始化时页面还是白屏或者页面内容在剧烈变化 ，这样全量快照小，而 diff 信息会很大，和我们的优化期望正好相反，当然 diff 信息过大的情况，我们也做了处理。总之，我们推荐的最佳实践是，在获取到用户信息（这个时必传参数）并且页面趋于稳定，用户可操作以后去初始化录制。这个具体到业务场景，需要做下权衡

性能

rip 的运行，除了一个探针监听用户行为并转发事件外，其他计算都在 Web Worker 中进行，包括数据维护，切分，上传等操作。不会对业务系统的性能造成太大影响

接入成本

rip 只有两个 api，init 和 stop。其他所有的边界操作都已经在这两个方法中处理掉了，基本实现了业务系统的零成本接入。

三：数据网址

测试数据网址：http://hunter.duibadev.com.cn/private#/userBehavior 线上数据网址：http://hunter.dui88.com/private#/userBehavior

###四：学习资源: https://github.com/rrweb-io/rrweb