# 监控系统

**Repository Path**: dnxb123/monitoring-system

## Basic Information

- **Project Name**: 监控系统
- **Description**: 青训营项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-16
- **Last Updated**: 2023-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 监控系统

#### 介绍
这是由只会三件套的小白团队开发的前端监控系统模型，代码简单，结构清晰，扩展性较好，未来可应用于多种框架，便于开发者进行学习和二次开发。实现了最基本的异常监控、性能数据监控、用户行为监控和HTTP请求监控功能，该模型目前功能已基本实现，可视化部分也已完成。

#### 项目结构
```
|-- dist
|   |-- bundle.js
|   |-- index.html
|-- src
|   |-- errorData
|   |-- monitor
|   |   |-- lib
|   |   |-- utils
|   |   |-- index.js
|   |-- index.js
|   |-- index.html
|   |-- server.js
|-- README.md
|-- package-lock.json
|-- package.json
|-- webpack.config.js
```

#### 安装教程

1. 克隆整个项目
2. 只克隆dist目录

#### 使用说明

克隆了整个项目

1. 在终端打开文件目录
2. 用指令`npm install`安装依赖
3. `npm run build`可用来打包文件

   `npm run dev`可用来运行服务端

   `Ctrl+c`可用来关闭服务端和服务器

   安装完依赖后，运行服务端模拟线上环境
4. 在另一终端打开src目录，使用指令`node server.js`运行的服务器，用于接受、保存数据
5. 在浏览器地址栏输入`http://localhost:8080/`进入测试页面，模拟用户进行操作
6. 数据均保存在src目录下errorData目录里
```
cd src            #进入src目录
npm install       #安装依赖
npm run build     #打包文件
npm run dev       #运行服务端
Ctrl+c            #关闭服务端和服务器
node server.js    #运行服务器
```
只克隆dist目录
1. bundle.js文件是打包好的监控行为的文件
2. index.html是测试页面
3. 所有数据均会发送到3000端口(你可以在服务器端配置)
#### 文档说明
[青训营答辩文档](https://ml7ff49dbn.feishu.cn/docx/doxcnsqeDj41f8uwYy5yO21rwI2)


#### 参考教程
https://www.bilibili.com/video/BV19a411A72Y?spm_id_from=333.337.search-card.all.click&vd_source=497effcf65ff080232323bb089795d0a

https://juejin.cn/post/7097157902862909471

https://juejin.cn/post/7078512301665419295