前端异常监控实战 - sentry篇

一、介绍

什么是sentry？

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

  为什么要选择sentry？

• Sentry的优势

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

  官网

• 官网：https://docs.sentry.io/
• vue引入：https://docs.sentry.io/platforms/javascript/guides/vue/
• 本地化部署：https://develop.sentry.dev/self-hosted/

二、使用说明

采用官方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服务 ，记录授权码

    • 官方文档说明：https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256
  • 修改 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: '[email protected]' # 你用来发邮件的qq邮箱
  mail.password: 'xxxxxxxxxxxxxx' # 开启SMTP服务后得到的授权码
  mail.use-tls: false
  # The email address to send on behalf of
  mail.from: '[email protected]'

  • 重启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  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 单点登录

• 官方文档：https://develop.sentry.dev/self-hosted/sso/#github-auth
• github 创建 app教程 ：https://docs.github.com/en/developers/apps/building-github-apps/creating-a-github-app

---

三、问题记录

上报接口跨域问题

• 本地

  • 采用 devServer 做转发

  # 第一步，配置dsn 的主机地址dsn
  const { host } = window.location // 获取主机
  // dsn: 'http://[email protected]//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