https://github.com/woai3c/monitor-demo

一个前端监控 SDK 教学项目
https://github.com/woai3c/monitor-demo

Last synced: 5 days ago
JSON representation

一个前端监控 SDK 教学项目

• Host: GitHub
• URL: https://github.com/woai3c/monitor-demo
• Owner: woai3c
• Created: 2021-07-23T16:32:31.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-04T14:47:41.000Z (11 months ago)
• Last Synced: 2024-12-31T11:20:34.651Z (12 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.23 MB
• Stars: 189
• Watchers: 4
• Forks: 59
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# monitor

一个简易的前端监控 SDK DEMO，仅供学习，请勿在生产环境中使用。

## 文档

* [前端监控 SDK 的一些技术要点原理分析](https://github.com/woai3c/Front-end-articles/issues/26)

## DEMO

克隆项目后，执行命令打开服务器。

```

npm run server

```

然后用 vscode 的 `live server` 插件访问 examples 目录上的 html 文件，即可尝试体验监控 SDK 的效果。同时打开开发者工具，点击 network 标签，可以看到上报数据的发送请求。

## 使用

### 直接 HTML 文件中引入使用

```html

    monitor.init({

        url: 'http://localhost:8080/reportData'

    })

```

### 通过 npm 使用

安装

```

npm i monitor-demo

```

引入

```js

import monitor from 'monitor-demo'

// 如果有 Vue 的话

import router from './router'

import Vue from 'vue'

monitor.init({

    url: 'http://localhost:8080/reportData',

    vue: {

      Vue,

      router,

    }

})

```