同一個項目，為什么我本地無法復現，只有客戶的設備才復現？

如何獲取用戶的操作路徑呢？
兩種方案：埋點和rrweb
埋點就很簡單了，將所有可能操作的節點都進行預埋數據；但埋點簡單并不省心（可能會漏掉某個場景）。接下來我們重點探討rrweb方案。

rrweb

一、錄制端（用戶端）

1. 獲取用戶信息

import { getInstance } from "./instance"let token = ''export const getToken = () => {if (token) {return token}const tokenFromSession = sessionStorage.getItem('token')if (tokenFromSession) {token = tokenFromSessionreturn tokenFromSession}const inst = getInstance()const tokenFromInst = inst.getToken()if (tokenFromInst) {token = tokenFromInstreturn tokenFromInst}const __options = inst.getOptions()const { token: tokenFromOption } = __optionsif (tokenFromOption) {token = tokenFromOptionreturn tokenFromOption}
}

2. 用戶信息換錄制配置

a. 配置為空，退出錄制，結束流程

b. 有配置數據，進行第3步

3. 從接口中解析配置數據（獲取起始時間點，結束時間點，錄制時長）

4. 當前時間點校驗（【起始時間，結束時間】）

const { id, singleLength, startTime, endTime } = data
userConfig = { id, maxTime: singleLength, startTime, endTime }
const nowTime = Date.now()
if (nowTime < startTime || nowTime > endTime) {console.log('[未命中配置]-時間未生效')return
}

5.開始錄制，并存儲數據

function record() {return rrweb.record({checkoutEveryNth: 100,emit(event, isCheckout) {if (isCheckout) {// 保存數據saveEvents()events = []}// 臨時存儲events.push(event)},})
}

6. 超出錄制時長，立刻停止，并上報數據

// 停止錄播 - 時間限制
sumSecondTimeout = setTimeout(() => {// 停止錄播stopRecord()
}, maxTime * 60 * 1000)

// 上報數據
http('url',{jsonListObject: events, // 事件數據},{headers: {'X-Phone': userPhone,},})

二、回溯端（B端）

1. 根據手機號獲取用戶的錄制數據（events）

2. 引入rrweb播放端

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';new rrwebPlayer({target: videoRef.current, // 可以自定義 DOM 元素// 配置項props: {events,},
});

用戶錄制端之所以要設置這么多條件，在于C端設備復雜（性能好壞會影響錄制）；為了保證用戶體驗，需要在盡量不干擾用戶操作的前提下去錄制。