关于javascript:前端异常监控实战-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 <service-name>

  • 如果在装置过程中没有创立账号密码，应用以下命令创立

    • 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: '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 单点登录

• 官网文档：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://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