Sentry 私有部署和配置笔记

• 官方 SaaS SDK：需付费。
• 自行搭建：需满足资源配置（建议 4 CPU、16 GB 内存、20 GB 存储），并安装 Docker 19.03.6及以上， Docker Compose 2.32.2 及以上。

私有化部署步骤

Github 地址：https://github.com/getsentry/self-hosted

1. 下载 Release 版本源码并解压。
2. 在项目根目录执行 ./install.sh 完成安装。
3. 执行 docker-compose up -d 启动服务。
4. 服务会监听宿主机 9000 端口，并重定向到容器内 80 端口。
5. 将启动以下组件：Web、Nginx、Worker、API、PostgreSQL 数据库。
6. 首次访问需创建管理员账号与密码并登录。
7. 进入 Settings 页面创建 Team。
8. 在 Project 中创建项目，按技术栈选择对应语言/框架配置。
9. 创建项目后会给到对应的依赖 sentry-sdk安装方案 、配置说明，以及生成 http:<id>@<域名> 配置 DSN 地址
10. 在业务项目中集成对应 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 功能的集成强化

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 上传与校验，会引导完成构建配置调整：

npx @sentry/wizard@latest -i sourcemaps

SourceMap 在构建阶段生成并上传，开发环境通常不用上传源映射。

SouceMap 未生效排查：

1. 未正确构建和上传 SourceMap
2. sentry 会在每个源码里添加 e._sentryDebugIds=e._sentryDebugIds||{} 用于源映射
3. 可以通过 --validate 验证源码文件正常
4. map 文件被 gzip 压缩，sentry 目前不支持解析

Vite 配置

1. 额外安装

   npm install @sentry/vite-plugin --save-dev

2. .env 配置

   SENTRY_AUTH_TOKEN=sentry_token

3. 在 Vite 中配置 sentry-vite-plugin，在上传完成后删除本地源映射表的内容，也可以在配置服务器拒绝 js.map 被访问和请求

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",
        ],
      },
    }),
  ],
});

参考内容

• Browser JavaScript | Sentry for JavaScript
• Self-Hosted Sentry