# 前端监控SDK

**Repository Path**: gisjinger/monitor-sdk

## Basic Information

- **Project Name**: 前端监控SDK
- **Description**: 监控SDK的设计旨在高效、灵活地采集用户行为数据，为产品优化和业务决策提供有力支持。其核心理念是通过标准化的数据采集机制，准确记录用户在应用中的各类操作事件，并将数据可靠地传输至后端进行分析。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-31
- **Last Updated**: 2025-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 监控, 埋点, 上报

## README

# 前端监控SDK

## 介绍
监控SDK的设计旨在高效、灵活地采集用户行为数据，为产品优化和业务决策提供有力支持。其核心理念是通过标准化的数据采集机制，准确记录用户在应用中的各类操作事件，并将数据可靠地传输至后端进行分析。
Typescript 版本

## 软件架构
![alt text](img/image.png)
前端监控SDK的设计要点，涵盖了多方面的监控能力。SDK主要包括三大监控模块：性能监控（如FP、FCP、LCP、页面加载时间、静态资源加载和Ajax请求耗时）、错误监控（如资源加载错误、JavaScript运行时错误、Promise异步错误等）以及行为监控（如PV/UV、用户停留时间、点击行为等）。此外，SDK支持多种数据上报方式（如XHR、Image/GIF、sendBeacon），并灵活设计了上报时机机制（如requestIdleCallback、setTimeout、beforeUnload及缓存批量策略），确保数据在合适的时机高效上报，兼顾准确性与性能。

## 监控
### 性能监控：
前端性能分析（指标、监控、Lighthouse分析与优化）：https://gisjing.blog.csdn.net/article/details/148366524?spm=1001.2014.3001.5502
![alt text](img/image1.png)
![alt text](img/image2.png)

### 错误监控：
错误监控（普通、Promise、Vue&React）：https://blog.csdn.net/m0_55049655/article/details/148369309?spm=1001.2014.3001.5501
![alt text](img/image3.png)
![alt text](img/image4.png)
### 用户行为监控:
用户点击、页面变化&页面浏览量：https://blog.csdn.net/m0_55049655/article/details/148371905?spm=1001.2014.3001.5501
![alt text](img/image5.png)
![alt text](img/image6.png)

## 上报
![alt text](img/image7.png)
![alt text](img/image8.png)

#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request