- 官方 SaaS SDK:需付费。
- 自行搭建:需满足资源配置(建议 4 CPU、16 GB 内存、20 GB 存储),并安装 Docker 19.03.6及以上, Docker Compose 2.32.2 及以上。
私有化部署步骤
Github 地址:https://github.com/getsentry/self-hosted
- 下载 Release 版本源码并解压。
- 在项目根目录执行
./install.sh完成安装。 - 执行
docker-compose up -d启动服务。 - 服务会监听宿主机 9000 端口,并重定向到容器内 80 端口。
- 将启动以下组件:Web、Nginx、Worker、API、PostgreSQL 数据库。
- 首次访问需创建管理员账号与密码并登录。
- 进入 Settings 页面创建 Team。
- 在 Project 中创建项目,按技术栈选择对应语言/框架配置。
- 创建项目后会给到对应的依赖
sentry-sdk安装方案 、配置说明,以及生成http:<id>@<域名>配置 DSN 地址 - 在业务项目中集成对应 SDK,并按需配置采样率与 PII 等选项:
traceSampleRate:0-1.0性能日志采样率,可以调小,避免生产环境访问频繁占用过多的性能sendDefaultPii(Send Default Personal Identification Information):boolean, ,是否发送个人的标识信息,主要后台日志聚类,比如根据用户名、浏览器版本、操作系统做错误日志聚类分析
ISSUE 界面 :
常用界面,可以看到内容:
- 相同日志的出现次数
- 用户 IP 、浏览器、操作系统版本
- 错误接口、用户 IP 、用户信息
- 堆栈信息,可以看到哪个脚本那行代码出错
- 每种出错类型的日志占比
- Cookie、头部类型消息
性能分析界面:
- 页面加载时间
- P50 线:数据从小到大排序后 50%位置的内容
- P95 线:数据从小到大排序后 90% 位置的内容,通常比 P50 大
自行捕获错误 :
使用 sentry 的 captureException / captureMessage 向sentry 推送错误或者消息
Vue 环境版本集成
下载 @sentry/vue 插件,集成了 @sentry/browser 和 Vue 功能的集成强化
javascript
import { createApp } from "vue";
import * as Sentry from "@sentry/vue";
const app = createApp({
// 根组件配置
});
// 初始化 Sentry,dsn 为事件上报地址
Sentry.init({
app,
dsn: "__PUBLIC_DSN__", // 上面部署后配置得到的 DSN
integrations: [
// 集成 Vue Router,用于路由级别的性能追踪与错误关联
Sentry.browserTracingIntegration({ router }),
],
});
SourceMap 映射
通过官方向导可快速接入 SourceMap 上传与校验,会引导完成构建配置调整:
bash
npx @sentry/wizard@latest -i sourcemaps
SourceMap 在构建阶段生成并上传,开发环境通常不用上传源映射。
SouceMap 未生效排查:
- 未正确构建和上传 SourceMap
- sentry 会在每个源码里添加
e._sentryDebugIds=e._sentryDebugIds||{}用于源映射 - 可以通过
--validate验证源码文件正常 - map 文件被 gzip 压缩,sentry 目前不支持解析
Vite 配置
-
额外安装
npm install @sentry/vite-plugin --save-dev
-
.env配置SENTRY_AUTH_TOKEN=sentry_token
-
在 Vite 中配置 sentry-vite-plugin,在上传完成后删除本地源映射表的内容,也可以在配置服务器拒绝
js.map被访问和请求
javascript
import { defineConfig } from "vite";
import { sentryVitePlugin } from "@sentry/vite-plugin";
export default defineConfig({
build: {
// 配置 hiddden 或者 true,Sentry 通过 debug_id 关联源码,hidden 可不暴露 .map 请求
sourcemap: "hidden",
},
plugins: [
// 把插件放在最后方
sentryVitePlugin({
org: "org", // sentry 上配置的组织名称
project: "project", // sentry上配置的项目名称
authToken: process.env.SENTRY_AUTH_TOKEN, // 上传 token
sourcemaps: {
// 构建后上传,并删除相关 .map 文件,避免部署后暴露
filesToDeleteAfterUpload: [
"./**/*.map",
"./dist/**/*.map",
],
},
}),
],
});