Houbb-monitor-web NPM

说明

monitor-web-js 学习包

使用方式

CDN 引入

<script src="https://cdn.jsdelivr.net/npm/houbb-monitor-web@1.4.0/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-web

main.js

如果文件放在 utils/monitor.js。

import {MyMonitor} from '@/utils/monitor.js';

Vue.prototype.$monitor = MyMonitor;

这样可以挂载到 vue 的原型上，任何地方都可以用下面的方式使用

this.$monitor

App.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

JS 异常，资源加载异常
PV/UV
页面停留
XHR
白屏
性能
卡顿/长任务
页面点击事件？发送对应的页面点击
cookies 信息
传输数据的加密
批量上传

monitor

@everything-registry/sub-chunk-1862 @infinitebrahmanuniverse/nolb-hou

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago