实时异常捕获-sentry的配置和使用（兼容windows）

私有部署

按照官方文档来就行了，注意 docker 的安装不要默认用yum，yum 中的版本过低了，在docker 官网下载最新版本以后安装，同理 docker-compose 也是。注意：部署的服务器 cpu 内核必须大于 2，RAM 大于 4000M 才能部署 sentry！！vue

由于硬件环境，本人私有化部署没有成功，因此直接跳到使用这步，这里依赖于 sentry 官方的服务器。sentry 支持 gatsby、angular、vue、electorn 等，如下的例子用 react 举例。java

安装依赖

yarn add @sentry/react
yarn add @sentry/tracing
复制代码

配置项说明

项目使用 umi3 搭建的，在入口文件中添加react

// app.tsx
import * as Sentry from "@sentry/react";
import { sentryConfig } from "../configs";
// ...
Sentry.init(sentryConfig);
复制代码

sentryConfig 配置文件以下，配置 dsn，在projects->选择项目->setting->client keys或settings->project->选择项目->client keys中找到 dsn。webpack

配置好 dsn 就能捕获到错误了。如下为一些配置的说明来进行定制。git

// configs/config.ts
import { Integrations } from "@sentry/tracing";

export default {
    dsn:
        "https://7ebabed9823a4bc6961b6d73127db533@o552469.ingest.sentry.io/5678335",
    integrations: [new Integrations.BrowserTracing()],
    // tracesSampleRate: 1.0,
    debug: false, // 开启会打印调试信息，默认关闭；生产环境下不推荐
    release: REACT_APP_RELEASE_VERSION, // 发布版本，默认状况为环境变量中的SENTRY_RELEASE值
    environment: "prod", //设置当前环境，默认为环境变量SENTRY_ENVIRONMENT
    sampleRate: 1, // 错误事件采集率，值范围0~1，默认为1，指百分百发送错误事件
    attachStacktrace: false, // 开启会自动输出全部stack trace信息，默认关闭
    denyUrls: [], // 字符串或正则表达式组成的数组，匹配到的路由将不会发送错误信息
    allowUrls: undefined, // 匹配到的路由上的错误会发送给sentry。默认发送所有
    tracesSampler: (samplingContext: object) => {
        /* samplingContext： location: Location {ancestorOrigins: DOMStringList, href: "http://localhost:8000/tracker/Regist", origin: "http://localhost:8000", protocol: "http:", host: "localhost:8000", …} parentSampled: undefined transactionContext: name: "/tracker/Regist" op: "pageload" trimEnd: true */
        // 能够在这里过滤路由
        if (samplingContext.location?.pathname?.includes("/demo")) {
            return 0;
        } else {
            return 0.1;
        }
    },
    /*----------------钩子----------------------*/
    beforeSend(evt: object, hint: object) {
        if (evt.environment !== "prod") return null; // 发送事件到服务器以前调用，能够过滤一些信息，返回null则不会发送事件
        if (hint?.originalException === "xxxxx") {
            // 能够捕获原始报错信息，对其进行处理
            evt.fingerprint = ["database-unavailable"];
        }
        return evt;
    },
};
复制代码

事件实体

breadcrumbs: (3) [{…}, {…}, {…}]
environment: "prod"
event_id: "2c0b69dd0715487f8c767dbda026d0a0"
exception: {values: Array(1)}
extra: {arguments: Array(1)}
level: "error"
platform: "javascript"
request: {url: "http://localhost:8000/tracker/Regist", headers: {…}}
sdk: {name: "sentry.javascript.react", version: "6.2.2", integrations: Array(0), packages: Array(1)}
timestamp: 1616124546.59
复制代码

手动集成

集成起来就须要安装 sentry-cli 来定制化更多内容，如下两种方式均可以，一个手动一个自动，但必须安装sentry-cli，windows 安装sentry-cli踩了很多坑，具体见个人踩坑记录《解决 windows 安装 sentry-cli 失败的问题》github

第一种：makefile

整个流程和下面配置的文件的变量参考sentry 官方最佳实践进行配置，这里也踩了一个文档的坑，makefile 文件的变量要 export 出去才有效！！具体 makefile 文件以下：web

export SENTRY_AUTH_TOKEN=xxxxxxxxxxxxxx
SENTRY_ORG=mytaccn
SENTRY_PROJECT=mytaccn

REACT_APP_RELEASE_VERSION=$(shell sentry-cli releases propose-version)

setup_release: create_release upload_sourcemaps
create_release:
	sentry-cli releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(REACT_APP_RELEASE_VERSION)
upload_sourcemaps:
	sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files $(REACT_APP_RELEASE_VERSION) \
        upload-sourcemaps ./dist/umi.js.map
复制代码

执行命令正则表达式

make
复制代码

就上传完成了！关于上传 source-map 的文档chrome

一些配置

release 版本号须要写入到项目中，在 makefile 中添加新一行执行脚本设置环境变量

set_env:
	yarn cross-env REACT_APP_RELEASE_VERSION=$(REACT_APP_RELEASE_VERSION) && yarn start
复制代码

在项目的入口配置文件中添加该环境变量，这里用 umi 举例

import { defineConfig } from "umi";

export default defineConfig({
    //...
    define: {
        REACT_APP_RELEASE_VERSION: process.env.REACT_APP_RELEASE_VERSION,
    },
});
复制代码

在 sentry 的配置中直接引用该变量就 ok 啦！

import { Integrations } from "@sentry/tracing";

export default {
    // ....
    release: REACT_APP_RELEASE_VERSION, // 发布版本
};
复制代码

第二种：webpack 插件

以 chrome-extension 项目举例，由于整个应用被 chrome 隔离为 background 和 inject 两层，因此 sentry 必需要在这两层分别配置。但与上面的配置方式大同小异，只不过用 webpack plugin 集成了。

首先仍是安装依赖，在项目的入口文件进行配置，与上一种方法同样，再也不赘述。主要区别在于 source-map 上传方式不同。

// webpack.conf.js的plugins上加
new SentryCliPlugin({
            include: path.resolve(
                __dirname,
                "../build/js/app.bundle.js.map"
            ),
            release: `${process.env.npm_package_version}`,
            configFile: path.resolve(__dirname, "../.sentryclirc"),
            // enviroment: process.env.NODE_ENV,
            // autoSessionTracking: process.env.NODE_ENV === "production",
        }),
复制代码

持续集成配置

由于个人仓库是 github，这里用 travis 举例：文档设定好环境变量，配置下.travis.yml

jobs:
    include:
        # ...
        - name: Create release and notify Sentry of deploy
          env: SENTRY_ORG=mytaccn SENTRY_PROJECT=mytaccn SENTRY_ENVIRONMENT=production
          script: | curl -sL https://sentry.io/get-cli/ | bash export SENTRY_RELEASE=$(sentry-cli releases propose-version) sentry-cli releases new -p $SENTRY_PROJECT $SENTRY_RELEASE sentry-cli releases set-commits $SENTRY_RELEASE --auto yarn build sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ./dist/umi.js.map sentry-cli releases finalize $SENTRY_RELEASE sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENT 复制代码