dashboard

Tracely Dashboard

错误监控系统前端 - 实时监控应用状态，快速定位和解决问题

📖 项目简介

Tracely 是一个专业的错误监控系统前端应用，提供实时的应用状态监控、错误追踪和数据分析能力。通过直观的可视化界面，帮助开发者快速发现和解决生产环境问题。

核心功能：

• 📊 概览面板：实时展示 PV、UV、错误总数和趋势
• 🐛 错误列表：分类展示 JS Error、Promise Error、Vue Error 等错误类型
• 📈 活跃统计：多维度数据分析，支持 7/14/30 天周期查看
• 🔐 用户认证：安全的登录认证和权限管理
• 🎨 现代 UI：基于 Nuxt UI 构建，支持暗色模式

🛠️ 技术栈

Dashboard 面板页面

📊 概览页 /

• 数据卡片：今日 PV、今日 UV、错误总数、今日新增错误
• Top 5 错误：展示出现次数最多的错误列表（类型、消息、次数）
• 快速跳转到错误列表页

🐛 错误列表页 /errors

• 表格展示所有错误，字段：错误类型、错误信息、出现次数、最近出现
• 支持按错误类型筛选（全部 / jsError / promiseError / vueError）
• 支持分页（每页 20 条）
• 点击"详情"按钮查看完整错误信息（类型、消息、堆栈、URL、首次/最近出现时间）
• 支持多应用切换查看

📈 事件统计页 /events

• 事件类型分布：展示所有事件类型及其数量
• 每日事件趋势：表格展示每日事件统计数据
• Top 10 事件排行：展示最热门的事件（支持筛选事件类型）
• 支持切换统计天数（7 天 / 14 天 / 30 天）
• 支持按事件类型筛选
• 支持多应用切换查看

🔐 登录页 /login

• 用户名 + 密码登录
• JWT Token 认证
• 登录状态持久化（localStorage）
• 路由守卫保护

🎨 通用功能

• 明暗色模式：基于 Nuxt UI 自动适配
• 响应式布局：基于 Tailwind CSS
• Hash 路由：使用 createWebHashHistory
• 用户菜单：显示当前用户，支持退出登录
• 应用切换：多应用配置时显示切换下拉框（从 /api/apps 接口加载）

🚀 开发指南

环境要求

• Bun >= 1.2.0（必需）
• 无需 Node.js

安装依赖

bun install

启动开发服务器

bun dev

开发服务器启动后，访问 http://localhost:5173 即可预览。

构建生产版本

bun build

构建产物将输出到 dist 目录。

预览生产构建

bun preview

代码检查

bun run lint

📦 部署说明

构建输出

生产构建产物位于 dist 目录，包含所有静态资源文件。

部署平台

支持部署到以下平台：

• Vercel：自动检测 Vite 项目，一键部署
• Netlify：配置构建命令 bun build 和发布目录 dist
• 其他静态托管：上传 dist 目录到任意静态文件服务器

环境变量

项目无需特殊环境变量配置。

API 代理配置

开发环境下的 API 代理配置在 vite.config.ts 中：

server: {
  proxy: {
    '/api': { target: 'http://localhost:3001', changeOrigin: true },
    '/auth': { target: 'http://localhost:3001', changeOrigin: true },
  },
}

生产环境下，Dashboard 构建产物会嵌入到后端二进制文件中，通过 /static/ 路径访问。

✨ 功能特性

1. 用户认证与权限管理

• 基于 JWT Token 的认证机制
• 登录状态持久化存储（localStorage）
• 路由守卫保护认证页面
• 自动登出和跳转（401 错误处理）

2. 多应用切换支持

• 支持多应用管理（从配置加载）
• 应用状态持久化（localStorage）
• 快速切换不同应用视图
• API 请求自动携带当前 AppID

3. 实时错误监控与展示

• 错误类型自动分类（jsError / promiseError / vueError）
• 错误堆栈详细展示（支持展开查看详情）
• Top 5 错误排行
• 支持按类型筛选和分页

4. 数据可视化统计

• PV/UV 实时统计
• 每日数据趋势（7/14/30 天可选）
• 热门页面排行（Top 10）
• 平均停留时长分析

5. 响应式布局设计

• 适配桌面和平板设备
• 弹性侧边栏布局
• 移动端友好设计

6. 暗色模式支持

• 自动跟随系统主题
• 手动切换支持
• 完整的暗色主题设计

⚠️ 注意事项

本地开发

1. 后端服务：需要启动后端 API 服务（默认端口 3001）
2. API 地址：如后端服务端口不同，请修改 vite.config.ts 中的代理配置
3. 默认账号：开发环境默认用户名为 admin

数据存储

• 登录凭证存储在 localStorage（_tracely_token、_tracely_user）
• 应用选择状态存储在 localStorage（_tracely_current_app）
• Pinia 状态使用持久化插件自动保存（auth store）

路由保护

• /login 页面：已登录用户访问会自动跳转到首页
• 其他页面：未登录用户访问会自动跳转到登录页
• 401 错误：自动清除本地存储并跳转到登录页
• 使用 Hash 路由模式（createWebHashHistory）

浏览器兼容性

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

📄 License

MIT License