前端异常监控之 Sentry的部署和使用

因为最近在整理前端异常监控相关内容，因此本身在虚拟机搭建部署了一下Sentry，把搭建过程及一些本身踩得坑整理以下

1、Sentry部署

Sentry搭建有两种方式：

• 经过Python安装 教程地址
• 经过Docker容器安装 教程地址

我本地是用Docker进行搭建的。

一、安装docker

yum install docker -y

// 查看版本信息
docker info
或者
docker -v
复制代码

二、安装wget

// 在linux中使用wget时，若报-bash: wget: command not found，则代表没有安装wget，须要安装，安装命令以下：-->

yum -y install wget
复制代码

三、安装pip

# 若是使用 wget下载https开头的网址域名 时报错，你须要加上 --no-check-certificate (不检查证书)选项
wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate  # 下载文件

python get-pip.py #执行安装

pip -V #查看pip版本
复制代码

四、安装docker-compose

sudo pip install docker-compose # 安装 docker-compose

docker-compose -v #查看docker-compose 版本
复制代码

五、安装git

安装git教程地址

六、 搭建本身的sentry

1）首先从github上拉去sentry的docker配置文件

更新：sentry 有更新，参考readme文件内容以下，具体以官方为准

------------------如下为更新前操做步骤-----------------

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

cd onpremise

#根据onpremise目录中的README.md 内容来操做：

cat README.md 

---------
1. `mkdir -p data/{sentry,postgres}` - Make our local database and sentry config directories.
    This directory is bind-mounted with postgres so you don't lose state! 2. `docker-compose build` - Build and tag the Docker services 3. `docker-compose run --rm web config generate-secret-key` - Generate a secret key. Add it to `docker-compose.yml` in `base` as `SENTRY_SECRET_KEY`. 4. `docker-compose run --rm web upgrade` - Build the database. Use the interactive prompts to create a user account. 5. `docker-compose up -d` - Lift all services (detached/background mode). 6. Access your instance at `localhost:9000`! ---------- 复制代码

2）在clone下的onpremise下 建立目录

mkdir -p data/{sentry,postgres}

docker-compose build # 必定执行，否则报错，而后再生成key
复制代码

3） 获取项目的key

这个过程很漫长，可能中间会卡，或者出现一些错误，多执行几回就行了

docker-compose run --rm web config generate-secret-key

生成的密匙相似这样：41dvtnqzc#g(*s8ichpp8r@gqzu(p4h(+l6qi(d9+f9ue2u+j9
复制代码

4）编辑docker-compose.yml，复制获取的key 到 SENTRY_SECRET_KEY

vim docker-compose.yml
复制代码

5）建立项目的superuser

过程当中会让咱们填写邮箱和密码

docker-compose run --rm web upgrade
复制代码

6）开启sentry服务

docker-compose up -d
复制代码

7） 这时候输入你的 http:://ip:9000 便可进入你的 sentry

使用第 5） 步的用户名密码进行登陆便可

进入后进行简单配置，而后右上角能够点击 New Project 建立，选择须要项目类型，根据提示进行配置

七、搭建注意事项：

• 1） 在执行 docker-compose run --rm web upgrade 时报错。

  

忘记执行 docker-compose build
复制代码

• 2）执行 docker-compose up -d 报错，关闭 docker再从新打开。

关闭docker： systemctl stop docker
启动docker： systemctl start docker
复制代码

• 3）执行 docker-compose run --rm web upgrade 若是忘记设置用户名或者设置错误，部署完后不能登陆则从新安装数据库。

删除 /var/lib/docker/volumes 下的 onpremise_sentry-postgres 文件夹。
从新执行命令 docker-compose run --rm web upgrade
复制代码

• 4）用docker composer启动docker集群时报错：

# ERROR: Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?

应该是docker后台服务没有开启

执行：systemctl start docker
复制代码

• 5）docker经常使用的一些操做

#查看全部容器： 
docker ps -a

#查看运行容器：
docker ps

#停用全部容器：
docker stop $(docker ps -q)

#删除全部容器：
docker rm $(docker ps -aq)

#停用和删除全部容器：
docker stop $(docker ps -q) & docker rm $(docker ps -aq)
复制代码

2、Sentry使用

一、安装Sentry对应的命令行管理工具sentry-cli。

npm i -g @sentry/cli

sentry-cli -V // 检查版本
复制代码

二、生成token

点击头像左下角，选择API，生成token，勾选project:write权限

三、登录

$ sentry-cli --url https://myserver/ login

# 回车后输入上一步得到的 token 便可
复制代码

四、release控制

1）建立release

sentry-cli releases -o 组织 -p 项目 new staging@1.0.1

# 这里的 staging@1.0.1 就是咱们指定的版本号. 
# -o -p能够经过页面左上角能够看到。如今咱们能够经过建立多个版本号来进行异常分类。 同时，也能够经过页面中"Releases"查看是否建立成功
复制代码

2）本地应用release

# 安装raven-js
npm install raven-js --save

# 回到前端项目中，在config添加对应的release，指定版本后，每次上报的异常就会分类到该版本下。

import Raven from 'raven-js';

Raven.config(DSN, {
release: 'staging@1.0.1'
}).install()
复制代码

3）删除release

sentry-cli releases -o 组织 -p 项目 delete staging@1.0.1

# 注意 删除某个release时须要将其下的异常处理掉,并将该版本的sourcemap文件清空
# 完成上面两步可能还要等待2小时才能删除，否则会报错：该版本还有其它依赖。
复制代码

五、SourceMap管理

目前来讲，前端项目基本都会压缩混淆代码，这样致使Sentry捕捉到的异常堆栈没法理解。

咱们但愿在Sentry直接看到异常代码的源码时就须要上传对应的source和map。

1）上传 SourceMap

sentry-cli releases -o 组织 -p 项目 files staging@1.0.1 upload-sourcemaps js文件所在目录 --url-prefix 线上资源URI
复制代码

PS: 记得别把map文件传到生产环节了，又大又不安全…

PS: 免费服务的文件上限为40MB。

2）清空 SourceMap 文件

sentry-cli releases files staging@1.0.1 delete --all
复制代码

也能够选择在 版本>工件 里点击一个个删除。。。。

3）结合webpack在项目中配置进行sourcemap上传

# 安装webpack-sentry-plugin
npm i -D webpack-sentry-plugin
复制代码

var SentryPlugin = require('webpack-sentry-plugin');

plugins: [
    //...
    new SentryPlugin({
        // Sentry options are required
        baseSentryURL: 'https://sentry.mycorp.com/api/0', # 若是是内网使用须要加
        organization: 'sentry',
        project: 'react',
        apiKey: process.env.SENTRY_API_KEY,
    
        // Release version name/hash is required
        release: process.env.GIT_SHA,
        deleteAfterCompile: true,
        suppressErrors: true,
        filenameTransform: function (filename) {
            return 'http://xxx.com/' + filename
        }
    })
]
复制代码

参考文献：

1. Sentry前端部署拓展篇（sourcemap关联、issue关联、release控制）
2. 使用Docker 方式在Centos 7.0 安装配置Sentry
3. sentry使用实践
4. webpack-sentry-plugin
5. Sentry支持SourceMap指引