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

<code>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，继续安装，中间需要设置管理员帐号和密码，这里设置的帐号和密码要记住，后面登录需要用到。安装过程比较慢，要多等一会。

安装结束后，执行下面命令启动服务，启动也比较慢。

<code>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.  安装依赖

<code> # 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>code>

</div>

</template>

<script>

export default {

methods:{

sentryClicked(){

console.log('sentryClicked: ', sentryTest);

}

}

}

</script>

在项目页面，我们可以看到，在浏览器控制台，确实有报错信息生成，如下图所示：

然后，我们到Sentry在线系统查看，确实有收到报错信息，如下图所示：

里面指明了报错原因是sentryTest is not defined，然后还提交了用户的IP、浏览器版本以及版本号、平台系统等等信息，便于分析异常错误。

上传 SourceMap 文件

<code> 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在线系统：

<code> 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 | 微信开放社区