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

一、Sentry简介

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

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

二、环境搭建

2.1 官网Sentry服务

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

2.2 私有化部署

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

2.3 装置docker

首先，咱们在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。

2.3.1 装置docker-compose

接下来，咱们持续装置插件。首先，咱们须要装置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

2.4 一键部署

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

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

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

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

cd onpremise


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

装置的过程如下图所示。

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

2.5 启动我的项目

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

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

2.6 拜访我的项目

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

2.7 设置语言和时区

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

三、Vue接入Sentry

3.1 创立Vue我的项目

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

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

3.2 接入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控制台捕捉谬误。

3.3 上传sourceMap到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
    )
}

3.4 Performance剖析

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

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

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

四、React接入Sentry

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

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

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

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

4.1 接入sentry

首先，咱们在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。

4.2 上传sourcemap

首先，在根目录创立配置文件 .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上传到生产环境，记得删除。

五、其余用法

5.1 辨认用户

在上传的 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

5.2 谬误边界

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

5.3 rrweb谬误复现

应用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数据。

5.4 手动报警提醒

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

关于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 手动报警提醒

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于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 手动报警提醒

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复