关于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，须要用到pip3yum install -y python3# 3. 装置docker-composepip3 install -U docker-compose

第二步：装置sentry

# 1. 拉取源码 onpremisegit 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 entirelymail.host: 'smtp.qq.com'mail.port: 25mail.username: '1475022262@qq.com' # 你用来发邮件的qq邮箱mail.password: 'xxxxxxxxxxxxxx' # 开启SMTP服务后失去的受权码mail.use-tls: false# The email address to send on behalf ofmail.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'// 特定环境引入sentryconst { host, hostname } = window.location// 依据具体情况配置在哪个环境引入 sentryif (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/*.mapnpm 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 的主机地址dsnconst { 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 updateapt-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 restartdocker-compose restart

一、介绍

什么是sentry？

为什么要抉择sentry？

官网

二、应用阐明

采纳官网Saas版本

私有化部署（采纳）

服务端部署

客户端引入

上传sourcemap

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

接入 github SSO 单点登录

三、问题记录

上报接口跨域问题

sentry禁用 qq邮箱