tielan / web-see-demo

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

websee-logo

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

功能

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

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

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

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

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

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

安装

$ npm install

运行

$ npm run start

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

演示

后台页面

sea.png

演示效果

web-see.gif

About

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


Languages

Language:Vue 58.0%Language:JavaScript 39.0%Language:HTML 3.0%