?阅读本文，您将了解行为追溯系统的优势与收益？您可以了解构建完整回溯系统的过程、DOM录制方案的优势，以及使用FFmpeg转码视频。前言行为溯源系统最早出现在保险销售行业。其定义和范围是指保险机构通过销售页面管理、销售过程记录等方式，对在自营网络平台上销售保险产品的交易行为进行记录和保存的方式。,使其可供检查。这样可以降低线上销售模式的风险和问题的出现，并在问题出现后迅速找到相应的因素。行为追溯系统为我们提供了有效的图片、音频或视频相关的有效资料，供我们进行调查和检查。可记录用户行为序列，通过会话回放还原真实用户操作场景，分析核心流程转化并呈现用户行为偏好，基于用户行为优化用户体验，根据用户操作轨迹了解异常发生的全过程，辅助研发人员定位和处理异常问题，通过行为分析实现异常跟踪。我们通过以下内容来详细了解追溯系统，了解其原理和使用方法。系统设计行为回溯分析平台：1、数据仪表盘：数据仪表盘主要用于统计综合终端提交的数据数量、运营/管理员的检查归档数量、提交数据的地域分布。通过以上指标，可以对抽检/归档是否达标、系统使用活跃度、系统使用区域分布等进行监测分析，便于有针对性的调查分析。下一步。2、行为分析：行为分析模块主要设计了三个子模块：关键行为分析、一般行为分析和其他单独管理的行为分析。建议将与业务强相关的操作，如：订单支付、合同预览等，按业务代码分类为关键操作。建议将与系统模块相关的操作，如：页面跳转、地址修改等，按照系统代码归类为普通行为。当一些记录与业务或系统代码没有关联时，将统一记录在其他动作中，以确保记录的数据可以在某处找到。3、档案管理：基于系统设计的初衷和综合终端迭代速度的差异，我们需要针对关键的业务回溯行为设计一定的指标进行抽查和归档。归档后的数据会持久化存储，避免终端快速迭代该问题导致的回溯问题，后续会增加定时任务自动归档，避免此类问题。4、用户管理：实现通用管理平台的功能，用于添加运营商，进行授权等功能。行为分析平台模块分布图：注：回溯视图归档后会转为视频，下方数据服务中有示例演示。行为可以追溯到SDK：SDKAPI定义：1.启动回溯记录[startRecord]：单页应用：业务启动时调用一次，参数first指定为true，启动记录，然后返回UID用于自存，保存在cookie中当前录音的UID。多页应用：业务启动和单页一样，需要在业务启动后进入每个页面时调用。参数first为false，绑定相同UID的录音数据。开始录音后，SDK会默认每3秒自动上报一次录音数据，以保证数据的完整性。startRecord(first=false){if(first){this.uid=uuidv4()docCookies.setItem('behavior-record-uid',this.uid)}else{this.uid=docCookies.getItem('behavior-record-uid')}if(!this.uid){thrownewError('无法获取UID，参考开发文档。')}constctx=thisthis.stopFn&&this.stopFn()this.stopFn=rrweb.record({emit(event){ctx.events.push(event)}})this.timer=setInterval(()=>{if(ctx.events.length>0){this._requestEvents(this.uid,ctx.events)ctx.events=[]}},config.INTERVAL_TIME)returnthis.uid}2.停止回溯记录[stopRecord]：单页应用：业务结束时调用一次，指定参数last为true，结束recording,cookie中存储的当前UID将被清除。多页应用：业务结束与单页相同，需要在业务结束前每个页面离开时调用。last参数设置为false，cookie中保存的当前UID不会被清除。stopRecord(last=false){if(!this.stopFn){thrownewError('未发现启动记录，参考开发文档')}this.stopFn()clearInterval(this.timer)this.timer=nullif(this.events.length>0){this._requestEvents(this.uid,this.events)this.events=[]}if(last){if(docCookies.hasItem('behavior-record-uid')){docCookies.removeItem('behavior-record-uid')this.uid=''}}}3.上报回溯记录[report]:调用停止回溯记录API(last=true)后，部分需要使用用于统计提取并报告分析后的公共数据，并将其与相关业务ID相关联。当你录制的场景不是业务场景时，你可以自己生成系统ID，上报模块或函数的名称，以供查询分析。_requestEvents(uid,events){this._request('track/update',{uid,timestamp:events[0].timestamp,events,userAgent:navigator.userAgent})}async_request(action,data){返回等待获取(`${config.EVENT_API}/${action}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})}put在需要回溯的客户端安装好插件后，可以简单配置启动回溯操作的记录：import{BehaviorRecord}from'./behavior-record/index'window.rb=newBehaviorRecord()//当开始/重新开始回溯时调用start(bool){if(bool){constuid=window.rb.startRecord(true)console.log('[uidtrue]>',uid)}else{constuid=window.rb.startRecord(false)console.log('[uidfalse]>',uid)}}//暂停/结束回溯时调用stop(bool){if(bool){window.rb.stopRecord(true)}else{window.rb.stopRecord(false)}}SDKAPI使用流程图：数据服务：数据服务用于连接报表SDK和分析平台，主要提供用户管理、行为管理等数据支持对于分析平台，数据源从上报SDK集成到需要上报的终端后，根据场景定时上报数据。由于大量存储的内容是不需要强关系的JSON文档，推荐使用采用更高效的MongoDB作为存储介质由于DOM记录受终端大版本迭代影响，部分内容无法回溯，如：实时图片、实时脚本等，所以它是需要添加定时任务做定时数据归档和持久化虽然最终数据失去了直接回放DOM的意义，但也是目前不可或缺的一块内容。数据服务功能流程图：定时归档任务（demo）：constSubscription=require('egg').Subscription;const{spawn}=require('child_process');//在EggJs中实现定时任务，目前每小时执行一次subscribe函数//subscribe函数是为了演示，实际中会受限于转码速度类RegularlyArchiveextendsSubscription{//配置触发规则staticgetschedule(){return{interval:'60m',//分钟间隔type:'all',//指定所有worker都需要执行};}//任务执行函数asyncsubscribe(){console.log('[执行时间]>',newDate().getTime());/***通过spawn执行转换视频的命令*输入：events数据数组*输出：视频文件输出地址**转换逻辑：*1.通过puppeteer加载DOM，使用rrweb-player进行视频后台播放*2.定时每秒15个通过DOM元素的截图功能获取数据流*3.将截取的数据流写入ffmpegProcess进程*/spawn('rrvideo.cmd',['--input','./data.json','--output','./rrvideo-output.mp4'],{stdio:[process.stdin,process.stdout,process.stderr],});}}使用ffmpeg转换视频流程图：通过后台replayDOM进行定时截图，然后使用ffmpeg库将图片合成为视频上传到对象存储服务，达到数据持久化存储的目的。视频生成过程有点慢，请稍等（演示）：在无头浏览器中使用和扩展全局函数示例：exportasyncfunctionopenPage(input:string,output:string,resolve:Function,reject:Function){_input=输入;_output=输出；_resolve=解决；_reject=拒绝；尝试{browser=awaitpuppeteer.launch({headless:true,});page=awaitbrowser.newPage();awaitpage.goto("about:blank");//扩展开始录制函数awaitpage.exposeFunction("onReplayStart",async()=>{awaitstartReplay();});//扩展结束录制函数awaitpage.exposeFunction("onReplayFinish",async()=>{awaitfinishReplay();});//读取原始数据constevents=JSON.parse(fs.readFileSync(path.resolve(process.cwd(),_input),"utf-8"));等待页面。设置内容（getHtml（事件））；}catch(error){console.log("openPage:",error);}}使用FFmpeg转换视频处理示例：asyncfunctionstartReplay(){state="recording";constwrapperEl=awaitpage.$(".replayer-wrapper");console.log("开始转换，请稍等..");constffmpegProcess=spawn("D:\\ffmpeg\\bin\\ffmpeg",[//fps"-framerate","15",//输入配置"-f","image2pipe","-i","-",//输出配置"-y",_output,]);letprocessError:Error|null=null;//每秒15次（帧率）定时执行consttimer=setInterval(async()=>{if(state==="recording"&&!processError){try{constbuffer=awaitwrapperEl?.screenshot({encoding:"binary",});ffmpegProcess.stdin.write(buffer);}catch(error){//忽略}}else{clearInterval(timer);if(state==="closed"&&!processError){console.log("Conversionended");ffmpegProcess.stdin.end();}}},1000/15);ffmpegProcess.on("close",()=>{/*结束回调*/});ffmpegProcess.on("error",(error)=&g吨;{/*错误回调*/});ffmpegProcess.stdin.on("error",(error)=>{/*errorcallback*/});}理解rrwebRecord和replay记录用户的交互并远程重播。--rrweb官网rrweb是'recordandreplaytheweb'的缩写，顾名思义，rrweb就是记录和重放网页中的用户操作开源库介绍：rrweb主要由3部分组成：rrweb-snapshot::包括snapshot和rebuild两个功能rrweb：包括record和replay两个功能rrweb-player：一个提供完整回放功能的UIkit，支持Typescript，保证记录和回放数据结构一致，Typescript自然支持强类型被采用。支持隐私保护，为开发者在录制过程中对部分隐私内容提供丰富的隐私保护选项。主流开源库，目前GitHub上star数已达11.2k，已发布稳定版。笔者在接受采访时（rrweb纪录片）提到rrweb整个session的投稿量达到了10亿/月，其中保险行业占比最大。这是对rrweb的强大压力测试吗？应用场景：用户分析：通过像素完美重播用户在您网站上所做的事情，可以轻松了解您的用户并优化他们的体验。错误重现性：可以在浏览器中以一致的行为远程重播和调试问题。网页展示：提供一种更轻量级和像素完美的方式来展示您的网页而不是录制视频。实时协作：借助rrweb强大的功能，轻松在网页上与他人实时互动分享。工作原理分析rrweb的录制方案从最初确定录制快照到解决定时快照会造成长期无效录制，导致冗余数据过多造成存储空间浪费，大量造成性能压力在DIFF上对复杂的DOM进行处理，从而根据DOM快照+监控DOM和其他相关更改相结合的解决方案来确定最终版本。Oplog的顾虑是什么？通过MutationObserver监控DOM结构的变化；监视全局事件以获得鼠标移动、窗口缩放、视图滚动和媒体交互；监控输入事件和劫持集以记录输入组件的变化；通过代理样式表相关函数记录样式表变化；特殊的canvas组件和字体也需要通过proxy对应的方法处理。MutationObserverAPI：MutationObserverAPI可以轻松监控DOM变化。当发生变化时，其回调函数会返回符合MutationRecord接口的数据：属性类型描述typeString如果是属性变化，则返回“attributes”；如果是characterData节点变化，返回“characterData”；如果子节点树的childList发生变化，则返回“childList”。addedNodesNodeList返回添加的节点。removedNodesNodeList返回删除的节点。previousSiblingNode返回被添加或删除的节点的前一个兄弟节点，或者返回null。nextSiblingNode返回添加或删除节点后的兄弟节点，或者返回null。attributeNameString返回正在修改的属性的属性名称，或者返回null。attributeNamespaceString返回被修改的属性的命名空间，或者返回null。oldValueString返回值取决于MutationRecord.type。对于attribute属性变化，返回变化前的属性值。对于字符数据变化，返回变化前的数据。对于子节点树childList的变化，返回null。MutationObserverAPI的兼容性如下图所示：写在最后在这次探索中，我们通过研究了解了rrweb开源产品的优势，并通过构建完整的前后端系统进行了验证。使用rrweb记录的数据需要搭建一个独特的播放系统来实现DOM播放，传播性低。这时候我们就可以使用puppeteer+FFmpeg将数据转成视频再进行分发。行为溯源系统可以在产品体验优化、系统稳定性、用户操作规范等方面增加数据支持，让我们直观地分析总结，为下一步的改进做铺垫。基于rrweb录制解决方案还可以实现很多产品或功能，比如基于Web平台的会议画面共享、针对Web平台的系统监控、针对金融保险公司的销售行为追溯系统等。关于我们?海亮科技交易合规前端团队（GFE），隶属于海亮科技（北京）交易合规业务线研发部，是一支充满激情、创造力，坚持以技术驱动整体成长的团队。团队平均年龄27岁，有在各自领域耕耘多年的大牛，也有应届毕业生。我们在工程化、编码质量、性能监控、微服务、交互体验等领域积极探索，追求技术驱动产品落地。目的是打造一个完整的前端技术体系。愿景：成为最值得信赖和影响力的前端团队使命：坚持客户体验至上，为商业创造更多可能文化：勇于承担，深耕业务，集思广益，群策群力，只需打开Github：https://github.com/gfe-team
团队邮箱：gfe@goldentec.com
特别注意：文章如涉及源码&案例，可向gfe-team索取。如文章有引用内容但未声明，请直接联系我们处理。目前各版块正在大力建设中，敬请期待。..参考阅读rrweb-iorrweb：打开网页录制播放的黑匣子，如何将录制的DOM转换为视频文件录制播放功能本文由高亮交易合规前端团队（GFE）发表技术，未经授权禁止任何形式的转载。我们常年招前端，如果你要跳槽，正好喜欢这个地方，那就加入吧！！！
