分享
Sentry 系统搭建

Sentry

  • Sentry 支持 自托管(平台) | Sentry.io(官方平台)
  • Sentry 为一套开源的应用监控和错误追踪的解决方案。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成。应用需要通过与之绑定的 token 接入 Sentry SDK 完成数据上报的配置。通过 Sentry SDK 的配置，还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中。 在完成接入后我们就可以从管理系统中实时查看应用的异常，从而主动监控应用在客户端的运行情况。通过配置报警、分析异常发生趋势更主动的将异常扼杀在萌芽状态，影响更少的用户。通过异常详情分析、异常操作追踪，避免对客户端应用异常两眼一抹黑的状态，更高效的解决问题。

Sentry 自托管平台搭建流程

  1. 准备好一台8G内存 30G磁盘的 服务器
  2. 安装Docker Docker安装文档 (opens in a new tab)
  3. 安装DockerCompose Compose安装文档 (opens in a new tab)
  4. 安装最新版本的 Sentry Git (opens in a new tab)
  5. 然后在当前目录当中执行 ./install.sh 脚本会自动安装所有软件
  6. 安装完成后运行 docker-compose up -d 启动Sentry Sentry会挂载到9000端口

Sentry官方平台

  1. 可以注册Sentry账号、可以使用 Google、Github 等账号进行授权登录登录

Sentry.init 参数详解

  1. tracesSampleRate：收集频率
  2. release: (一般不需要配置) 版本号 (Webpack 插件会自动设置 window.SENTRY_RELEASE，因此您的Sentry.init调用不需要包含release值)
  3. dsn：DSN 告诉 SDK 将事件发送到哪里(服务器地址)。 sentry-1

Sentry 的 @sentry/webpack-plugin 参数详解

  1. validate 表示：验证上传 sourceMap 是否正确
  2. include 表示：指定路径让sentry-cli来检测有没有.map与.js文件，如果有就会上传到sentry。
  3. ignore 表示：忽略文件夹或文件不要被检测。 一般都会将node_moudules与vue.config.js忽略掉。
  4. url 表示：sentry管理系统的 根路径
  5. org 图解 sentry-4
  6. project 图解 sentry-5
  7. authToken 图解 sentry-2 sentry-3

Vue 项目 集成 Sentry

  1. 进入项目菜单栏，点击创建新项目 sentry-6
  2. Install Sentry SDK
yarn add @sentry/vue @sentry/tracing -S
  1. 在应用程序的入口 初始化 SentrySDK (main.js)
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: "", // 在创建完成项目后进入的文档中会有dsn路径  或   见下图查找
  tracesSampleRate: 1.0,
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
});
  1. 项目的根目录下新建.yarnrc 文件
# sentry-cli 很难安装到官方的 我们使用 taobao 镜像源
sentrycli_cdnurl: https://cdn.npm.taobao.org/dist/sentry-cli
  1. SourceMap上传 官网有两种形式，我们使用webpack插件的方式上传 安装下面插件
yarn add --dev @sentry/webpack-plugin
  1. 如果使用 vue-cli 脚手架的项目 请在 vue.config.js 中添加以下代码
module.exports = {
  productionSourceMap: true,
  // ...
  // 项目的其他配置 省略
}
  1. 如何使用webpack 搭建的脚手架项目 请在 webpack.config.js中添加以下代码
module.exports = {
  devtool: 'source-map',
  // ...
  // 项目的其他配置 省略
}
  1. 当开启 6\7 的sourcemap后 打包出来的js文件会出现 xxx.js.map sourcemap文件是不能上传到服务器的， 解决办法 当sourcemap文件上传到sentry服务器后 需要把dist文件中的 xxx.js.map 进行移除。
  • 在 package.json 中添加删除文件的命令 rimraf dist/js/*.map" 以下代码仅当参考
{
  "scripts": {
    "delete:map": "npx only-allow yarn && rimraf dist/js/*.map",
    "build:prod": "npx only-allow yarn && vue-cli-service build --mode production && yarn delete:map"
  }
}
  1. 以下是在 vue.config.js 中添加webpack插件的方法 (如果是webpack项目参考文档添加plugins)
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const dayjs = require('dayjs');
 
module.exports = {
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        org: "", // 见下图有如何获取组织名称
        include: "./dist",
        project: "", // 见下图有如何获取 project
        url: "http://monitor.digit-man.com:9000",
        ignore: ["node_modules", 'vue.config.js'],
        release: `${process.env.NODE_ENV}-${day().format('YYYY-MM-DD HH:mm')}`,
        authToken: "" // 见下图有如何在管理页面获取项目token
      })
    ]
  }
}
  • 至此Vue2.x 集成 Sentry监控平台全部完成

** sentry 清除数据命令

docker exec -it sentry-self-hosted_worker_1  sentry cleanup  --days 7 && docker exec -it sentry-self-hosted_postgres_1 vacuumdb -U postgres -d postgres -v -f --analyze
scripts-buildVerdaccio 私服搭建