vue 项目实战 Sentry 笔记

一、事情是从这里开始的：

最近开发的功能排期紧张。发版后的线上报了几个问题，手动定位线上问题比较困难和麻烦。

于是要在项目中部署一套监控系统，选择了比较流行的 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