关于javascript:基于Sentry的前端性能监控平台搭建与应用

Sentry 是一套开源的实时异样收集、追踪、监控零碎，反对简直所有的语音和平台。

这套零碎由对应各种语言的 SDK 和一套宏大的数据后盾服务组成，通过 Sentry SDK 的配置，能够上报谬误关联的版本信息、公布环境。同时 Sentry SDK 会主动捕获异样产生前的相干操作，便于后续异样追踪。最初，异样数据上报到数据服务之后，会通过过滤、要害信息提取、演绎展现在数据后盾的 Web 界面中，性能架构如下图所示。

Sentry 我的项目是开源的，然而也提供付费版本，省去本人搭建和保护 Python 服务的麻烦。本人搭建的话，灵活性绝对较高，能够做很多的定制化开发。首先，咱们关上并登录官网注册账号。

Sentry 的治理后盾是基于 Python Django 开发的。同时，这个治理后盾须要用到 Postgres 数据库（治理后盾默认的数据库）、ClickHouse（存数据特色的数据库）、relay、kafka、redis 等一些根底服务或由 Sentry 官网保护的总共 23 个服务撑持运行。如果独立的部署和保护这 23 个服务将是异样简单和艰难的，侥幸的是，官网提供了基于 docker 镜像的一键部署实现 getsentry/onpremise。所以，在私有化部署之前，咱们须要在本地搭建 Docker 和 Python 环境。须要阐明的是，上面的所有私有化部署都是基于 Linux 零碎环境的。上面是装置所需的一些软硬件环境。

Docker 19.03.6+
Docker-Compose 1.28.0+
4 CPU Cores
8 GB RAM
20 GB Free Disk Space

首先，咱们在 cenos 服务器上安装一些工具软件，装置的命令如下。

yum install yum-utils device-mapper-persistent-data lvm2 -y

而后，咱们将镜像源设置阿里的。

yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

接下来，咱们应用 yum 命令装置 docker。

yum install docker-ce docker-ce-cli containerd.io -y

而后，应用如下命令启动 docker。

systemctl start docker
# 设为开机启动
systemctl enable docker

此处有一个小的 Tip：在后续部署的过程中，须要拉取大量镜像，官网源拉取较慢，能够批改 docker 镜像源。首先，登录阿里云官网，关上阿里云容器镜像服务。点击左侧菜单最上面的镜像加速器，抉择 Centos。

接下来，咱们持续装置插件。首先，咱们须要装置 docker-compose

# 应用国内源装置
sudo curl -L "https://get.daocloud.io/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

设置 docker-compose 执行权限。

chmod +x /usr/local/bin/docker-compose

再创立一个软链接。

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

最初，测试一下是否装置胜利。

$ docker-compose --version


docker-compose version 1.22.0, build f46880fe

git clone https://github.com/getsentry/onpremise

在 onpremise 的根门路下有一个 install.sh 文件，只须要执行此脚本即可实现疾速部署，脚本运行的过程中，大抵会经验以下操作：

环境查看
生成服务配置
docker volume 数据卷创立（可了解为 docker 运行的利用的数据存储门路的创立）
拉取和降级根底镜像
构建镜像
服务初始化
设置管理员账号（如果跳过此步，可手动创立）

而后在 onpremise 我的项目中执行一键部署命令

cd onpremise


# 间接运行 ./install.sh 将 Sentry 及其依赖都通过 docker 装置
./install.sh

装置的过程如下图所示。

设置管理员账号（如果跳过此步，可手动创立）。

在执行完结后，会提醒创立结束，运行 docker-compose up -d 启动服务。

查看服务运行状态应用命令 docker-compose ps。

所有服务都启动胜利后，就能够拜访 sentry 后盾了。后盾默认运行在服务器的 9000 端口，登录的账户明码就是装置时设置的。

部署胜利之后，咱们能够进行一些设置。点击头像【User settings】-【Account Details】来设置语言何时区等。

首先，应用 create 命令创立 Vue 我的项目，如下所示。

npm i @vue/cli -g
# 初始化 vue2 我的项目
vue create vue2-sentry

首先，在我的项目中装置 sentry 插件。

# Using npm
npm install --save @sentry/vue @sentry/tracing

而后，在入口文件 main.js 中初始化 sentry。

import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import {Integrations} from "@sentry/tracing";


Vue.use(Router);


const router = new Router({// ...});


Sentry.init({
  Vue,
  dsn: "http://xdsdfafda21212@119.75.24.41:9000/2",
  integrations: [
    new Integrations.BrowserTracing({routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^//],
    }),
  ],
  // 不同的环境上报到不同的 environment 分类
  // environment: process.env.ENVIRONMENT,
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  //  高访问量利用能够管制上报百分比
  tracesSampleRate: 1.0,
  release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都 npm run build 上传都批改版本号
});


// ...


new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

接着，咱们手动模仿一个异样，而后就能够在 sentry 控制台捕捉谬误。

为了不便查看具体的报错内容，咱们须要上传 sourceMap 到 sentry 平台。个别有两种上传形式：sentry-cli 和 sentry-webpack-plugin。source-map 是什么呢？

是一个文件，能够让已编译过的代码能够映射出原始源;
是一个信息文件，外面贮存着地位信息。也就是说，转换后的代码的每一个地位，所对应的转换前的地位。

在正式上传之前，咱们须要在 Vue 我的项目中集成 webpack-plugin 插件，装置的命令如下：

npm i @sentry/webpack-plugin -D

接着，咱们批改 vue.config.js 配置文件中的配置，示例如下。

const SentryCliPlugin = require('@sentry/webpack-plugin')


module.exports = {
  // 打包生成 sourcemap，打包完上传到 sentry 之后在删除，不要把 sourcemao 传到生产环境
  productionSourceMap: process.env.NODE_ENV !== 'development',
  configureWebpack: config=> {if (process.env.NODE_ENV !== 'development') {
      config.plugins.push(
        new SentryCliPlugin({
          include: './dist/js', // 只上传 js
          ignore: ['node_modules', 'webpack.config.js'],
          ignoreFile: '.sentrycliignore',
          release: process.env.SENTRY_VERSION || '0.0.1', // 版本号
          cleanArtifacts: true, 
          urlPrefix: '~/js', // 线上对应的 url 资源的相对路径 
        }),
      )
    }
  },
}

为了可能失常的进行上报，咱们须要在 sentry 后盾获取 TOKEN。

而后再配置 org 组织名称。并在我的项目根目录创立.sentryclirc 文件，配置如下内容。

# .sentryclirc


[auth]
token= 填入控制台创立的 TOKEN


[defaults]
url=https://sentry.io/
org=sentry
project=vue

url：sentry 部署的地址，默认是 https://sentry.io/
org：控制台查看组织名称
project：项目名称
token：生成 token 须要勾选 project:write 我的项目写入权限

当咱们再次执行 npm run build 我的项目打包命令的时候，就能够把 js 下的 sourcemap 相干文件上传到 sentry。正确上传过 source-map 的我的项目，能够看到很清晰的报错地位。进入本地打包的 dist，http-server -p 6002 启动一个模仿正式环境部署的服务拜访看看成果。

须要阐明的是，记得不要把 sourcemap 文件传到生产环境，因为又大又不平安。通常，在生产环节删除 sourcemap 有如下三种形式。

// 形式 1
"scripts": {"build": "vue-cli-service build && rimraf ./dist/js/*.map"}


// 形式 2 独自生成 map
// vue.config.js
configureWebpack(config) {config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js')
     config.plugin('sentry').use(SentryCliPlugin, [{
        include: './dist/sourceMap', // 只上传 js
        ignore: ['node_modules'],
        configFile: 'sentry.properties',
        release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都 npm run build 上传都批改版本号
        cleanArtifacts: true, // 先清理再上传
    }])
}


// 形式 3 webpack 插件清理
$ npm i webpack-delete-sourcemaps-plugin -D
// vue.config.js
const {DeleteSourceMapsPlugin} = require('webpack-delete-sourcemaps-plugin')


configureWebpack(config) {
    config.plugin.push(new DeleteSourceMapsPlugin(), // 清理 sourcemap
    )
}

除了捕获谬误外，Sentry 还能够收集一些页面性能方面的数据。Sentry.init() 中，new Integrations.BrowserTracing() 的性能就是将浏览器页面加载和导航检测作为事物，并捕捉申请和其余性能指标。

常见的性能数据指标有如下一些：

TPM: 每分钟事务数；
FCP：首次内容绘制（浏览器第第一次开始渲染 dom 的工夫点）；
LCP：最大内容渲染，代表 viewpoint 中最大页面元素的加载工夫；
FID：用户首次输出提早，能够掂量用户首次与网站交互的工夫；
CLS：累计布局偏移，一个元素初始时和隐没前的数据；
TTFB：首字节工夫，测量用户浏览器接管页面的第一个字节的工夫（能够判断迟缓来自网络申请还是页面加载问题）；
USER：uv 数字；
USER MISERY: 对响应工夫难以忍受的用户指标，由 sentry 计算出来，阈值能够动静批改；

咱们应用 umi 我的项目接入 sentry 进行演示。首先，咱们创立一个基于 umi 的 React 我的项目。

mkdir umi-sentry && cd  umi-sentry
yarn create umi

而后，咱们在我的项目中装置 sentry 插件。

npm install --save @sentry/react @sentry/tracing

首先，咱们在 React 我的项目的入口文件 index.ts 中初始化 sentry，示例如下。

import * as Sentry from "@sentry/react";
import {BrowserTracing} from "@sentry/tracing";


Sentry.init({
  dsn: "https://xdfa@o1334810.ingest.sentry.io/121",
  integrations: [new BrowserTracing()],
  release: '0.0.1',
  tracesSampleRate: 1.0,
});

接着，咱们手动触发一个异样，看是否能正确上报到 sentry。

首先，在根目录创立配置文件 .sentryclirc，而后配置如下选项。

[auth]
token=TOKEN 控制台获取，TOKEN 须要勾选 project:write 写入权限


[defaults]
url=https://sentry.io/ // 默认地址
org= 组织名称，控制台获取
project=react // 项目名称

接着，咱们再装置 sourcemap 配置上传插件。

npm i @sentry/webpack-plugin -D

而后，在.umirc.ts 文件中增加如下配置。

const SentryPlugin = require('@sentry/webpack-plugin');


export default {
  devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval', // 开启 sourcemao
  chainWebpack(config, { webpack}){if (process.env.NODE_ENV === 'production'){// 当为 prod 时候才进行 sourcemap 的上传，如果不判断，在我的项目运行的打包也会上传
      config.plugin("sentry").use(SentryPlugin, [{ignore: ['node_modules'],
        include: './dist', // 上传 dist 文件的 js
        configFile: './sentryclirc', // 配置文件地址，这个肯定要有，踩坑在这里，忘了写导致始终无奈实现上传 sourcemap
        release:'1.0.1', // 版本号，本人定义的变量，整个版本号在我的项目外面肯定要对应
        deleteAfterCompile: true,
        urlPrefix: '~/' // js 的代码门路前缀
       }])
    }
  },
};

执行打包上传 sourcemap。进入 dist 文件，启动 http-server 本地服务模仿线上成果。

须要阐明的是，在执行 npm run build 打包操作后，不要把 sourcemap 上传到生产环境，记得删除。

在上传的 issues 外面，咱们能够借助 setUser 办法，设置读取存在本地的用户信息，比方。

Sentry.setUser({id: 'dfar12e31', // userId cookie.get('userId')
  email: 'test@qq.com', // cookie.get('email')
  username: 'poetry', // cookie.get('username')
})
Vue.prototype.$Sentry = Sentry

sentry 反对定义谬误边界，当组件报错的时候，能够上报相干信息。应用 Sentry.ErrorBoundary 增加谬误边界，能够把谬误定位到组件下面。

应用 rrweb，咱们能够复现谬误产生的门路。首先，咱们须要装置 rrweb 插件。

npm i @sentry/rrweb rrweb -S

而后，在入口文件中进行如下的一些配置。

import SentryRRWeb from '@sentry/rrweb';


// app/main.js
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, // 将所有输出内容记录为 *
      }),
    ],
    ... 
});

接着，咱们就能够在 sentry 后盾看到谬误的 json 数据。

有时候，咱们能够通过揭示等性能来帮忙咱们即时发现问题，可设置的揭示的选项也有很多。

关于javascript:基于Sentry的前端性能监控平台搭建与应用

一、Sentry 简介

二、环境搭建

2.1 官网 Sentry 服务

2.2 私有化部署

2.3 装置 docker

2.3.1 装置 docker-compose

2.4 一键部署

2.5 启动我的项目

2.6 拜访我的项目

2.7 设置语言和时区

三、Vue 接入 Sentry

3.1 创立 Vue 我的项目

3.2 接入 sentry

3.3 上传 sourceMap 到 sentry

3.4 Performance 剖析

四、React 接入 Sentry

4.1 接入 sentry

4.2 上传 sourcemap

五、其余用法

5.1 辨认用户

5.2 谬误边界

5.3 rrweb 谬误复现

5.4 手动报警提醒