Sentry介绍
Sentry 是一套开源的实时的异常收集、追踪、监控系统。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成,通过 Sentry SDK 的配置,还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作,便于后续异常追踪。异常数据上报到数据服务之后,会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中
● Github: https://github.com/getsentry/sentry
● 文档 Sentry Docs | Application Performance Monitoring & Error Tracking Software
支持如下语言
sentry功能架构
sentry核心架构
Sentry私有化部署
Sentry 的管理后台是基于 Python Django 开发的。这个管理后台由背后的 Postgres 数据库(管理后台默认的数据库)、ClickHouse(存数据特征的数据库)、relay、kafka、redis 等一些基础服务或由 Sentry 官方维护的总共 23 个服务支撑运行。可见的是,如果独立的部署和维护这 23 个服务将是异常复杂和困难的。幸运的是,官方提供了基于 docker 镜像的一键部署实现 getsentry/onpremise
sentry 本身是基于 Django 开发的,而且也依赖到其他的如 Postgresql、 Redis 等组件,所以一般有两种途径进行安装:通过 Docker 或用 Python 搭建
环境准备
● Docker 19.03.6+
● Docker-Compose 2.19.0+
● 4 CPU Cores
● 16 GB RAM
● 20 GB Free Disk Space
安装 Docker
yum install -y yum-utils device-mapper-persistent-data lvm2
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum -y install docker-ce-20.10.9 docker-ce-cli-20.10.9
启动docker
systemctl start docker
systemctl enable docker
安装 Docker-Compose
通过访问 https://github.com/docker/compose/releases/latest 得到最新的 docker-compose 版本(例如:1.23.2),然后执行一下命令安装 docker-compose
# 下载最新版本的 docker-compose 到 /usr/bin 目录下
curl -L https://github.com/docker/compose/releases/download/v2.27.1/docker-compose-`uname -s`-`uname -m` -o /usr/bin/docker-compose
# 给 docker-compose 授权
chmod +x /usr/bin/docker-compose
查询docker-compose版本
docker-compose -v
部署Sentry
部署
yum -y install git
git clone https://github.com/getsentry/onpremise
cd onpremise/
./install.sh
选择n,继续安装,中间需要设置管理员帐号和密码,这里设置的帐号和密码要记住,后面登录需要用到。安装过程比较慢,要多等一会。
安装结束后,执行下面命令启动服务,启动也比较慢。
docker-compose up -d
▶ Setting up GeoIP integration ...
Setting up IP address geolocation ...
Installing (empty) IP address geolocation database ... done.
IP address geolocation is not configured for updates.
See https://develop.sentry.dev/self-hosted/geolocation/ for instructions.
Error setting up IP address geolocation.
启动成功后,访问9000端口,输入刚才设置的帐号和密码登录。
如果想停止sentry服务,执行:
docker-compose down
设置语言
登录之后,点开用户设置,可以设置语言为中文。
小结
如果不想自己部署,可以到sentry saas平台注册一个帐号,不过只能免费试用30天。
新建前端项目
前端项目集成sentry
Vue 项目引入 Sentry
Vue | Sentry for Vue
项目创建完成后,会跳转至Vue配置的说明文档,主要是Vue项目如何引入Sentry的一些内容,内容如下所示:
1. 安装依赖
# Using yarn
yarn add @sentry/vue @sentry/tracing
# Using npm
npm install --save @sentry/vue @sentry/tracing
2. 在main.js里引入
import Vue from "vue";
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";
Sentry.init({
Vue,
dsn: "http://cd7f733c2e1e4641bdeb11ba0811d9aa@123.11.22.133:211/12",
integrations: [new Integrations.BrowserTracing()],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// 上报console异常信息
logErrors: true
});
此时,只要项目正常部署在线上,打开项目,然后打开浏览器控制台,查看Network列表,会发现很多类似这样的请求,并没有报错,这就意味着当前已经正常上报到 Sentry 系统了,如下所示:
?sentry_key=cd7f733c2e1e4641bdeb11ba0811d9aa&sentry_version=7
异常报错示例
为了真实验证Sentry的功能,现以一个真实场景来演示,在项目中添加一个按钮,然后设置点击事件之后,触发打印console,sentryTest并未定义,所以会报错,代码如下所示:
<template>
<div>
<el-button @click="sentryClicked">Sentry测试</el-button>
</div>
</template>
<script>
export default {
methods:{
sentryClicked(){
console.log('sentryClicked: ', sentryTest);
}
}
}
</script>
在项目页面,我们可以看到,在浏览器控制台,确实有报错信息生成,如下图所示:
然后,我们到Sentry在线系统查看,确实有收到报错信息,如下图所示:
里面指明了报错原因是sentryTest is not defined,然后还提交了用户的IP、浏览器版本以及版本号、平台系统等等信息,便于分析异常错误。
上传 SourceMap 文件
通常Sentry在线系统上面的信息,也是可以排查解决BUG的,比如sentryTest is not defined,我们只需要在项目中搜索sentryTest就可以定位到代码报错的位置,但是如果是一些比较通用的,或者信息比较含糊的,是没办法精准定位代码位置的,这个时候,就可能有想法了,怎么让才能在Sentry在线系统看到,到底是执行到哪一步的时候,报错了呢?
这就是本节所需要实现功能,这就需要SourceMap文件,什么是SourceMap文件呢?
因为使用webpack打包之后,所有代码都压缩在一起,很难从中定位到异常代码的位置,而SourceMap就是源码,有了它,就可以定位到具体位置,所以需要提供SourceMap文件到Sentry在线系统。
首先,需要将vue项目下config/index.js里的productionSourceMap设置为true,然后运行npm run build命令,在生成的dist/static/js里就会发现很多后缀为.map的文件,如下图所示:
然后我们需要把.map文件上传到Sentry在线系统,具体步骤如下:
1. 登录Sentry在线系统,在终端输入如下:
sentry-cli --url http://123.11.22.133:211/ login
然后会提示输入token,如下所示:
dstweihao@weihao-mac-mini vue % sentry-cli --url http://123.11.22.133:211/ login
This helps you signing in your sentry-cli with an authentication token.
If you do not yet have a token ready we can bring up a browser for you
to create a token now.
Sentry server: 123.11.22.133
Open browser now? [y/n] n
Enter your token:
token是在Sentry在线系统生成的,如下图所示:
这时,只要复制token到终端,就可以完成登录流程了,如下所示,就是成功登录了Sentry在线系统:
Enter your token: 4e6488262fb849ef93c6217ac8bc8e9a2d635572eb584fa3b69b859e0edc5104
Valid token for user test001
Stored token in /Users/weihao/.sentryclirc
dstweihao@weihao-mac-mini vue %
上传SourceMap到Sentry在线系统
登录成功之后,就需要将 SourceMap 文件上传到 Sentry 在线系统,首先,需要在项目里新建一个.sentryclirc文件,里面的内容,如下所示:
[defaults]
url=http://123.11.22.133:211/
org=dst
project=test
[auth]
token=4e6488262fb849ef93c6217ac8bc8e9a2d635572eb584fa3b69b859e0edc5104
然后使用以下命令:
sentry-cli releases -o dst -p test files test@1.0.0 upload-sourcemaps './dist/static/js/' --url-prefix '~/test/js'
这里需要对该命令一些参数说明一下:
● dst:组织名
● test:项目名
● 1.0.0:版本号,需和 main.js 里的release: 'test@1.0.0'一致
● ./dist/static/js/:项目打包生成的dist里.map文件所在目录
● ~/test/js:如果部署在服务器上面,不是部署在主目录,而是在 test 文件夹下面,那就需要加上
在终端显示如下,就表示已经上传成功:
dstweihao@weihao-mac-mini vue % sentry-cli releases -o dst -p test files 1.0.0 upload-sourcemaps './dist/static/js/' --url-prefix '~/test/js'
> Found 20 release files
> Analyzing 20 sources
> Analyzing completed in 0.238s
> Rewriting sources
> Rewriting completed in 0.252s
> Adding source map references
> Bundling files for upload... ~/test/js/vendor.331b4cf7bdabb46a7655.js.map
> Bundling completed in 0.373s
> Optimizing completed in 0.01s
> Uploading completed in 0.337s
> Uploaded release files to Sentry
> Processing completed in 0.114s
> File upload complete (processing pending on server)
Source Map Upload Report
Minified Scripts
~/test/js/0.5578cfbb7e2e6688ddf5.js (sourcemap at 0.5578cfbb7e2e6688ddf5.js.map)
~/test/js/1.08ce936a2efe46fada3a.js (sourcemap at 1.08ce936a2efe46fada3a.js.map)
~/test/js/2.21a7baf07c2e2f7e0e2e.js (sourcemap at 2.21a7baf07c2e2f7e0e2e.js.map)
~/test/js/3.31b60f7af161be6ebdd9.js (sourcemap at 3.31b60f7af161be6ebdd9.js.map)
~/test/js/4.fb6e7da7da26fad2df3a.js (sourcemap at 4.fb6e7da7da26fad2df3a.js.map)
~/test/js/5.ee4c344db81fc2458f9c.js (sourcemap at 5.ee4c344db81fc2458f9c.js.map)
~/test/js/6.9079b1090416a666a327.js (sourcemap at 6.9079b1090416a666a327.js.map)
~/test/js/app.ad01bb777553f9efe703.js (sourcemap at app.ad01bb777553f9efe703.js.map)
~/test/js/manifest.380384094e7763635655.js (sourcemap at manifest.380384094e7763635655.js.map)
~/test/js/vendor.331b4cf7bdabb46a7655.js (sourcemap at vendor.331b4cf7bdabb46a7655.js.map)
Source Maps
~/test/js/0.5578cfbb7e2e6688ddf5.js.map
~/test/js/1.08ce936a2efe46fada3a.js.map
~/test/js/2.21a7baf07c2e2f7e0e2e.js.map
~/test/js/3.31b60f7af161be6ebdd9.js.map
~/test/js/4.fb6e7da7da26fad2df3a.js.map
~/test/js/5.ee4c344db81fc2458f9c.js.map
~/test/js/6.9079b1090416a666a327.js.map
~/test/js/app.ad01bb777553f9efe703.js.map
~/test/js/manifest.380384094e7763635655.js.map
~/test/js/vendor.331b4cf7bdabb46a7655.js.map
zlgweihao@zlgweihao-mac-mini vue %
此时,我们可以在 Sentry 在线系统上面查看到上传的 sourcemap 文件,如下图所示:
sourceMap 只需上传到 sentry,不需要上传到线上环境
可以根据打包和发布的时机,在发布到线上前,将 sourceMap 文件删除。或者上传到服务器时,过滤掉 .map 文件。
对于上面遇见的问题,其实仔细阅读文档都可以避免。开发时,可以参考并借鉴写得比较好的同事的代码,但不能太过盲目,需要有自己的见解和想法。同时也需要在使用过后,好好地去了解一下它的具体实现。做得好,看能否做得更好。
以上如有不到之处,欢迎发消息一起交流探讨。
小程序集成sentry
Sentry 小程序 SDK | 微信开放社区