{"id":27404751,"url":"https://github.com/daotin/fe-monitor-web","last_synced_at":"2025-08-06T10:35:28.966Z","repository":{"id":287993754,"uuid":"965479339","full_name":"Daotin/fe-monitor-web","owner":"Daotin","description":"前端监控数据大屏","archived":false,"fork":false,"pushed_at":"2025-04-15T02:35:55.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T02:39:33.204Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Daotin.png","metadata":{},"created_at":"2025-04-13T08:59:27.000Z","updated_at":"2025-04-15T02:35:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"8b92238a-99b6-4315-931a-c8472c873bd2","html_url":"https://github.com/Daotin/fe-monitor-web","commit_stats":null,"previous_names":["daotin/fe-monitor-web"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Daotin/fe-monitor-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Ffe-monitor-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Ffe-monitor-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Ffe-monitor-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Ffe-monitor-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Daotin","download_url":"https://codeload.github.com/Daotin/fe-monitor-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Ffe-monitor-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269065427,"owners_count":24354230,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-06T02:00:09.910Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-14T05:47:07.371Z","updated_at":"2025-08-06T10:35:28.952Z","avatar_url":"https://github.com/Daotin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 前端监控数据大屏\n\n[![Vue 3](https://img.shields.io/badge/Vue-3.5-42b883)](https://vuejs.org/)\n[![Vite](https://img.shields.io/badge/Vite-6.2-646cff)](https://vitejs.dev/)\n[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.9-409eff)](https://element-plus.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-3178c6)](https://www.typescriptlang.org/)\n\n## 项目介绍\n\n前端监控数据大屏是一个基于 Vue 3 + TypeScript + Vite 开发的前端监控可视化平台，用于展示和分析前端应用的性能指标、错误信息、用户行为等监控数据。该项目提供了直观的数据展示界面，帮助开发者快速定位和解决前端应用中的问题。\n\n## 功能特性\n\n- **概览页 (Dashboard)**：展示核心监控指标、错误趋势和 Top 错误列表\n- **错误监控**：详细的 JavaScript 错误列表，支持查看源码、播放录屏和查看用户行为\n- **性能概览**：展示 LCP、FCP 等核心性能指标，以及慢页面列表和资源错误列表\n- **SourceMap 管理**：上传和管理 SourceMap 文件，用于错误堆栈还原\n- **设置页面**：配置应用参数和监控选项\n\n## 技术栈\n\n- **前端框架**：Vue 3 + TypeScript\n- **构建工具**：Vite\n- **UI 组件库**：Element Plus\n- **状态管理**：Pinia\n- **路由管理**：Vue Router\n- **HTTP 请求**：Axios\n- **数据可视化**：ECharts\n- **录屏回放**：rrweb-player\n- **样式处理**：Less\n- **数据模拟**：Mock.js\n\n## 项目结构\n\n```\nsrc/\n├── api/                # API接口\n│   ├── request.ts      # Axios封装\n│   └── index.ts        # API接口定义\n├── assets/             # 静态资源\n├── components/         # 公共组件\n│   ├── common/         # 通用组件\n│   ├── dashboard/      # 概览页组件\n│   ├── error/          # 错误监控组件\n│   ├── layout/         # 布局组件\n│   ├── performance/    # 性能概览组件\n│   └── sourcemap/      # SourceMap管理组件\n├── mock/               # Mock数据\n├── router/             # 路由配置\n├── store/              # 状态管理\n├── utils/              # 工具函数\n├── views/              # 页面视图\n│   ├── dashboard/      # 概览页\n│   ├── error/          # 错误监控\n│   ├── performance/    # 性能概览\n│   ├── sourcemap/      # SourceMap管理\n│   └── settings/       # 设置页面\n├── App.vue             # 根组件\n└── main.ts             # 入口文件\n```\n\n## 安装与运行\n\n### 环境要求\n\n- Node.js 18.0 或更高版本\n- npm 8.0 或更高版本\n\n### 安装依赖\n\n```bash\nnpm install\n```\n\n### 开发模式运行\n\n```bash\nnpm run dev\n```\n\n### 构建生产版本\n\n```bash\nnpm run build\n```\n\n### 预览生产构建\n\n```bash\nnpm run preview\n```\n\n## 主要页面\n\n### 概览页 (Dashboard)\n\n概览页展示了应用的核心监控指标，包括：\n\n- 页面访问量 (PV)\n- 独立访客数 (UV)\n- JavaScript 错误数\n- LCP 均值（加载性能指标）\n- 错误趋势图表\n- Top 5 JavaScript 错误列表\n\n### 错误监控页面\n\n错误监控页面提供了详细的 JavaScript 错误列表，支持：\n\n- 按错误类型筛选\n- 按发生次数或最近发生时间排序\n- 查看错误源码（通过 SourceMap 还原）\n- 播放错误发生时的用户操作录屏\n- 查看用户行为栈，了解错误发生前的用户操作\n\n### 性能概览页面\n\n性能概览页面展示了应用的性能指标，包括：\n\n- LCP (Largest Contentful Paint) 和 FCP (First Contentful Paint) 指标\n- 加载最慢的页面列表\n- 资源加载错误列表\n\n### SourceMap 管理页面\n\nSourceMap 管理页面用于上传和管理 SourceMap 文件，支持：\n\n- 上传 SourceMap 文件\n- 查看已上传的 SourceMap 文件列表\n- 删除不需要的 SourceMap 文件\n\n## 数据模拟\n\n本项目使用 Mock.js 模拟后端 API 数据，模拟数据定义在`src/mock`目录下。在实际项目中，可以替换为真实的 API 接口。\n\n## 开发指南\n\n详细的开发指南请参考`docs/guide.md`文件，其中包含了项目架构设计、开发规范、状态管理、API 请求封装、路由管理和组件开发等内容。\n\n## 项目进度\n\n项目已完成所有计划功能的开发，详细进度请参考`docs/progress.md`文件。\n\n## 问题记录\n\n开发过程中遇到的问题和解决方案记录在`docs/issue.md`文件中。\n\n## 许可证\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaotin%2Ffe-monitor-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaotin%2Ffe-monitor-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaotin%2Ffe-monitor-web/lists"}