# monitor

**Repository Path**: playground_2/monitor

## Basic Information

- **Project Name**: monitor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-10
- **Last Updated**: 2026-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Monitor Monorepo

前端监控工程，参考 [web-monitor-sdk](https://gitee.com) 实现，提供可发布的浏览器 SDK 与本地 Playground。

## 目录结构

```
monitor/
├── packages/
│   └── web-monitor-sdk/   # @monitor/sdk — 性能 / 错误 / 行为监控
├── apps/
│   └── playground/        # 本地演示与 mock 上报
├── package.json
├── pnpm-workspace.yaml
└── turbo.json
```

## 能力概览

| 模块 | 事件类型 |
|------|----------|
| 性能 | `performance`、`resource`、`paint`、`lcp`、`cls`、`fid` |
| 错误 | `js_error`、`promise_error`、`resource_error` |
| 行为 | `click`、`route_change` |

上报策略：事件队列 + 批量定时 flush + `sendBeacon` 优先。

详细接入步骤见 [QUICKSTART.md](./QUICKSTART.md)。

## 快速开始

```bash
cd monitor
pnpm install
pnpm dev:playground   # http://localhost:5190
pnpm build            # 构建 SDK dist
```

## 在业务项目中使用

```ts
import { MonitorSDK } from '@monitor/sdk'

const monitor = new MonitorSDK({
  appId: 'mall-h5',
  reportUrl: 'https://api.example.com/monitor',
  userId: 'user-001',
  debug: import.meta.env.DEV,
})

monitor.init()
```

开发期可通过 workspace 或 `file:` 协议引用：

```json
"@monitor/sdk": "file:../../monitor/packages/web-monitor-sdk"
```

## 文档

- [QUICKSTART.md](./QUICKSTART.md) — 安装、接入、配置与常见问题
- [docs/monitoring-guide.md](../docs/monitoring-guide.md) — 选型与生产实践