背景：由于用户返回的问题在本地复现比较困难，于是想在平台接入监控系统，为什么要使用sentry？因为他支持用户操作的回放功能✌️
一、示例使用
- 安装依赖
npm install @sentry/vue @sentry/tracing
- 初始化配置
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';
import Vue from 'vue';
import router from './router';
import App from './App.vue';
Sentry.init({
Vue,
dsn: 'https://xxx.ingest.sentry.io/xxx',
integrations: [
new Integrations.BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
tracingOrigins: ['localhost', 'yourdomain.com'],
}),
],
tracesSampleRate: 1.0,
});
- 捕获异常
// 手动捕获
try {
// ...
} catch (err) {
Sentry.captureException(err);
}
// 捕获promise异常
window.addEventListener('unhandledrejection', (event) => {
Sentry.captureException(event.reason);
});
- 还支持自定义用户的上下文
Sentry.setUser({
id: 'user-id',
email: 'user@example.com',
});
二、项目中的使用
1.封装初始化sentry方法
import Vue from 'vue'
import * as Sentry from '@sentry/vue'
export default (router) => {
const dsn = 'https://xxxxxx/123312312' // 项目唯一标识
// 定义 Sentry 配置
const sentryConfig = {
Vue,
dsn,
integrations: [
Sentry.browserTracingIntegration({
router,
}),
Sentry.replayIntegration({
maskAllText: false,
blockAllMedia: false,
}),
],
tracePropagationTargets: [/^https:\/\/(\w+\.test|test|localhost)\.com\.cn(\/.*)?$/],
tracesSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
release: process.env.SENTRY_RELEASE || 'development',
}
// 检查是否已经初始化 Sentry
if (!window.SentryInitialized) {
Sentry.init(sentryConfig)
window.SentryInitialized = true // 标记 Sentry 已初始化
}
}
}
- DSN：在 Sentry 中，DSN就像是一把“钥匙”，告诉 SDK 把错误数据发送到哪个项目。每个 Sentry 项目都有唯一的 DSN
- browserTracingIntegration：
- 用于前端性能监控，会记录页面加载时间、路由跳转耗时、XHR 请求等
- 监听 Vue Router 的导航变更
- replayIntegration：
- 用于录制用户会话的插件
- maskAllText：不对页面文字进行脱敏
- blockAllMedia：不屏蔽页面上的媒体内容
- tracePropagationTargets：正则匹配了 test.com.cn、其子域名和 localhost，确保 tracing 不泄露给其他域名
- tracesSampleRate：设置前端性能数据的采样率（1.0 代表 100% 采样，适合初期调试，建议上线后设置为 0.1 ~ 0.2）
- replaysSessionSampleRate：有 10% 的用户会被录制会话，无论是否报错
- replaysOnErrorSampleRate: 所有发生错误的用户都会被录制，便于事后排查
2. 使用sentry
import useSentry from './sentry'
import router from './router'
useSentry(router)
- ⚠️ 该router为VueRouter对象：
3. axios捕获异常
service.interceptors.response.use(
response => {
// 这里处理响应数据
return response
},
error => {
// 这里处理响应错误，比如上报 Sentry
Sentry.captureException(error)
return Promise.reject(error)
}
)
4. 自定义用户的上下文
Sentry.setUser({
id: userInfo.id,
username: userInfo.displayName,
email: userInfo.email,
})
设置之后，在私有化部署的sentry上，能按照特定用户来区分错误信息
三、私有化sentry（基于Docker）
1. 配置要求
- Linux/macOS（推荐 Ubuntu 20.04+）
- Docker（>= 20.10）
- Docker Compose（v2+）
- 至少 4核 CPU、16GB 内存
- Python 环境（用于一些辅助脚本）
2. 获取 Sentry 源码
Sentry 官方提供了私有部署的专用 repo：
git clone https://github.com/getsentry/self-hosted.git
cd self-hosted
// 切换到最新稳定分支
git checkout master
3. 安装依赖并初始化配置
# 拉取镜像并创建配置文件，需要 root 权限
./install.sh
运行过程会执行：
- 拉取 Docker 镜像
- 自动创建 .env 配置文件
- 自动生成密钥等必要配置
4. 修改配置
有需要可以在 .env 文件中修改默认设置：
- SENTRY_ADMIN_EMAIL：默认管理员邮箱
- SENTRY_DB_PASSWORD：PostgreSQL 密码
5. 启动服务
一切准备好后，运行：
docker compose up -d
6. 创建管理员账户
服务启动后，进入容器内执行命令创建管理员账号：
docker compose run --rm web createuser
根据提示输入邮箱、用户名、密码
然后就可以通过http://your-server-ip:9000来访问你私有化的sentry系统了
7. 上传 Source Map 到 Sentry 系统
为什么要上传source map：
构建后的 JavaScript 文件是压缩混淆的，直接查看错误堆栈会非常困难。为了解决这个问题，我们可以将构建产 物中的 Source Map 文件 上传至 私有化部署的 Sentry，这样就能准确还原源码中的报错位置
// 安装sentry-cli 工具
npm install --save-dev @sentry/cli
// 设置环境变量
export SENTRY_AUTH_TOKEN=xxx
# 私有部署的 Sentry 地址
export SENTRY_URL=https://sentry.your-company.com
// 上传Source Map
# 1. 创建一个新的版本（release）
sentry-cli releases new v1.0.0
# 2. 上传构建产物中的 Source Map 文件
sentry-cli releases files v1.0.0 upload-sourcemaps ./dist/js --rewrite
# 3. 结束发布
sentry-cli releases finalize v1.0.0
如何获取SENTRY_AUTH_TOKEN
- 进入右上角的用户头像 → Account Settings
- 点击左侧导航栏的 Auth Tokens
- 生成一个新的 Token（选择 "project:write" 权限即可）
- 将生成的 Token 用于环境变量 SENTRY_AUTH_TOKEN
8. 获取 DSN 并接入前端项目
-
- 在sentry系统中创建一个新项目
-
- 在项目设置中复制 DSN
- 在项目设置中复制 DSN
- 将该dsn替换掉（二.1封装初始化sentry方法）步里面的就ok了
已经接入的项目会发请求记录用户操作日志
具体用户操作回放过程涉及到公司隐私，就不做展示了
