實時異常捕獲-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 複製代碼