/web-see-demo

web-see监控后台demo,主要用来演示错误还原功能,方式包括:定位源码、播放录屏、记录用户行为

Primary LanguageVue

websee-logo

web-see 后台demo,主要用来演示错误还原功能,方式包括:定位源码、播放录屏、记录用户行为

功能

1、使用 express 搭建静态服务器,模拟线上环境,通过获取.map 文件,实现定位源码的功能

2、server.js 中实现了 reportData(错误上报)、getmap(获取 map 文件)、getRecordScreenId(获取录屏信息)、 getErrorList(获取错误列表)的接口

3、用户可点击 'js 报错'、'异步报错'、'promise 错误' 按钮,上报对应的代码错误,后台实现代码错误还原

4、点击 'xhr 请求报错'、'fetch 请求报错' 按钮,上报接口报错信息

5、点击 '加载资源报错' 按钮,上报对应的资源报错信息

通过对这些错误的捕获与处理,了解监控平台的整体流程

注意:定位源码功能读取的是打包后 dist 中的.map 文件,打开控制台可以看到 fileName 的打印(对应的.map 文件路径)

安装

$ pnpm install

运行

$ pnpm run start

浏览器输入 http://localhost:8083

演示

后台页面

sea.png

演示效果

web-see.gif