一、事情是从这里开始的:
最近开发的功能排期紧张。发版后的线上报了几个问题,手动定位线上问题比较困难和麻烦。
于是要在项目中部署一套监控系统,选择了比较流行的 Sentry 方案。
二、Sentry 安装相关
Sentry 是一套开源的实时的异常收集、追踪、监控系统。它支持多种语言的项目,比较容易配置,且支持后续的错误分级,性能监控等服务,除了部署服务,对前端开发人员较为友好。
本次开发基于 docker 环境部署,如果对 docker 了解比较少,可以过一下第三节的简介,有个基本的印象。
Sentry 安装流程
1、前置准备
建议 4u8g 以上的 Linux 服务器来执行(最低需要4g),考虑到后期扩展,环境大一点会方便。
windows 和 mac 系统可以安装对应的虚拟机来执行。
2、环境准备
Sentry 的管理后台是基于 Python Django 开发的。这个管理后台由背后的 23 个服务支撑运行。Sentry 提供用 docker-compose 来帮助我们一键部署;
所以我们需要在服务器上预置 docker 和 docker-compose 环境。此处用的 centos7 自带的 yum 包管理工具下载安装 docker。
注意事项
国内服务器连接不上 github,无法通过 curl 直接下载 docker-compose
同样可以本地下载完成之后,scp或者xftp发送到服务器,笔者安装了py3和pip3
developer.aliyun.com/article/640… 加

stackoverflow.com/questions/6…
3、开始下载
git clone https://github.com/getsentry/onpremise
复制代码
因为国内网站可能访问不到 github,此次可以自己先下载下来,然后通过 scp 指令,xftp 工具或者搜一个国内的代码源下载(不一定最新)
4、安装
安装前建议配置 docker 的镜像源,如163的 docker 镜像源,之前用的阿里云的源拉取 debian 的镜像网络超时了
cd onpremise
./install.sh
复制代码
执行 install.sh 是执行安装服务启动相关流程
过程中会提示注册管理员,此处可以注册,也可以后续注册;
// 后续注册管理员流程
docker-compose run --rm web createuser --superuser
复制代码
5、启动项目执行
在 docker-compose 启动服务
docker-compose up -d
复制代码
三、项目接入 Sentry
1、进入平台(Sentry 用的9000端口)
2、创建项目
3、接入项目
这里提供了 vue2 和 vue3 的部署流程
4、接入项目之后,检测报错
5、source map上传
- source-map 是一个文件,可以让已编译过的代码可以映射出原始源;
- source-map 就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
- 用法:
生成 source-map
转化后的代码最后加一行注释
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
复制代码
6、上传 source-map
sentry-cli 手动上传
服务器上面通过安装 @sentry-cli
install -g --unsafe-perm=true --allow-root @sentry/cli sentry-cli -h
// 先通过sentry-cli登录
sentry-cli --url http://127.0.0.1:9000 login
// 然后输入token,Settings -> Account -> API -> Auth Tokens
// 然后~/.sentryclirc 文件会被创建,上传时候先判断项目根目录有没有此配置,若没有,则读取~/.sentryclirc
// 通过下面的命令可以上传sourcemap文件到sentry服务器
sentry-cli releases files 0.0.1 upload-sourcemaps --url-prefix '~/' './build'
复制代码
通过 webpack 插件上传 source-map
- 下载插件
yarn add @sentry/webpack-plugin -D - 配置 webpack 插件
configureWebpack: config => {
// console.log('process.env.NODE_ENV is',process.env.NODE_ENV)
if (process.env.NODE_ENV !== 'development') {
config.devtool = 'source-map'
config.plugins.push(
new SentryCliPlugin({
urlPrefix: '~/',
include: './dist',
ignore: ['node_modules'],
release: 'x.x.x',
token: xxx,
org:xxx,
project:xxx,
url:xxx
}),
)
}
},
复制代码
- 自动上传脚本,通过 yarn build,可以自动上传 source-map
7、查看 issues
正确上传过 source-map 的项目,可以看到很清晰的报错位置
注意事项:
当本地调试的时候,用 yarn dev 来调试 source-map 功能,如不能正确对应。需要将 dist 目录放在服务器下,如在 dist 目录下启动 http-server 服务来使用
此外还可以通过 BreadCrumbs 功能查看,报错前发生了什么操作
8、查看 Performance
Sentry.init() 中,new Integrations.BrowserTracing() 的功能是将浏览器页面加载和导航检测作为事物,并捕获请求,指标和错误。
- TPM: 每分钟事务数
- FCP:首次内容绘制(浏览器第第一次开始渲染 dom 的时间点)
- LCP:最大内容渲染,代表 viewpoint 中最大页面元素的加载时间
- FID:用户首次输入延迟,可以衡量用户首次与网站交互的时间
- CLS:累计布局偏移,一个元素初始时和消失前的数据
- TTFB:首字节时间,测量用户浏览器接收页面的第一个字节的时间(可以判断缓慢来自网络请求还是页面加载问题)
- USER:uv 数字
- USER MISERY: 对响应时间难以忍受的用户指标,由 sentry 计算出来,阈值可以动态修改
四、进阶用法
1、识别用户
在上传的 issues 里面,我们可以借助 setUser 方法,设置读取存在本地的用户信息。(此信息需要持久化存储,否则刷新会消失)
2、手动上传错误
Sentry 可以手动捕获所有异常,但是无法对这些异常进行分级
Sentry 内置了一些错误等级,我们手动上报的时候,可以添加错误等级,以供后续分类
Sentry.captureMessage("Something went wrong");
Sentry.captureException(err, {
level: Sentry.Severity.Warning,
});
复制代码
3、错误边界
定义错误边界,当组件报错的时候,可以上报相关信息
使用 Sentry.ErrorBoundary。加了错误边界,可以把错误定位到组件上面。
4、rrweb 重播
安装 @sentry/rrweb rrweb
yarn add @sentry/rrweb rrweb
import SentryRRWeb from '@sentry/rrweb';
Sentry.init({
Vue,
dsn: "xxx",
integrations: [
new Integrations.BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
tracingOrigins: ["localhost", "my-site-url.com", /^//],
}),
new SentryRRWeb({
checkoutEveryNms: 10 * 1000, // 每10秒重新制作快照
checkoutEveryNth: 200, // 每 200 个 event 重新制作快照
maskAllInputs: false, // 将所有输入内容记录为 *
}),
],
tracesSampleRate: 1.0,
release: 'x.x.x',
logErrors: true
});
复制代码
在报错后,可以录屏播放错误发生的情况
5、手动设置报警
设置报警规则,当我们某些情况,如 issues,performance 超过我们设置的阈值,会触发 alert。
我们可以通过提醒等功能来帮助我们即时发现问题。
附录:Docker 简介
1、虚拟化技术
虚拟化技术是将计算机物理资源进行抽象,转化为虚拟的计算机资源的一种技术;
- 通过这个技术,可以屏蔽计算机硬件差异,快速适配不同物理机,虚拟化技术就是通过自身适配不通平台,然后抽象出统一的接口,实现的跨平台运行。
- 可以隔离计算机资源,提高计算机资源的使用率。
- 安在不同的虚拟机中,可以避免不通的程序冲突,等问题。
2、容器化技术
- 容器化技术是更高级的虚拟机技术,
java 执行器,v8 引擎也是虚拟技术的体现,它将执行环境和物理机隔离开来,让代码可以脱离平台的束缚; - 容器化是由操作系统提供的一些API,可以让程序之间互不干扰。因为这个独立的环境像是一个容器,所以称为容器技术。
容器化技术是操作系统直接提供的API。而虚拟机是通过程序做了一层代理和转发,转发并且处理虚拟机的指令,会有一定的性能问题。
3、docker
一家公司用go实现的容器引擎软件,提高服务部署效率;
- 更快更一致的交付服务,很容易实现 CICD
- 跨平台部署,动态扩容;
- 隔离应用,资源更充分;
4、docker-compose
- docker-compose 是一个对容器组合进行管理的工具;
- docker 建议每个容器运行一个软件,很多系统需要运行多个软件才可以使用,处理各个容器依赖关系比较复杂,docker-compose 可以提供帮助;
- dockerfile 可以将一个容器环境固定下来,docker-compose 通过docker-compose.yml 的可以将多个容器固定下来;
- 常用指令有:(-d 为了让程序后台持久化运行)
docker-compose up -d
docker-compose down