sentry的搭建和使用

 

Sentry 簡介（https://sentry.io）

Sentry是一個開源應用程序監控平台，可幫助您實時識別問題。支持 web 前后端、移動應用以及游戲，支持 Python、OC、Java、Go、Node、Django、RoR 等主流編程語言和框架 ，還提供了 GitHub、Slack、Trello 等常見開發工具的集成。

Sentry 服務支持多用戶、多團隊、多應用管理，每個應用都對應一個 PROJECT_ID，以及用於身份認證的 PUBLIC_KEY 和 SECRET_KEY。由此組成一個這樣的 DSN：

{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}

Sentry搭建有兩種方式：

1.通過Python安裝

2.通過Docker容器安裝

這里我們采用Docker安裝（Docker的安裝教程較簡單，在這里就不重復造輪子）

搭建步驟

7月份的時候作者更新了一版，將安裝的流程寫成了一個shell腳本（./install.sh）

所以要開始使用所有默認設置，只需拉取onpremise（https://github.com/getsentry/onpremise）並運行./install.sh即可。

可能需要對包含的docker-compose.yml文件進行修改以滿足您的需求或環境（例如添加GitHub憑據）。如果要執行這些操作，請在運行安裝腳本之前執行這些操作。

自定義配置的推薦方法是按以下順序使用以下文件：

• config.yml
• sentry.conf.py
• .env w /環境變量

需要注意的是，安裝所須要的要求是

MIN_DOCKER_VERSION='1.10.0' //docker -v
MIN_COMPOSE_VERSION='1.17.0' //docker-compose -v
MIN_RAM=3072 # MB //你的內存至少3G

如無意外, 一切正常, 端口默認是9000, 本地的話可以直接打開localhost:9000訪問

環境搭建好了，現在我們就來開始感受sentry的好處吧

Sentry在React的使用

要將Sentry與React應用程序一起使用，您需要使用@sentry/browser（Sentry的瀏覽器JavaScript SDK）

# Using yarn
$ yarn add @sentry/browser

# Using npm
$ npm install @sentry/browser

 在Sentry中完成項目設置后，Sentry將為您提供一個我們稱之為DSN或數據源名稱的值。

import * as Sentry from '@sentry/browser';

//DSN由幾部分組成，包括協議，公鑰，服務器地址和項目標識符。
Sentry.init({dsn: "https://[e-mail]/1521000"});

@sentry/browser將報告從您的應用程序觸發的任何未捕獲的異常。你也可以手動發送錯誤信息到sentry

瀏覽器端特有的集成功能：

Breadcrumbs 面包屑 包含以下選項，默認全部集成：

{
  beacon: boolean;  // 記錄使用Beacon API完成的HTTP請求
  console: boolean; // 捕捉console信息
  dom: boolean;     // 捕捉所有點擊以及鍵盤事件
  fetch: boolean;   // 記錄使用Fetch API完成的HTTP請求
  history: boolean; // 記錄history的變化
  sentry: boolean;  // 記錄主動上報的事件
  xhr: boolean;     // 記錄使用XMLHttpRequest API完成的HTTP請求
}

GlobalHandlers 全局設置是否需要對所有未捕獲錯誤或未處理的失敗響應進行處理

{
  onerror: boolean;
  onunhandledrejection: boolean;
}

LinkedErrors 遞歸查詢錯誤堆棧的最深層次數和查詢字段

{
  key: string;
  limit: number;
}

ReportingObserver 設置Sentry介入特定類型的ReportingObserver API並將特定類型的事件上報到Sentry，以下三類默認都包含。

{
  types: <'crash'|'deprecation'|'intervention'>[];
}

TryCatch 這個默認集成功能使用try/catch語句來包裹原生的定時及事件相關API來捕獲這些可能的異步錯誤

（setTimeout, setInterval, requestAnimationFrame, addEventListener/removeEventListener）

UserAgent 這個功能為上報的信息附加了瀏覽器的user-agent，幫助我們更好的了解和區分該用戶的使用環境

//刪除某集成
Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: integrations => {
    //刪除Breadcrumbs集成
    return integrations.filter(integration => integration.name !== 'Breadcrumbs');
  }
});
//修改某集成
Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: integrations => {
    //關閉Breadcrumbs集成自動收集console的功能
    return [...integrations, new Sentry.Integrations.Breadcrumbs({ console: false })];
  }
});

 

let errorVariable
try{
  console.log(errorVariable.slice(0,3))
}catch(e){
      //捕獲異常的錯誤 
      Sentry.captureException(e,{
      tags: {
          locale: 'en-us'
      }
  })
}

運行代碼，毫無例外，sentry接送到了一個語法錯誤

但是細心的小伙伴可能發現了，項目進行打包之后代碼變得極其難閱讀，這樣的報錯信息對於我們來說是不友好的

還好的是，Sentry supports un-minifying JavaScript via source maps.

第一步，先安裝 @sentry/cli 工具

npm install -g @sentry/cli 

我們在項目根目錄下創建.sentryclirc文件

查詢組織的slug可以訪問https://sentry.io/api/0/organizations/

查詢項目的slug可以訪問https://sentry.io/api/0/organizations/{organization_slug}/projects/

//.sentryclirc

[defaults]
url=https://sentry.io/
org={organization_slug}
project={project_slug}

如果是首次配置，我們在需要webpack打包的文件目錄下運行sentry-cli login命令進行授權，命令行將會指引我們打開瀏覽器新建一個authentication token，然后sentry-cli 自動將我們填入的token寫入了我們新建的.sentryclirc配置文件中

安裝@sentry/webpack-plugin

npm install -S @sentry/webpack-plugin

在config-overrides.js修改

const {
  override,
  addWebpackPlugin
} = require("customize-cra")

const SentryCliPlugin = require('@sentry/webpack-plugin');

module.exports = override(
  addWebpackPlugin(new SentryCliPlugin({
    release: 'project20190804',
    include: 'build',
    urlPrefix: '~/',
    ignore: ['node_modules'],
  }))
)

判斷文件是否上傳成功，可以在sentry.io上查看

可以看到文件已經上傳成功，其中～代表頁面的協議加域名，所以可以檢查下具體問題是不是能夠訪問的，避免SourceMap解析失敗

經過了上面的一系列操作，讓我們重新打包運行程序；果然沒讓baba失望！ 

 順帶提一下，為了避免本地調試的時候也將錯誤上傳上去，我們可以通過Allowed Domains屬性進行配置