devlab-web-glitchtip-usagelisted

# devlab-frontend-glitchtip-usage 为前端应用接入 GlitchTip 错误追踪平台，实现 JS 错误聚合、Source Map 解析、Release 关联和 Issue 管理。GlitchTip 兼容 Sentry SDK，前端零额外学习成本。 ## 适用场景 - 为前端应用安装并配置 Sentry SDK（对接 GlitchTip 后端） - 全局 JS 错误自动捕获和聚合 - Source Map 上传（构建时自动关联） - Release 版本管理（追踪错误引入版本） - Issue 分配、状态跟踪、告警通知 ## 不适用场景 - GlitchTip 服务部署/运维 → 参考 `GlitchTip 官方部署文档 https://glitchtip.com/documentation` - 前端性能监控 / Web Vitals → 使用 `devlab-web-skywalking-rum-usage` - 后端错误追踪 → 使用对应语言的 Sentry SDK（Python/Ruby/Go 等） ## 前置条件 - GlitchTip 5.2+ 已部署（<host>，端口 18000） - 已创建 GlitchTip 项目并获取 DSN - 前端项目可使用 npm 安装依赖 ## 工作顺序 ### 1. 选择 SDK 根据前端框架选择对应的 Sentry SDK： | 框架 | npm 包 | 特殊能力 | |------|--------|---------| | 通用 / 原生 JS | `@sentry/browser` | 基础错误捕获 | | Vue 3 | `@sentry/vue` | `app.config.errorHandler` 自动集成 | | React | `@sentry/react` | `ErrorBoundary` 组件 | | Angular | `@sentry/angular` | `ErrorHandler` provider | | Svelte | `@sentry/svelte` | Svelte 错误边界 | ```bash # 以通用 SDK 为例 npm install @sentry/browser --save # 或框架专用 SDK npm install @sentry/vue --save # Vue npm install @sentry/react --save # React ``` ### 2. 初始化配置 在项目入口文件中初始化 SDK。DSN 通过环境变量注入，**禁止硬编码**。 #### 通用（@sentry/browser） ```typescript import * as Sentry from '@sentry/browser'; Sentry.init({ dsn: process.env.SENTRY_DSN, // GlitchTip DSN environment: process.env.APP_ENV, // dev / staging / production release: process.env.APP_VERSION, // 关联 Source Map tracesSampleRate: 0.1, // 10% 性能采样 m