本项目并不保证任何质量,请误将其加入你的生成环境
web 错误与性能记录插件 --- 前端记录插件
github 地址: https://github.com/Link-X/web-front-end-record
实现功能
普通脚本错误、promise 错误、资源加载错误、页面加载性能、超时文件、用户操作录制、回放
技术栈
js、ts、rollup
原理浅析
1、错误记录
- 监听 error、unhandledrejection,根据事件响应数据判断错误类型
- 文件性能和错误监听 主要是通过这个 window.performance api 对数据进行整理
2、页面录制
- 录制:生成首屏 vdom 后 使用 MutationObserver 监听页面和时间变化进行上传
- 播放:根据 vdom 每项类型一次执行记录的数据修改根 vdom,进行渲染
使用方式
npm install web-front-end-record
// 关于录屏,记录屏幕的方法为监听用户页面辩护,将其转换为vdom类型的json,比使用canvas记录能大幅度减小体积,但是依然很大,用户随便操作的记录依然有几mb的大小。并且由于记录还没有记录操作时间间隔,所以变化均按500 毫秒播放,以及每次出现变化播放插件都会全屏渲染一般,所以播放时会出现感觉卡顿。 // or<script src="web-front-end-record/dist/web-front-end-record.umd.js"><script>
// 播放const obj = window { paly2 = vdom: data0 records: data const iframe = document iframestylewidth = `px` iframestyleheight = `px` documentbody const content = iframecontentDocument paly2}