{"_id":"@ariel_jhy/frontend-monitor-sdk","_rev":"2-1a0eb298e188613d2d4a5be44b6e5b82","name":"@ariel_jhy/frontend-monitor-sdk","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@ariel_jhy/frontend-monitor-sdk","version":"0.0.1","keywords":["monitor","sdk","error-tracking","performance","analytics","web-vitals"],"author":"","license":"MIT","_id":"@ariel_jhy/frontend-monitor-sdk@0.0.1","maintainers":[{"name":"ariel_jhy","email":"Ariel_jhy@163.com"}],"homepage":"","dist":{"shasum":"14dbd37e163565166afc595b91c9126ab2b8cbb0","tarball":"https://registry.npmjs.org/@ariel_jhy/frontend-monitor-sdk/-/frontend-monitor-sdk-0.0.1.tgz","fileCount":19,"integrity":"sha512-9PB1ubFZTja+gxZ0o0E9gIRZ3ZtwUdw66C97MfmYGqTfO7k8ce9TUVAc/uh8H4SsJbcZWLIgboPoyjk9DQY4rQ==","signatures":[{"sig":"MEQCIClbO0f7JIij1+GW616ZRr3e1wTQ+IGQIb+wOq0PQi77AiAuvunVfXeojfNnJ9hApHFRWIv3RRiEmPyzbThz6WEi0Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":113280},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"}},"scripts":{"dev":"rollup -c -w","test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"ariel_jhy","email":"Ariel_jhy@163.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.9.4","description":"前端监控SDK - 错误监控、性能监控、用户行为追踪","directories":{},"_nodeVersion":"22.21.1","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.9.0","typescript":"^5.3.3","@types/node":"^20.10.0","@rollup/plugin-typescript":"^11.1.5"},"_npmOperationalInternal":{"tmp":"tmp/frontend-monitor-sdk_0.0.1_1765728177099_0.7742124029694717","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@ariel_jhy/frontend-monitor-sdk","version":"0.0.2","type":"module","description":"前端监控SDK - 错误监控、性能监控、用户行为追踪","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js","types":"./dist/index.d.ts"}},"scripts":{"build":"rollup -c","dev":"rollup -c -w","type-check":"tsc --noEmit","prepublishOnly":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["monitor","sdk","error-tracking","performance","analytics","web-vitals"],"author":"","license":"MIT","repository":{"type":"git","url":""},"homepage":"","devDependencies":{"@rollup/plugin-typescript":"^11.1.5","@types/node":"^20.10.0","rollup":"^4.9.0","tslib":"^2.6.2","typescript":"^5.3.3"},"_id":"@ariel_jhy/frontend-monitor-sdk@0.0.2","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-SzNEC5/qD8bqbB4/hangOfd1jmdWqph4sgV1w6TMclWUkWAGZLsAo2JjQsftJHb9OekobLlhGm9hl8yjIujh+A==","shasum":"8fb7116b4250fe404f4c7272b872d96e68dad07d","tarball":"https://registry.npmjs.org/@ariel_jhy/frontend-monitor-sdk/-/frontend-monitor-sdk-0.0.2.tgz","fileCount":19,"unpackedSize":113302,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDlB16lcxcn3ejE5HS7PGax4MHhWRVs6yj0c6BR0P3HrgIhANfag8QncinlEPwy56pCf4SUzqUuwYCQ+eQeJFUjLImX"}]},"_npmUser":{"name":"ariel_jhy","email":"Ariel_jhy@163.com"},"directories":{},"maintainers":[{"name":"ariel_jhy","email":"Ariel_jhy@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/frontend-monitor-sdk_0.0.2_1765771240736_0.6522852684970035"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-14T16:02:56.999Z","modified":"2025-12-15T04:00:41.100Z","0.0.1":"2025-12-14T16:02:57.278Z","0.0.2":"2025-12-15T04:00:40.886Z"},"license":"MIT","keywords":["monitor","sdk","error-tracking","performance","analytics","web-vitals"],"repository":{"type":"git","url":""},"description":"前端监控SDK - 错误监控、性能监控、用户行为追踪","maintainers":[{"name":"ariel_jhy","email":"Ariel_jhy@163.com"}],"readme":"# 前端监控SDK\n\n一个功能完整的前端监控SDK，支持错误监控、性能监控和用户行为追踪。使用现代 Web API 构建，支持最新的性能指标。\n\n## 功能特性\n\n- ✅ **错误监控**：自动捕获JavaScript错误、Promise错误、资源加载错误\n- ✅ **性能监控**：使用现代 PerformanceNavigationTiming API，支持 Web Vitals 指标\n  - 基础指标：DNS、TCP、TLS、请求响应时间\n  - 渲染指标：FP、FCP、LCP\n  - 交互指标：FID、TTI\n  - 稳定性指标：CLS\n- ✅ **用户行为**：点击事件、页面访问、路由导航追踪\n- ✅ **数据上报**：支持批量上报、采样控制、自动重试、超时控制\n- ✅ **TypeScript**：完整的类型定义，支持现代 ES 模块\n- ✅ **轻量级**：无外部依赖，体积小\n- ✅ **现代构建**：使用 Rollup 构建，支持 ESM、CJS、UMD 格式\n\n## 安装\n\n```bash\nnpm install @ariel_jhy/frontend-monitor-sdk\n```\n\n## 快速开始\n\n### 基础用法\n\n```javascript\nimport FrontendMonitor from '@ariel_jhy/frontend-monitor-sdk';\n\n// 初始化SDK\nconst monitor = new FrontendMonitor({\n  url: 'https://your-api.com/monitor/report',\n  appId: 'your-app-id',\n  userId: 'user-123', // 可选\n  enableError: true,\n  enablePerformance: true,\n  enableBehavior: true,\n  sampleRate: 1, // 采样率 0-1\n  immediate: false, // 是否立即上报\n  maxBatchSize: 10, // 批量上报最大数量\n  reportDelay: 5000 // 上报延迟时间（ms）\n});\n\n// 启动监控\nmonitor.init();\n```\n\n### 手动上报\n\n```javascript\n// 手动上报错误\nmonitor.reportError(new Error('Something went wrong'));\nmonitor.reportError('Error message');\n\n// 手动上报行为\nmonitor.reportBehavior('click', { element: 'button#submit' });\nmonitor.reportBehavior('pageview', { page: '/home' });\n\n// 立即上报所有数据\nmonitor.flush();\n```\n\n### 获取监控数据\n\n```javascript\n// 获取错误列表\nconst errors = monitor.getErrors();\n\n// 获取性能数据\nconst performance = monitor.getPerformance();\n\n// 获取行为列表\nconst behaviors = monitor.getBehaviors();\n```\n\n### 更新配置\n\n```javascript\n// 更新用户ID\nmonitor.setUserId('new-user-id');\n\n// 更新配置\nmonitor.updateConfig({\n  sampleRate: 0.5,\n  immediate: true\n});\n```\n\n## 配置选项\n\n| 参数 | 类型 | 必填 | 默认值 | 说明 |\n|------|------|------|--------|------|\n| url | string | 是 | - | 数据上报接口地址 |\n| appId | string | 是 | - | 应用ID |\n| userId | string | 否 | - | 用户ID |\n| enableError | boolean | 否 | true | 是否启用错误监控 |\n| enablePerformance | boolean | 否 | true | 是否启用性能监控 |\n| enableBehavior | boolean | 否 | true | 是否启用用户行为监控 |\n| sampleRate | number | 否 | 1 | 采样率（0-1） |\n| immediate | boolean | 否 | false | 是否立即上报 |\n| maxBatchSize | number | 否 | 10 | 批量上报最大数量 |\n| reportDelay | number | 否 | 5000 | 上报延迟时间（ms） |\n\n## 数据格式\n\n### 错误数据\n\n```json\n{\n  \"type\": \"error\",\n  \"errorType\": \"javascript\",\n  \"message\": \"Error message\",\n  \"filename\": \"app.js\",\n  \"lineno\": 123,\n  \"colno\": 45,\n  \"stack\": \"Error stack trace\",\n  \"timestamp\": 1234567890,\n  \"url\": \"https://example.com/page\",\n  \"userAgent\": \"Mozilla/5.0...\"\n}\n```\n\n### 性能数据\n\n```json\n{\n  \"type\": \"performance\",\n  \"dns\": 10,\n  \"tcp\": 20,\n  \"tls\": 15,\n  \"request\": 100,\n  \"domParse\": 50,\n  \"resourceLoad\": 200,\n  \"firstPaint\": 150,\n  \"firstContentfulPaint\": 180,\n  \"largestContentfulPaint\": 2500,\n  \"firstInputDelay\": 50,\n  \"cumulativeLayoutShift\": 0.1,\n  \"loadComplete\": 500,\n  \"timeToInteractive\": 3500,\n  \"timestamp\": 1234567890,\n  \"url\": \"https://example.com/page\"\n}\n```\n\n**性能指标说明：**\n- `dns`: DNS查询时间（ms）\n- `tcp`: TCP连接时间（ms）\n- `tls`: TLS协商时间（ms，HTTPS）\n- `request`: 请求响应时间（ms）\n- `domParse`: DOM解析时间（ms）\n- `resourceLoad`: 资源加载时间（ms）\n- `firstPaint`: 首次绘制时间（ms）\n- `firstContentfulPaint`: 首次内容绘制时间（ms）\n- `largestContentfulPaint`: 最大内容绘制时间（ms，Web Vitals）\n- `firstInputDelay`: 首次输入延迟（ms，Web Vitals）\n- `cumulativeLayoutShift`: 累积布局偏移（Web Vitals）\n- `loadComplete`: 页面完全加载时间（ms）\n- `timeToInteractive`: 可交互时间（ms）\n\n### 行为数据\n\n```json\n{\n  \"type\": \"behavior\",\n  \"action\": \"click\",\n  \"element\": \"button#submit\",\n  \"timestamp\": 1234567890,\n  \"url\": \"https://example.com/page\"\n}\n```\n\n## 开发\n\n```bash\n# 安装依赖\nnpm install\n\n# 开发模式（监听文件变化）\nnpm run dev\n\n# 构建生产版本\nnpm run build\n\n# 类型检查\nnpm run type-check\n```\n\n## 构建产物\n\n- `dist/index.cjs.js` - CommonJS 格式\n- `dist/index.esm.js` - ES 模块格式（推荐）\n- `dist/index.umd.js` - UMD 格式，可在浏览器直接使用\n- `dist/index.d.ts` - TypeScript 类型定义文件\n\n## 浏览器支持\n\n- Chrome/Edge 51+（支持 PerformanceNavigationTiming）\n- Firefox 45+（支持 PerformanceNavigationTiming）\n- Safari 11+（支持 PerformanceNavigationTiming）\n\n**降级支持：**\n- 对于不支持现代 Performance API 的浏览器，SDK 会自动降级到 `performance.timing` API\n- Web Vitals 指标（LCP、FID、CLS）需要浏览器支持 PerformanceObserver\n\n## 技术栈\n\n- **构建工具**: Rollup（替代 Webpack，更适合库开发）\n- **语言**: TypeScript 5.3+\n- **目标**: ES2020\n- **性能 API**: PerformanceNavigationTiming、PerformanceObserver\n\n## 注意事项\n\n1. 确保上报接口支持CORS或使用JSONP\n2. 建议设置合理的采样率以控制上报量\n3. 页面卸载时会自动上报剩余数据\n4. 支持SPA应用的路由监控\n5. Web Vitals 指标在页面可见性变化时计算，确保数据准确性\n6. 使用 `sendBeacon` API 优先上报，失败时自动降级到 `fetch`\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}