前言最近上线的人事系统，由于同步问题，HR一直认为是系统问题，不承认操作不当。为了避免互相指责，打算把hr的操作记录下来，方便下次使用。原理还原用户行为DOM快照+用户事件难度DOM快照大小控制，diff合并，开始使用保存网页的思路，后来研究发现rrweb前端已经有类似的实现报告代码importAxiosfrom'@src/utils/requestNoError';constrrweb=require('rrweb');exportdefault(userName,workCode)=>{try{(function(){letevents=[];letisFirstFrame=真；让whiteList=['#/roster','#/organizemanage','#/api'];rrweb.record({emit(event,isCheckout){if(isCheckout){isFirstFrame=true;}constisInWhiteList=whiteList.includes(window.location.hash);if(isInWhiteList&&events.length===301){save(JSON.parse(JSON.stringify(events)));events=[];}isInWhiteList&&events.push（事件）;},checkoutEveryNth:299});//save函数用于向后端发送事件并重置事件数组functionsave(eventData){letparams={userName,workCode,system:'hrm',events:JSON.stringify(eventData),url:location.href,isFirstFrame};让twoDomain=window.location.href.split('.')[1];让baseUrl='';//如果是在线或测试环境则跳转if(twoDomain==='test'||twoDomain==='global'){baseUrl=`//skyeye.${twoDomain}.com/behavior/addBehavior`;}else{baseUrl='//skyeye.test.com/behavior/addBehavior';}//第一帧和第二帧被发送和缓冲if(isFirstFrame){isFirstFrame=false;}公理（{方法：'发布'，网址：baseUrl，数据：参数}）;}////每10秒调用一次保存方法以避免请求过多//setTimeout(save,10*1000);})();}赶上（错误）{console.log（错误）；}};管理端播放目录结构|____bin||____www//节点启动文件|____dist|____build||____build.js||____webpack.dev.conf.js||____webpack.prod.conf.js||____webpack.base.conf.js||____utils.js|____config//webpack配置||____dev.env.js||____index.js||____prod.env.js||____条目。js|____mock//模拟数据配置||____服务器||____router|____html//模板html||____index.html|____static//静态文件||____favicon.ic|____src||____条目|//公共样式||____components//公共组件|||____页脚||||____index.less||||____index.jsx|||____加载中|||____index.less|||____菜单||||____index.less|||____index.jsx||||____menuData.js//侧边栏配置文件|||____面包屑||||____index.less||||____index.jsx|||____标题||||____index.less||||____index.jsx||____lib//工具库|||____permissionTools.js|||____dataFormate.js|||____common.js//获取请求相关|||____utils.js|||____cookie.js||____containers//业务页面|||____示例//演示||||____index.jsx||||____example.less||||____孩子|||||____index.jsx|||____商店|||||____index.js||____routes//前端路由配置|||____nameFilter.js|||____index.js|||____riskmng.js|||____示例.js|||____应用程序。js|____.editorconfig|____README.md|____yarn.lock|____.gitignore|____package.json|____.eslintrc.js|____.eslintignore|____.babelrc|____app.js|____postcss.config.jsplay解析importReactfrom'react';从'rrweb-player'导入rrwebPlayer;从'../store'导入商店;从'./index.less'导入样式;导入{observer}from'mobx-react';@observerclassReplayextendsReact.Component{componentDidMount(){store.getBehaviorDetail({fileName:this.props.location.fileName}).then(()=>this.play());}play=()=>{newrrwebPlayer({//eslint-disable-linetarget:document.querySelector('#replayer'),//可以自定义DOM元素data:{events:JSON.parse(store.behaviorEvents)}});};render(){return(
