houbb-monitor-web
v1.4.0
Published
The web monitor tool.
Readme
说明
monitor-web-js 学习包
使用方式
CDN 引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/monitor-web.js"></script>初始化
<script>
// 获取登录的用户 sessionId。可以在 login 之后初始化。
window.MonitorWeb.init({
serverUrl: 'http://localhost:8080/track',
appId: 'hello-test'
});
</script>完整例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>monitor</title>
<script src="../source/monitor-web.js"></script>
</head>
<body>
<div id="container">
<div class="content">
JUST MONITOR!!!!
</div>
</div>
<script>
// 获取登录的用户 sessionId。可以在 login 之后初始化。
window.MonitorWeb.init({
serverUrl: 'http://localhost:8080/track',
appId: 'hello-test'
});
</script>
</body>
</html>对应的 PV 日志：
{"title":"monitor","url":"file:///D:/_github/monitor-web-js/example/hello.html","timestamp":1661656663147,"userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36","sessionId":"","appId":"hello-test","version":"1.0.0","uuid":"c89d7f37-4f64-45e0-807c-a51ded3811e2","ex":4,"kind":"business","type":"pv","effectiveType":"4g","rtt":200,"screen":"1920x1080"}VUE 引入
install
npm i houbb-monitor-webmain.js
如果文件放在 utils/monitor.js。
import {MyMonitor} from '@/utils/monitor.js';
Vue.prototype.$monitor = MyMonitor;这样可以挂载到 vue 的原型上，任何地方都可以用下面的方式使用
this.$monitorApp.vue
import {MyMonitor} from '@/utils/monitor.js'
export default {
mounted() {
this.initMonitor();
},
methods: {
// 格式化输出方法
initMonitor(row, column) {
MyMonitor.init({
serverUrl: 'http://localhost:8080/monitor-server/any/front/monitor/add',
appId: 'hello-test',
longTaskLimit: 10,
});
},
}
}
</script>ROAD-MAP
[x] JS 异常，资源加载异常
[x] PV/UV
[x] 页面停留
[x] XHR
[x] 白屏
[x] 性能
[x] 卡顿/长任务
[x] 页面点击事件？发送对应的页面点击
[ ] cookies 信息
[ ] 传输数据的加密
[ ] 批量上传