uni-monitor

跨平台监控 SDK，支持 Web 和小程序应用的行为追踪、错误监控和性能统计。

功能特性

• 多平台支持：同时支持 Web 浏览器和小程序环境
• 行为追踪：记录用户操作行为，分析用户体验
• 错误监控：捕获 JavaScript 错误、Promise 错误等
• 性能统计：监控页面加载、资源加载等性能指标
• 白屏监控：检测页面白屏问题
• 设备信息收集：获取用户设备信息，便于问题定位
• 网络状态监听：监测网络变化，支持离线事件缓存
• 数据上报：支持单条上报和批量上报

安装

# 使用 npm
npm install uni-monitor

# 使用 yarn
yarn add uni-monitor

# 使用 pnpm
pnpm add uni-monitor

使用方式

浏览器环境

import MonitorSDK from 'uni-monitor';

// 初始化 SDK
const monitor = new MonitorSDK({
  reportUrl: 'https://your-report-server.com/api/log', // 上报接口地址
  distinctId: 'user-12345', // 用户唯一标识（可选）
  batch: true // 是否批量上报，默认为 true
});

// 启动监控
monitor.init();

// 自定义事件追踪
monitor.track('button_click', {
  button_id: 'submit',
  page: 'login'
});

// 更新用户标识
monitor.identify('new-user-id');

小程序环境

// 引入 SDK
const MonitorSDK = require('uni-monitor/dist/monitor-sdk.umd.js');

// 初始化 SDK
const monitor = new MonitorSDK({
  reportUrl: 'https://your-report-server.com/api/log',
  distinctId: 'mini-user-12345'
});

// 启动监控
monitor.init();

// 自定义事件追踪
monitor.track('page_view', {
  page: 'index',
  source: 'home'
});

API 参考

MonitorSDK(options)

创建监控实例

参数：

• options: 配置选项
  • reportUrl: 字符串，必填，数据上报地址
  • distinctId: 字符串，可选，用户唯一标识
  • batch: 布尔值，可选，是否批量上报，默认为 true

init()

初始化监控系统，根据运行环境自动启动相应的监控模块

track(eventName, properties)

追踪自定义事件

参数：

• eventName: 字符串，事件名称
• properties: 对象，可选，事件属性，将随事件一起上报

identify(newDistinctId)

更新用户唯一标识

参数：

• newDistinctId: 字符串，新的用户标识

项目结构

├── lib/
│   ├── config/             # 配置文件
│   ├── core/               # 核心功能模块
│   │   ├── behavior/       # 行为监控
│   │   ├── error/          # 错误监控
│   │   ├── performance.ts  # 性能监控
│   │   ├── blankScreen.ts  # 白屏监控
│   │   ├── device.ts       # 设备信息收集
│   │   ├── events.ts       # 事件处理
│   │   └── platforms/      # 平台适配
│   ├── types/              # 类型定义
│   ├── utils/              # 工具函数
│   └── main.ts             # 主入口文件
├── rollup.config.ts        # Rollup 构建配置
├── tsconfig.json           # TypeScript 配置
└── package.json            # 项目配置

开发指南

安装依赖

pnpm install

开发模式

pnpm run dev

构建生产版本

pnpm run build

生成类型声明文件

pnpm run build:types

代码检查

pnpm run lint

构建输出

构建后会在 dist 目录下生成以下文件：

• monitor-sdk.umd.js - UMD 格式的构建文件，适用于浏览器直接引入
• monitor-sdk.esm.js - ES 模块格式的构建文件，适用于现代前端项目
• types/ - TypeScript 类型声明文件

注意事项

1. 请确保设置正确的 reportUrl，以便数据能够正确上报
2. 建议为每个用户设置唯一的 distinctId，以便更好地进行用户行为分析
3. 在小程序环境中，某些监控功能可能受到平台限制
4. 批量上报模式下，事件会在达到一定数量或网络恢复时自动上报

License

ISC License

Author

TaiYuX