一、介绍

什么是sentry？

Sentry 是一个开源的非常强大的实时异常收集系统，可以为开发者的提供帮助、诊断，修复和优化其代码的性能的能力，可以用它来监控线上服务的健康状态，实时收集的异常堆栈信息可以帮助我们快速发现、定位和修复问题

为什么要选择sentry？

Sentry的优势
- 开源，有免费版
- 可以私有化部署，安全
- 错误信息及告警机制完善
- 简单易上手，开发成本低
- 错误追踪及状态流转及时，方便
- 丰富的SDK
- 社区活跃

官网

二、使用说明

采用官方Saas版本

直接官网注册账号使用

私有化部署（采用）

服务端部署

必备条件
- Docker 19.0.0+
- docker-compose 1.28.0+
- 2 GB RAM +
第一步：安装docker环境

# 1. 安装docker
// 官方安装脚本
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

# 2. 安装python3，需要用到pip3
yum install -y python3

# 3. 安装docker-compose
pip3 install -U docker-compose

第二步：安装sentry

# 1. 拉取源码 onpremise
git clone https://github.com/getsentry/onpremise.git

# 2. 执行安装脚本
./install.sh
> 此过程需要输入管理员账号和密码

# 3. 启动
docker-compose up -d

# 4. 测试
// 访问 http://localhost:9000 确认是否安装成功

其他常用命令
- 停止所有服务 docker-compose down
- 重启所有服务 docker-compose restart
- 排除sentry 故障 docker-compose logs
- 如果在安装过程中没有创建账号密码，使用以下命令创建
  - docker-compose run --rm web createuser
配置邮件（以qq邮件为列）
- 登录qq邮箱，开启 IMAP/SMTP服务，记录授权码
  - 官方文档说明：service.mail.qq.com/cgi-bin/hel…
- 修改 sentry/config.yml 文件

###############
# Mail Server #
###############

mail.backend: 'smtp'  # Use dummy if you want to disable email entirely
mail.host: 'smtp.qq.com'
mail.port: 25
mail.username: '1475022262@qq.com' # 你用来发邮件的qq邮箱
mail.password: 'xxxxxxxxxxxxxx' # 开启SMTP服务后得到的授权码
mail.use-tls: false
# The email address to send on behalf of
mail.from: '1475022262@qq.com'

重启docker集群
- 在安装目录下执行：docker-compose restart
回到sentry 后台发送测试邮件
最后在警告中配置邮件告警规则

客户端引入

以vue 为例，其他技术可以查看官方文档

安装依赖
- yarn add @sentry/vue @sentry/tracing

// 引入sentry相关库
import * as Sentry from '@sentry/vue'
import { BrowserTracing } from '@sentry/tracing'

// 特定环境引入sentry
const { host, hostname } = window.location
// 根据具体情况配置在哪个环境引入 sentry
if (Config.sentryUrlList.includes(hostname)) {
  Sentry.init({
    app,
    // 需自行配置转发，处理跨域上报接口跨域问题
    dsn: `http://9307aa2c038946a2bf9aee60003a01b6@${host}//3`,
    release: process.env.VUE_APP_RELEASE,
    autoSessionTracking: false,
    // logErrors: true,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
        tracingOrigins: ['localhost', 'my-site-url.com', /^\//],
      }),
    ],
  })
}

上传sourcemap

按照步骤进行，可能会出现本地开发，无法精确定位到报错位置，部署到开发/测试环境之后就正常了，平时本地开发也不需要开启sentry

通过sentry-cli（自动化部署会很麻烦）

# 第一步：全局安装
npm install sentry-cli-binary -g

# 第二步：登录sentry服务端
sentry-cli --url [servicePath] login
> 示例：sentry-cli --url http://192.168.10.207:9000/ login
按照提示，打开浏览器，复制token验证身份，最后会生成一个 .sentrylrc 文件

# 第三步：补全 .sentrylrc 文件
> .sentrylrc 文件如下
[auth]
token=64a7c07f585744cd8c60ec04e976cea48ddcb069e7794322a8c6759f3aac6edf # API token

[defaults]
url=http://192.168.10.207:9000/ # 服务端地址
org = sentry # 机构名
project = vue # 项目名

# 第四步：上传sourcemap （确保已经构建好了sourcemap文件）
sentry-cli releases files <release名称> upload-sourcemaps <打包出来的js文件所在目录> --url-prefix <线上资源URI>
> 示例：sentry-cli releases files 1.0.0 upload-sourcemaps './dist/static/js' --url-prefix '~/static/js' 
> 列出要上传的文件：sentry-cli releases files 1.0.0 list
> 删除已上传文件：sentry-cli releases files 1.0.0 delete --all

通过webpack插件 - @sentry/webpack-plugin构建（选用）

安装依赖由于网络问题很容易报错，用梯子安装正常

# 第一步：项目安装 @sentry/webpack-plugin 插件
yarn add @sentry/webpack-plugin -D

# 第二步：新建 .sentrylrc 文件
> .sentrylrc 文件如下
[auth]
token=64a7c07f585744cd8c60ec04e976cea48ddcb069e7794322a8c6759f3aac6edf # API token

[defaults]
url=http://192.168.10.207:9000/ # 服务端地址
org = sentry # 机构名
project = vue # 项目名

# 第三步：修改 vue.config.js 文件
var SentryCliPlugin = require('@sentry/webpack-plugin')
if (process.env.NODE_ENV === 'production') {
  config.plugin('SentryCliPlugin ').use(SentryCliPlugin, [
    {
      include: './dist', // 指定上传目录
      release: process.env.VUE_APP_RELEASE, // 指定发布版本
      ignore: ['node_modules'],
      configFile: './.sentryclirc', // 指定sentry上传配置
    },
  ])
}

# 第四步：打包上传
> build 之后删除map文件 vue-cli-service build && rm -rf ./dist/static/js/*.map
npm run build

清除 postgres 数据，释放磁盘空间

手动清除

# 利用 sentry 的清除工具清除
docker exec -it onpremise_web_1 sentry cleanup --days 7
# 再运行df -h 发现还是很满。这是因为cleanup的使用delete命令删除postgresql数据，但postgrdsql对于delete, update等操作，只是将对应行标志为DEAD，并没有真正释放磁盘空间。

# 清除 postgres 中的无效数据
docker exec -it onpremise_postgres_1 vacuumdb -U postgres -d postgres -v -f --analyze

定期清除

每天清理超过7天以上的数据

crontab -e # 使用 crontab 在linux实现定时任务

# 在里面输入
0 0 * * *  docker exec -it onpremise_web_1 sentry cleanup --days 7  && docker exec -it onpremise_postgres_1 vacuumdb -U postgres -d postgres -v -f --analyze

接入 github SSO 单点登录

官方文档：develop.sentry.dev/self-hosted…
github 创建 app教程：docs.github.com/en/develope…

三、问题记录

上报接口跨域问题

本地
- 采用 devServer 做转发

# 第一步，配置dsn 的主机地址dsn
const { host } = window.location // 获取主机
// dsn: 'http://9307aa2c038946a2bf9aee60003a01b6@192.168.10.207//3',
dsn: `http://9307aa2c038946a2bf9aee60003a01b6@${host}//3`,

# 第二步，配置 devServer 
// 上报接口默认会以 /api 开头
'/api/3': {
  target: 'http://192.168.10.207:9000',
  changeOrigin: true,
},

开发/测试环境
- nginx 转发

location /api/3/ {
  proxy_pass http://192.168.10.207:9000/api/3/;
}

sentry禁用 qq邮箱

问题说明
- 邀请成员时，无法使用qq邮箱，接口提示邮件格式不对
问题原因
- sentry官方由于qq.com邮箱滥用情况很多，直接在代码中写死不使用qq.com
问题解决
- 1、查看docker容器,并进入web容器
  - 查看docker容器id

docker ps --filter "name=web"

  - 结果如下

进入 web 容器

docker exec -it 59d1d644e39a bash

2、修改配置文件
- vi 显示行号 —— :set number
- vi 跳转到某一行 —— :行号
- vi 查找字符串 —— :g/string

vi /usr/local/lib/python3.8/site-packages/sentry/conf/server.py
// 默认容器内没有安装 vi，需要手动安装
// 安装过程如下
apt-get update
apt-get install vim -y

// 输入 :2195 ，修改邮箱判断规则
INVALID_EMAIL_ADDRESS_PATTERN = re.compile(r"\@qq\.com$", re.I)
// 改为
INVALID_EMAIL_ADDRESS_PATTERN = re.compile(r"\@xxxxx\.com$", re.I)

:wq 保存，然后退出

然后输入 exit 退出该容器

3、重启容器
- 注：执行两次

docker-compose restart
docker-compose restart

前端异常监控实战 - sentry篇

一、介绍

什么是sentry？

为什么要选择sentry？

官网

二、使用说明

采用官方Saas版本

私有化部署（采用）

服务端部署

客户端引入

上传sourcemap

清除 postgres 数据，释放磁盘空间

接入 github SSO 单点登录

三、问题记录

上报接口跨域问题

sentry禁用 qq邮箱