一、事情是从这里开始的：
最近开发的功能排期紧张。发版后的线上报了几个问题，手动定位线上问题比较困难和麻烦。
于是要在项目中部署一套监控系统，选择了比较流行的 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