关于javascript:前端异常监控实战-sentry篇

Sentry 是一个开源的十分弱小的实时异样收集零碎，能够为开发者的提供帮忙、诊断，修复和优化其代码的性能的能力，能够用它来监控线上服务的衰弱状态，实时收集的异样堆栈信息能够帮忙咱们疾速发现、定位和修复问题

为什么要抉择 sentry？
Sentry 的劣势
- 开源，有免费版
- 能够私有化部署，平安
- 错误信息及告警机制欠缺
- 简略易上手，开发成本低
- 谬误追踪及状态流转及时，不便
- 丰盛的 SDK
- 社区沉闷
官网
官网：https://docs.sentry.io/
vue 引入：https://docs.sentry.io/platforms/javascript/guides/vue/
本地化部署：https://develop.sentry.dev/self-hosted/

间接官网注册账号应用

私有化部署（采纳）

服务端部署
必备条件
- 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', /^\//],
    }),
  ],
})
}

依照步骤进行，可能会呈现本地开发，无奈精确定位到报错地位，部署到开发 / 测试环境之后就失常了，平时本地开发也不须要开启 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

手动革除

# 利用 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

官网文档：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/;}

问题阐明
- 邀请成员时，无奈应用 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

关于javascript:前端异常监控实战-sentry篇

一、介绍

什么是 sentry？

为什么要抉择 sentry？

官网

二、应用阐明

采纳官网 Saas 版本

私有化部署（采纳）

服务端部署

客户端引入

上传 sourcemap

革除 postgres 数据，开释磁盘空间

接入 github SSO 单点登录

三、问题记录

上报接口跨域问题

sentry 禁用 qq 邮箱