mb-recorder

基于 rrweb 的 Vue 可回溯录制插件

安装

npm install mb-recorder

使用方法

1. 安装插件（推荐方式）

// main.ts
import { createApp } from 'vue';
import { installMbRecorder } from 'mb-recorder';
import App from './App.vue';

const app = createApp(App);

// 使用 installMbRecorder 进行全局安装
app.use(installMbRecorder, {
  baseUrl: 'https://exam.com/',//可留空
  source: 'sales',
  enabledRoutes: ['/order', '/product'],
  debugLog: import.meta.env.DEV
});

app.mount('#app');

2. 全局录制管理器使用

<!-- App.vue -->
<script setup lang="ts">
import { RouterView, useRoute } from "vue-router";
import { watch } from "vue";
import { getMbRecorderManager } from 'mb-recorder';

const mbRecorderManager = getMbRecorderManager();
const route = useRoute();

// 根据不同路由设置不同的page_name
const getRecordPageName = (path: string): string => {
  const page_name_map: Record<string, string> = {
    '/product/info': 'productInfo',
    '/product/apply': 'apply',
    '/product/quick': 'quick_offer',
  };
  
  return page_name_map[path] || route.meta?.title as string || '未知页面';
};

// 监听路由变化，自动处理录制
watch(
  () => route.path,
  (new_path, old_path) => { 
    const route_config = {
      page_name: getRecordPageName(new_path)
    };
    
    mbRecorderManager?.handleRecordRouteChange(new_path, old_path, route_config);
  },
  { immediate: true }
);
</script>

<template>
  <RouterView />
</template>

3. 使用 useMbRecorder Hook

<template>
  <div>
    <button @click="handleUpdateOrder">更新订单</button>
    <p>录制ID: {{ getMbRecordId() }}</p>
    <p>录制状态: {{ isMbRecording ? '录制中' : '已停止' }}</p>
  </div>
</template>

<script setup>
import { useMbRecorder } from 'mb-recorder';

const {
  updateRecordConfig,
  updateRecordOrderUnique,
  getMbRecordId,
  isMbRecording
} = useMbRecorder();

// 更新录制配置
const handleUpdateConfig = () => {
  updateRecordConfig({
    product_code: 'PRODUCT_001',
    source: 'your-app'
  });
};

// 更新订单信息并触发上传
const handleUpdateOrder = async () => {
  await updateRecordOrderUnique('ORDER_123', true); // 第二个参数为是否触发上传
};
</script>

4. 使用 useRecorder Hook（基础录制）

<template>
  <div>
    <button @click="startRecord">开始录制</button>
    <button @click="pauseRecord">暂停录制</button>
    <button @click="stopRecord">停止录制</button>
    <button @click="handleUpload">手动上传</button>
    <p>录制状态: {{ isRecording ? '录制中' : '已停止' }}</p>
    <p>录制ID: {{ getRecordId() }}</p>
  </div>
</template>

<script setup>
import { useRecorder } from 'mb-recorder';

const {
  isRecording,
  isPaused,
  startRecord,
  pauseRecord,
  stopRecord,
  uploadEvents,
  updateRecordOrderUnique,
  getRecordId
} = useRecorder({
  uploadData: {
    force_start: true,
    source: 'your-app',
    product_code: 'PRODUCT_001',
    order_unique: 'ORDER_123'
  },
  recordConfig: {
    sampling: {
      mousemove: false,
      mouseInteraction: false,
      scroll: 150
    },
    recordCanvas: false
  }
});

// 手动触发上传
const handleUpload = async () => {
  await uploadEvents(() => {
    console.log('上传完成');
  });
};
</script>

API 文档

安装配置

interface MbRecorderOptions {
  baseUrl?: string;           // 基础URL地址
  uploadUrl?: string;         // 上传接口地址（可选）
  source?: string;            // 来源标识
  enabledRoutes?: string[];   // 启用录制的路由前缀
  uploadTimeGap?: number;     // 上传间隔时间（毫秒）
  debugLog?: boolean;         // 是否开启调试日志
}

全局管理器方法

interface MbRecorderManager {
  handleRecordRouteChange(newPath: string, oldPath: string, routeConfig: any): void;
  updateRecordConfig(config: any): void;
  updateRecordOrderUnique(orderUnique: string): void;
  getMbRecordId(): string;
  isMbRecording: boolean;
}

useMbRecorder Hook

interface UseMbRecorder {
  updateRecordConfig: (config: any) => void;
  updateRecordOrderUnique: (orderUnique: string, triggerUpload?: boolean) => Promise<void>;
  getMbRecordId: () => string;
  isMbRecording: boolean;
}

useRecorder Hook

interface UseRecorder {
  isRecording: Ref<boolean>;
  isPaused: Ref<boolean>;
  startRecord: () => void;
  pauseRecord: () => void;
  stopRecord: () => void;
  uploadEvents: (callback?: () => void, jumpPage?: boolean) => Promise<void>;
  updateRecordOrderUnique: (orderUnique: string, triggerUpload?: boolean) => Promise<void>;
  getRecordId: () => string;
}

录制配置

interface RecorderConfig {
  uploadData?: {
    force_start?: boolean;    // 是否强制开始
    source?: string;          // 来源标识
    product_code?: string;    // 产品代码
    order_unique?: string;    // 订单唯一标识
  };
  recordConfig?: {
    sampling?: {
      mousemove?: boolean;    // 是否记录鼠标移动
      mouseInteraction?: boolean; // 是否记录鼠标交互
      scroll?: number;        // 滚动采样间隔
    };
    recordCanvas?: boolean;   // 是否记录Canvas
  };
}

使用场景

1. 全局自动录制管理

• 使用 installMbRecorder 进行全局安装
• 通过 getMbRecorderManager 获取管理器实例
• 在路由变化时自动处理录制状态

2. 页面级录制控制

• 使用 useMbRecorder Hook 进行页面级操作
• 支持更新录制配置和订单信息
• 支持手动触发上传

3. 基础录制功能

• 使用 useRecorder Hook 进行基础录制操作
• 支持开始、暂停、停止录制
• 支持手动上传事件

License

MIT