公司前端私有监控sentry完整落地

一个不会重复的id
7,606 阅读4分钟

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

sentry落地内容包括：

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

sentry服务

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

使用官方 sentry 服务

登录

sentry.io/

设置中文语言和上海时区

image.png

新建项目

image.png

私有sentry服务

服务器要求：

最低 4核 8G 内存，我看配置16G内存比较好，我服务器原来已用用3G多内存，安装上sentry后，平时直接占有12.9G了

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

官网介绍 develop.sentry.dev/self-hosted…

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

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

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

如果自己部署self-hosted的程序，这也是我cicd.git里面已经修改过的，注意四点：

  • 一是git要用2.22以上版本
  • 二是要注册GeoIp创建GeoIp.conf配置文件
  • 三是给很多文件加权限，如果不知道哪些文件就给所有子文件和子目录加上权限 chmod 777 -R self-hosted-23.12.1
  • 四是修改apt-get加速为国内阿里云镜像，修改wal2json从github加载改为gitee地址，具体可看 blog.csdn.net/Meepoljd/ar…

注册GeoIP账号

登录

www.maxmind.com/

获取 License key

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

image.png

修改 GeoIP.conf 配置

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

AccountID 9xxxx5
LicenseKey twxxxxxxxxxxmmk
EditionIDs GeoLite2-City

执行安装

根据提示依次输入

cd cicd

sh start.sh  # 这里使用start.sh不用图上的cicd.centos.sh，因为start.sh里面增加git升级到最新版本代码，必须的

# 会自动检查网络

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

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

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

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

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

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

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

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

根据提示如图

image.png

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

image.png

访问

网页访问 9000 端口

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

image.png

报错

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

我本来使用self-hosted最新版v24.3.0异常报错 Failed to create topic snuba-dead-letter-metrics，所以用v23.12.1版本替代了重新安装，重新执行 scripts文件夹下reset.sh脚本，清空所有安装，再重新执行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:

image.png

报错： 网页接口报错 failed to queue envelope

relay目录下的config.yml最后增加

cache:
	envelope_buffer_size: 1000000

image.png

容器安装报错 failed to solve: base name (${BASE_IMAGE}) should not be blank

修改可执行文件权限

  # -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… 注册账号 image.png

报错：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 清理，再重新安装后别人就不报错了

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

我试了不行，增加权限

chmod 777 geoip/GeoIP.conf

报错：error: unknown option `show-current'

Centos7.5自带的git版本是1.8.3, 而命令git branch --show-current 需要git 2.22版本以上才支持

升级git版本

# 安装最新版git
yum remove -y git
yum remove -y git-*
yum install -y https://packages.endpointdev.com/rhel/7/os/x86_64/endpoint-repo.x86_64.rpm
yum install -y git

Vue3代码项目接入

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

安装依赖

npm install --save @sentry/vue@7.109.0

main.js 修改

其中 tracePropagationTargets 字段是分布式追踪字段

默认是

tracePropagationTargets: ["localhost", /^https://yourserver.io/api/],

一般没有这种需求，直接设置为

tracePropagationTargets:[]

完整如下：

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: [],
  // 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并自动上传

安装依赖

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

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

SENTRY_AUTH_TOKEN=【点击自动生成】

image.png

配置插件

特别注意 ：

  • sourcemap 用 hidden 不能用 true
  • sentryVitePlugin要传url，不然会报 error: Two different url values supplied 错误
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({
      url: 'http://xxxxxx:9000', // 你的sentry地址
      org: "团队名不带#",
      project: "项目名",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});

生产环境跨域

我们私服地址是 http://ip+端口 ， 生产环境是https的，因为https的网页不能请求http的地址，所以不能直接这么用ip上，两种解决方法：

  • 一种是注册个域名+https证书，给sentry地址绑定上
  • 二种是在生产环境同域名下做请求转发到sentry上，就不用给sentry单独域名和证书

第一种比较简单，只需要在云服务器上绑定域名即可，我们来说第二种不增加域名情况如何做

image.png

第二种nginx转发

修改两个地方：

  • Dockerfile的nginx转发添加sentry的地址
  • 修改sentry.init注册的地址

修改Dockerfile中nginx转发规则

我们前端是用docker构建的，前端项目中有Dockerfile文件

就一个转发规则

# sentry接口
location   /api/2/envelope/ { 
  keepalive_timeout  300;  
  proxy_pass              http://119.xxx.xx.19:9000/api/2/envelope/; 
  proxy_redirect          off; 
  proxy_set_header        Host jeecg-boot-system; 
  proxy_set_header        X-Real-IP $remote_addr; 
  proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for; 
}

image.png

修改Sentry.init请求地址

修改 dsn 的协议和地址就行，我这里直接读取页面的地址，没写死，反正会根据Dockerfile转发过来的

image.png

效果检查

报错监控

如图，项目生产环境报错了

image.png

看sentry控制台

image.png

进去看到报错详情

image.png

用户操作视频回放

image.png

avatar
文章
阅读
粉丝