浅析前端错误监控警报系统Sentry基本使用、私有化部署步骤及部署注意事项、使用webpack插件上传sourceMap

　　当我们完成一个业务系统的上线时，总是要观察线上的运行情况，查看日志发现问题并进行优化迭代。因为测试永远无法做到100%覆盖，用户也不会总是按照我们所预期的进行操作，因此我们需要在系统异常时主动对其进行收集上报，以制定解决方案。

　　当生产环境中产生了一个 bug 时，如何做到迅速报警，找到问题原因，修复后又如何在线上验证？此时我们就需要一个高效的错误监控系统。后端有各种强大的监控服务，给我们的应用稳定性保驾护航，然而大多数情况只能记录接口被请求之后所发生的错误。随着 Web 应用越来越强大，客户端的代码可就越来越复杂，很多不可预期错误发生在用户端，因此前端错误监控就不可或缺了。

一、sentry 是什么

　　它是一个前端错误监控警报系统。对于一个前端应用，即使经过开发自测、前端团队内部评审、测试团队测试后，仍然无法完全避免线上出现的错误，比如网络请求错误、前端逻辑异常等。

　　sentry 可以监控前端应用的线上运行，当用户在使用应用的过程中遇到应用报错时（有时页面可能没反应，但报错会在控制台出现），它可以及时将错误信息上报给sentry的服务端程序，服务端程序可以通过开发者自定义的方式（比如，邮件、钉钉等）及时向开发者报警，并给出详细的错误信息。

　　它还有其它一些丰富的报表功能，以及与常用的工作流工具的协作（分配给成员处理）等

二、关于 sentry 的几个概念

　　使用 Sentry，需要弄清楚几个概念：

1、event：直译是”事件”，是可操作数据的基本单位。每一次日志输出就产生一个event，event并不一定就是错误，如果日志记录级别设置很低，那么后台会产生很多的event，所以正确的设置日志级别很重要。

 2、issue：直译是”工单”或者”问题”，是同一类event的聚合。某一个错误可能因为重复执行而被记录多出，在sentry会自动聚合到一起，方便处理，通常我们操作的对象就是issue

3、DSN：即客户端密钥，用来进行客户端和服务器的通信

　　DSN是一个 url，包含一个公钥一个私钥，项目标记和服务器地址，比如：https://1703147af2094458bevb1bfadcfa1c2:7e00a1d4cbd745c0b780451c3586d7f4@sentry.io/1545

　　这类DSN是私密的，还有一类是非私密的，在Sentry后台中显示为DSN(public)，给前端项目使用

4、Raven：整个错误日志监控系统包括客户端和服务端，Sentry是服务端的名称，客户端名称是Raver，需要两者配合才能工作

三、部署注意事项

　　尽管 sentry 官方提供了可以在线使用的服务，但官方服务具有很多限制，有些服务则需要付费使用。好消息是，sentry 是一个开源软件，如果自己部署的话，就可以使用它的完整功能了。

1、首先了解下私有化部署所需环境：要私有化部署 sentry，需要一台自己的服务器，对于服务器的要求有：

• 安装 Git
• 安装 docker，版本号大于19.03.6
• 安装 docker-compose，版本号大于1.28.0
• 最好是 4 核 CPU 和 8GB RAM
• 磁盘剩余空间不得小于20GB。

3、以上硬件要求是需要注意的，其实还有一点 arm 机器估计是不支持的，sentry 需要支持 sse 4.2 指令集，这里给一个判断机器是否支持 sse 4.2 指令集的命令

# 检查机器是否支持 sse 4.2 指令集
grep -q sse4_2 /proc/cpuinfo && echo "SSE 4.2 supported" || echo "SSE 4.2 not supported"

　　我最开始在公司的机器上安装 git、docker、docker-compose 均成功后，再安装 sentry 就报错了机器不支持 sse 4.2 指令集，公司的机器都是 arm 机器。故换了自己的 x86_64 机器重新安装，最后又是在安装 sentry 时报错需 4 核但只发现 2 核，最少需 3800M 但只有 3627M。所以私有化部署的话一定要提前搞清楚硬件要求

3、私有化部署官方推荐方式是通过 Docker 和 Docker Compose 部署，具体参考官方文档：https://develop.sentry.dev/self-hosted/

4、部署完成后访问 IP:9000 即可访问web，这里建议把部署地址用 nginx 代理来解决跨域问题

5、使用：先设置语言和时区，点击头像User settings - Account Details的相应菜单设置，刷新后生效

四、私有化部署步骤

1、通过Docker安装Sentry（CentOS7）故需先安装 docker，可见之前文章

// 安装Docker的依赖
yum install -y yum-utils device-mapper-persistent-data lvm2

// 安装Docker-CE
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
yum install docker-ce

// 启动Docker后台服务
systemctl start docker

// 测试运行
docker run hello-world

// 设置开机启动
systemctl enable docker

2、安装docker-compose：见之前文章

3、安装 sentry

// 安装git
yum install git

// 下载onpremise，最好从官方仓库去拿地址
git clone https://github.com/getsentry/onpremise.git

// 安装
cd onpremise
./install.sh

4、启动

docker-compose up -d

　　启动成功之后我们通过docker ps命令可以看到、Sentry以及相关依赖已经启动完成，监听端口9000已经正常、这时我们就可以通过浏览器去访问Sentry了。打开浏览器输入IP地址+端口号9000就可以访问Sentry登录界面了。

五、使用 webpack 插件上传 sourceMap

　　为了具体定位报错内容，此时便需要上传sourceMap到sentry平台，这里有两种方式 sentry-cli 和 sentry-webpack-plugin 方式，这里为了方便采用webpack方式。

1、设置 token 令牌：sentry 后台配置 authToken 用于上传 sourcemap 使用，如下图注意勾选

2、下载插件：npm install --save-dev @sentry/webpack-plugin

　　要是报错的话，换成国内的就行了：cnpm install --save-dev @sentry/webpack-plugin

3、然后在根目录下新建 .sentryclirc

[defaults]
### 你的域名
defaults.url='http://localhost:9000'
### 组织团队名默认是 sentry
org=sentry
### 项目名称
project=myapp
### 步骤1创建的
[auth]
token=1234

4、配置插件

const SentryWebpackPlugin = require('@sentry/webpack-plugin');
if (process.env.NODE_ENV !== 'development') { // 注意只在生成环境开启，不然npm run dev也会上传
    new SentryWebpackPlugin({
      release: Date.now(), // 唯一标识，可以用其他的比如 hash
      include: './dist', // 要上传的文件夹
      ignoreFile: '.sentrycliignore', // 可不要
      ignore: ['node_modules', 'config-overrides.js'], 
      configFile: '.sentryclirc' // 默认同级，如果不一样需要用node path模块处理一下
    });
  }

5、然后运行 npm run build

Creating an optimized production build...
> Found 10 release files
> Analyzing 10 sources
> Rewriting sources
> Adding source map references
> Bundled 10 files for upload
> Uploaded release files to Sentry
> File upload complete

　　这样就配置成功了

6、注意：@sentry/webpack-plugin在上传后不会删除sourceMap，需要在构建之后删除 .map 代码

// package.json：
"scripts": {
    "build": "vue-cli-service build && rm -fr ./dist/js/*.map"
}