前端错误监控平台sentry搭建及接入

前言

sentry是时下不可多得的一款保证项目质量与健康的监控工具，受到开发团队青睐。具有以下突出特点：

• 利用sourcemap还原源码，精确定位错误堆栈
• 保留现场记录错误发生时的用户行为
• 配置邮件预警策略和阈值实时提醒
• 数据统计报表

Server安装

官方最新版推荐使用Docker安装，要求Docker 17.05.0+，Compose 1.19.0+,另外推荐Python版本为2.7，docker安装这里不再多述,使用下述命令确认是否已安装及版本：

docker -v
docker-compose -v

拉sentry安装代码到本地：

git clone https://github.com/getsentry/onpremise.git

执行脚本一步到位：

cd onpremise
./install.sh

启动相关容器：

docker-compose up -d

期间有交互可设置admin账号，最后浏览器输入地址，默认端口为9000，安装完成
值得注意的地方是sentry有一份配置文件config.yml放在onpremise/sentry里，安装前可以预先修改配置项。如果安装后再想修改配置请遵循以下步骤：

已配置smtp邮件服务为例，强烈推荐修改，不然默认可能会当作垃圾邮件或收不到邮件，找到config.yml如下位置，

image.png

再已企业微信邮箱为例：

# mail.backend: 'smtp'  # Use dummy if you want to disable email entirely
mail.host: 'smtp.exmail.qq.com'
mail.port: 587
mail.username: '[email protected]'
mail.password: 'xxxx' // 密码不是企业微信的登录密码，而是 设置–微信绑定–安全登录–客户端专用密码
mail.use-tls: true
# The email address to send on behalf of
mail.from: '[email protected]'

保存config.yml，在onpremise目录，执行：

docker-compose build
docker-compose run --rm web upgrade
docker-compose up -d

项目接入sentry

1. 在sentry平台新建project，会有接入提示
2. 项目中执行：

npm install @sentry/browser --save

3. 项目入口文件添加代码：

import * as Sentry from '@sentry/browser';

Sentry.init({dsn: "http://序列号@ip地址:9000/数字"});

运行项目，如有报错信息就可以在sentry平台中搜集到。

项目上传sourcemap

1. 项目中执行：

npm install @sentry/webpack-plugin --save-dev

2. 添加webpack插件，类似代码：

new SentryWebpackPlugin({
  include: './build', // 代码生成位置
}

3. 根目录创建.sentryclirc文件，内容：

[defaults]
url = url地址
org = 组织名
project = 项目名

[auth]
token = 授权令牌 

授权令牌再网站获取，勾选project:write：

image.png

image.png

webpack打包时会自动上传目录下的所有.map文件到sentry服务器上，前提是要生成sourcemap文件，如遇权限问题，可查看挂载位置：

docker inspect sentry-data

image.png

cd /home/data/docker/volumes/sentry-data/_data
chmod 777 .
cd files
chmod 777 -R .

上传成功后，就可以在平台上看到对应版本的错误源码了。

配置

为了方便使用，可以先设置语言和时区：

image.png