前端错误监控警报系统Sentry基本使用实践

古兰精
802 阅读6分钟

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第11篇文章，点击查看活动详情”

最近在做的一个服务平台的项目上加上了错误监控 Sentry，所以记录一下实践中的一些主要的点。

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

当生产环境中产生了一个 bug 时，如何做到迅速报警，找到问题原因并修复？此时我们就需要一个高效的错误监控系统。后端有日志，有各种强大的监控服务，然而大多数情况只能记录接口被请求之后所发生的错误。随着 Web 应用越来越强大，客户端的代码也就越来越复杂，很多不可预期错误发生在用户端，并没有经过请求到达后台，这个时候前端错误监控就显得不可或缺了。

Sentry 是什么

如果我们的前端应用是服务端渲染 SSR 的应用，前端有日志，那么是可以利用三方的日志监控（如阿里云、华为云的），但是如果是 SPA 的单页应用的话，日志打印在浏览器上，这些三方日志监控也是无法使用的，所以就需要使用到 Sentry 这种错误警报系统。

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

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

部署注意事项

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

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

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

2、以上硬件要求是需要注意的，其实还有一点：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 部署，具体参考官方文档：develop.sentry.dev/self-hosted…

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

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

图片.png

私有化部署步骤

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

启动成功之后我们打开浏览器输入IP地址+端口号9000就可以访问Sentry登录界面了。

使用 webpack 插件上传 sourceMap

前端代码一般都是打包压缩过的，所以线上报错，你不好定位问题。为了具体定位报错内容，此时便需要上传sourceMap 到 Sentry 平台，这里有两种方式 sentry-cli 和 sentry-webpack-plugin 方式，这里为了方便采用 webpack 方式。

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

图片.png

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=***

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"
}

Sentry 是存在 链路追踪 的，即：每个点击，点击的哪个元素，会有 class 类名之类的，都可以在一条线下来的展示在（忘记截图了），所以用来分析用户操作的行为去定位错误，还是挺方便的。

在使用过程中主要遇到这些问题点，以后遇到再慢慢增加吧

avatar
文章
阅读
粉丝