#题记

公司基于electron开发的客户端应用，程序外发出去后肯定是需要一个完善的bug监控平台，在做了相关调研后决定采用集成Sentry的方式。

Sentry地址： https://github.com/getsentry/sentry

1、Sentry 功能简单介绍

和gitlab一样，可以将服务端部署到自己的服务器，不用依托第三方平台。
多平台：支持JS、Android、IOS、Flutter、JAVA、GO..等多种语言的错误监测
BUG 检测，会将客户端的异常上报，并反馈console日志、Fetch 请求日志、SourceMap定位异常位置、环境变量、自定义tag等等。如下图：
性能分析：分析页面的加载、启动等耗时、react渲染耗时等如下图。

可以自定义统计仪表盘，包括但不限于分析各个版本人数、各个版本异常频率、各个版本页面性能看板等。
支持异常警报、可以邮箱通知、钉钉通知、飞书通知等、自定义WebHooks
...

2、Sentry 服务端安装。

前置环境

服务器安装 Docker 、docker-compose
服务器安装 Git

安装步骤

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

进行安装

# 1.切换到onpremise目录
cd onpremise
# 2.执行 ./install.sh 命令
./install.sh

安装最后会提示设置Sentry 的初始管理员账号、密码。记得设置下。

安装成功，启动。

  docker-compose up -d

也可以直接在Docker客户端启动。

3. Sentry 创建项目

登录Sentry，点击 项目-> 创建项目
选择平台（我们项目用的electron，所以默认没显示需要搜索中搜索electron）
创建成功后，会有对应的客户端的配置教程。

4、客户端Sentry进阶

1、设置 Tag

在Sentry.init()之后可以为程序添加一些tag标记，如果用户信息、版本信息等

Sentry.configureScope((scope) => {
            const userInfo = {
                'username':'张三'
            };
            
            scope.setTags({
                "buluke.version": '1.0.0',
            });
            scope.setUser({
                username: userInfo?.['username'] || "none"
            })
        });

2、添加性能检测

Sentry 的性能检测需要另外安装依赖, 官方教程: docs.sentry.io/platforms/j…

React 为例：

1、安装依赖，（这里有个坑，需要注意这几个依赖的版本一致性，electron相关的版本似乎与最新版有脱节）

# Using yarn
yarn add @sentry/tracing

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

# react 相关依赖
yarn add @sentry/react

2、在Sentry.init()初始化的时候，添加性能检测插件。

// 初始化日志上报功能
        Sentry.init({
            dsn: [YOUR_SENTRY_KEY],
            debug: [APP_IS_DEBUG],
            integrations: [
                // 性能检测
                new BrowserTracing({
                    startTransactionOnPageLoad:false
                })
            ],
            //性能检测采样率，生产环境采样率可以低点
            tracesSampleRate: [APP_IS_DEBUG] ? 1 : 0.3,//采样率 0~1
        });

3、React.render()的组件外包一层withProfiler性能检测，如下

   const MainToolbarWidget = withProfiler(MainToolbar);
   // Create toolbar
   ReactDOM.render(<MainToolbarWidget  />,document.getElementById("MAIN-TOOLBAR"));

4、性能相关配置完毕，运行项目后即可在Sentry中查看性能相关数据了。

3、自动上传`Source-Map`追踪源码日志

Sentry的SourceMap有俩个方式一个是使用 sentry-cli、一个是用sentry-webpack-plugin ,官方教程：

docs.sentry.io/platforms/j…

安装 sentry-webpack-plugin

npm install --save-dev @sentry/webpack-plugin

配置webpack.config.js

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = {
  // other webpack configuration
  devtool: "source-map",
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration - can also be done directly through sentry-cli
      // see https://docs.sentry.io/product/cli/configuration/ for details
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: "example-org", //必填：组织名称
      project: "example-project", // 必填：项目名称
      release: process.env.SENTRY_RELEASE,//非必填：上传到对应版本的项目中
      url: "http://xxx.youer-site/", //必填：站点域名，带端口
      // other SentryWebpackPlugin configuration
      include: ".", // source-map 所在目录
      ignore: ["node_modules", "webpack.config.js"],
    }),
  ],
};

其中：org 是组织名，如截图所示我的为 bloks：

其中：authToken为个人的token,如图获取:

其中: project为项目名称,如图中所示，我的为 editor_pro:

其中：release 为上传的source-map对应的项目版本号，可以根据需要自行调写，或者不填。可以和Sentry.init()中的release参数一一对应。

另外如果想看上传进度可以设置参数: debug:true

如果想验证sourcemap是否可以找到可以设置参数:validate:true,

最后通过webpack打包即可。

4、遇到的特别的异常

我们的项目在初始化的时候会加载大量3D模型，在这个阶段会加载大量数据也会存在大量日志，导致程序直接宕机了，遇到这类情况可以自行调整Sentry的上传设置，具体操作如下。

初始化Sentry.init中的integrations参数，中将需要屏蔽的上报信息去除，integrations对应的可以是一个插件数组，如果传入了系统默认的插件将覆盖系统的对应插件。也可以返回一个方法，在方法中通过名字替换插件。

 // 初始化Sentry
        Sentry.init({
            dsn: BulukeConstant.SENTRY_KEY,
            integrations: [
                 ...
                // 该插件的console上报会导致 import 积木的时候线程卡死
                new Sentry.Integrations.Breadcrumbs({
                    console: false,
                }),
            ],
        });

系统的默认所有插件:

到这里Sentry的集成全过程完毕~ See you ~

6/300

BUG监测平台，Sentry 集成全过程。

#题记