npm package: @liyuan_ba/frontend-monitor-sdk
Description: 前端监控SDK - 支持异常、性能、访问量监控
Latest version: 1.0.0

# Frontend Monitor SDK

前端监控SDK，支持异常监控、性能监控和访问量统计。

## 功能特性

- **异常监控**
  - JavaScript运行时错误
  - Promise未捕获异常
  - 资源加载失败（图片、脚本、样式等）
  - 网络请求异常（XHR/Fetch）
  - 控制台错误输出
  - Vue/React框架错误处理

- **性能监控**
  - Core Web Vitals（LCP、FID、CLS、FCP、TTFB）
  - 导航性能（DNS、TCP、SSL、DOM解析等）
  - 资源加载性能
  - API请求耗时
  - 长任务监控（Long Tasks）

- **访问监控**
  - PV/UV统计
  - Session管理
  - 页面停留时长
  - 设备信息（操作系统、浏览器、屏幕分辨率等）
  - SPA应用路由变化监听

- **数据上报**
  - 支持分类上报地址（异常/性能/访问可分别配置）
  - 采样率控制（异常100%，性能/访问可配置）
  - 批量上报 + 页面关闭补发
  - 上报前钩子函数

## 安装

```bash
npm install frontend-monitor-sdk
```

## 快速开始

```typescript
import Monitor from 'frontend-monitor-sdk';

Monitor.init({
  appId: 'your-app-id',
  appVersion: '1.0.0',
  env: 'production',
  reportUrl: {
    error: 'https://your-domain.com/api/error',
    performance: 'https://your-domain.com/api/perf',
    visit: 'https://your-domain.com/api/visit'
  },
  sampleRate: {
    error: 1,        // 异常100%上报
    performance: 0.1, // 性能10%采样
    visit: 0.1       // 访问10%采样
  },
  enableSPA: true  // 如果是SPA应用
});
```

## 配置选项

| 参数 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| appId | string | 是 | - | 应用唯一标识 |
| reportUrl | object | 是 | - | 上报地址配置 |
| appVersion | string | 否 | '1.0.0' | 应用版本 |
| env | string | 否 | 'production' | 环境：production/development/test |
| sampleRate | object | 否 | {error:1, performance:0.1, visit:0.1} | 采样率配置 |
| enableSPA | boolean | 否 | false | 是否SPA应用，启用路由变化监听 |
| enableSourceMap | boolean | 否 | false | 是否启用sourcemap解析 |
| maxBreadcrumbs | number | 否 | 20 | 最大行为记录数 |
| beforeReport | function | 否 | - | 上报前钩子，返回false可阻止上报 |

## 手动上报

```typescript
// 上报自定义错误
Monitor.reportError(new Error('自定义错误'), {
  extra: '附加信息',
  userId: 'user-123'
});

// 上报自定义性能指标
Monitor.reportPerformance('api_response', 150, 'api');
Monitor.reportPerformance('render_time', 50, 'custom');

// 上报自定义访问事件
Monitor.reportVisit('custom_event', {
  duration: 1000,
  pageCount: 5
});
```

## 框架集成

### Vue 3

```typescript
import { createApp } from 'vue';
import Monitor from 'frontend-monitor-sdk';
import App from './App.vue';

Monitor.init({
  appId: 'vue-app',
  reportUrl: { /* ... */ }
});

const app = createApp(App);

// 配置Vue错误处理
app.config.errorHandler = Monitor.vueErrorHandler;

app.mount('#app');
```

### Vue 2

```typescript
import Vue from 'vue';
import Monitor from 'frontend-monitor-sdk';

Monitor.init({
  appId: 'vue-app',
  reportUrl: { /* ... */ }
});

Vue.config.errorHandler = Monitor.vueErrorHandler;
```

### React

```typescript
import React from 'react';
import Monitor from 'frontend-monitor-sdk';

Monitor.init({
  appId: 'react-app',
  reportUrl: { /* ... */ }
});

// 创建错误边界组件
class ErrorBoundary extends React.Component {
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    Monitor.reportError(error, {
      componentStack: errorInfo.componentStack
    });
  }

  render() {
    return this.props.children;
  }
}

export default ErrorBoundary;
```

## 数据上报格式

### 异常数据

```json
{
  "type": "error",
  "appId": "your-app",
  "timestamp": 1707456000000,
  "data": {
    "type": "js",
    "message": "Cannot read property 'foo' of undefined",
    "stack": "TypeError: Cannot read property...",
    "filename": "https://example.com/app.js",
    "lineno": 42,
    "colno": 15
  },
  "device": { /* 设备信息 */ },
  "page": { /* 页面信息 */ }
}
```

### 性能数据

```json
{
  "type": "performance",
  "data": {
    "type": "web-vitals",
    "name": "LCP",
    "value": 2500,
    "rating": "good"
  }
}
```

### 访问数据

```json
{
  "type": "visit",
  "data": {
    "type": "pv",
    "pageCount": 3
  }
}
```

## 类型支持

```typescript
import Monitor, { MonitorConfig, ReportData } from 'frontend-monitor-sdk';

const config: MonitorConfig = {
  appId: 'my-app',
  reportUrl: {
    error: 'https://api.example.com/error'
  }
};

Monitor.init(config);
```

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- IE 11（部分功能受限）

## License

MIT