公司生产环境项目中，会有js异常报错情况，为了监控前端代码异常，所以搭建并记录sentry落地过程。

sentry落地内容包括：

注册GeoIP账号
在linux服务器上使用self-hosted搭建sentry服务
sentry管理端界面项目设置
服务器上nginx请求转发到sentry服务
vue3项目使用@sentry/vue代码接入sentry
vite使用vite-plugin-sentry生成sourcemap和推送到sentry

sentry服务

一般直接第一种用官网sentry即可，如果要求较高就使用第二种私有sentry搭建

使用官方 sentry 服务

登录

sentry.io/

设置中文语言和上海时区

新建项目

私有sentry服务

服务器要求：

最低 4核 8G 内存

在linux上搭建sentry服务，采用docker-compose方式，目前在github上已经有开源项目self-hosted（github.com/getsentry/s... 整合了所有需要用到的容器，直接执行里面 install.sh 即可

因为self-hosted是需要使用docker-compose运行，所以前提是需要安装docker和docker-compose环境

我把selef-hosted过程整合到了之前cicd项目里面（gitee.com/rootegg/cic... ，里面默认是有docker和docker-compose安装的，当然这个项目里面有很多内容，需要按需安装。

如果是完全新centos服务器，这下载 cicd.git 项目后

注册GeoIP账号

登录

www.maxmind.com/

获取 License key

获取到License key，后面sentry安装需要用到修改 GeoIP.conf文件

修改 GeoIP.conf 配置

注意： clone到cicd.git项目后，要先项目中修改 self-hosted-23.12.1/geoip/GeoIP.conf 文件，将第一步GeoIp申请的账号AccountID和LicenseKey填入，EditionIDs不变

AccountID 9xxxx5
LicenseKey twxxxxxxxxxxmmk
EditionIDs GeoLite2-City

执行安装

根据提示依次输入

bash 复制代码

cd cicd
sh cicd.centos.sh

# 会自动检查网络

# 输入y回车，安装基础软件包

# 输入y回车，安装docker，如果环境已经配置docker，则输入n跳过

# 输入y回车，配置daemon，如果已经配置过，则输入n跳过

# 输入y回车，安装docker-compose，如果环境已经配置docker-compose，则输入n跳过

# 输入n回车，不安装Harbor，如果你想要安装也可以输入y安装

# 输入n回车，不安装Verdaccio，如果你想要安装也可以输入y安装

# 输入y回车，安装sentry，这里很慢，大概要等2个小时才自动安装完

# 后面的都输入n，跳过所有安装即可

根据提示如图

一直等待安装结束，我的cicd.git项目中会自动启动docker compose up -d，等待执行完成就行

访问

网页访问 9000 端口

管理员邮箱 root@a.com，密码 Sentry12345

报错

报错：Failed to create topic snuba-dead-letter-metrics

我本来使用self-hosted最新版v24.3.0异常报错 Failed to create topic snuba-dead-letter-metrics，所以用v23.12.1版本替代了重新安装，重新执行install.sh会自动清除之前安装的sentry容器，挺方便的

报错： Error response from daemon: failed to create task for container: failed to create shim task: OCI runtime create failed: runc create failed:

修改可执行文件权限

bash 复制代码

  # -R 所有子文件和子文件件都改成 777
  chmod 777 -R self-hosted-23.12.1
  cd self-hosted-23.12.1
  
  chmod 777 install.sh
  chmod 777 scripts/reset.sh
  chmod 777 geoip/GeoIP.conf
  chmod 777 postgres/init_hba.sh
  chmod 777 postgres/postgres-entrypoint.sh
  chmod 777 sentry/entrypoint.sh
  chmod 777 cron/entrypoint.sh

报错：Error setting up IP address geolocation

根据官网说明，要去 www.maxmind.com/en/geolite2... 注册账号

报错：Error response from daemon: failed to create task for container: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: exec: "/entrypoint.sh": permission denied: unknown

看到github有人回复说，重新安装，先执行 scripts/reset.sh 清理，再重新安装后别人就不报错了

bash 复制代码

./self-hosted-23.12.1/scripts/reset.sh --no-report-self-hosted-issues

我试了不行，增加权限

bash 复制代码

chmod 777 geoip/GeoIP.conf

Vue3代码项目接入

更多查看（zhuanlan.zhihu.com/p/547221214...

安装依赖

css 复制代码

npm install --save @sentry/vue

main.js 修改

javascript 复制代码

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "https://xxxxxxxxxx@o4xxxx24.ingest.us.sentry.io/45070xxxxx28",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https://yourserver.io/api/],
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

app.use(router);
app.mount("#app");

vite生产sourcemap并自动上传

安装依赖

sql 复制代码

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

根目录创建配置文件 .env.sentry-build-plugin

ini 复制代码

SENTRY_AUTH_TOKEN=【点击自动生成】

配置插件

特别注意 sourcemap 用 hidden 不能用 true

arduino 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { sentryVitePlugin } from "@sentry/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    // sourcemap: true, // Source map generation must be turned on
    // 注意：这里生产环境不用true，用hidden，否则你线上代码就是源码可见了
    sourcemap: process.env.NODE_ENV === 'production' ? 'hidden' : false, 
  },
  plugins: [
    vue(),

    // Put the Sentry vite plugin after all other plugins
    sentryVitePlugin({
      org: "团队名不带#",
      project: "项目名",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});