浅析前端错误监控警报系统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"
}

 

posted @   古兰精  阅读(5774)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
历史上的今天:
2021-05-11 浏览器工作原理:浅析WebComponent - 像搭积木一样构建Web应用
2021-05-11 浏览器工作原理: 渐进式网页应用PWA解决了 Web 应用的哪些问题
2018-05-11 Node.js:Express 框架
2018-05-11 Node.js:Web模块、文件系统
2018-05-11 Node.js:get/post请求、全局对象、工具模块
2018-05-11 浏览器工作原理:浅析垃圾回收 - 垃圾数据是如何自动回收的
2018-05-11 echarts使用记录(二)legend翻页,事件,数据集,设置y轴最大/小值,让series图形从右侧出往左移动
点击右上角即可分享
微信分享提示