Sentry的安裝配置集成以及簡單的使用

1.簡介

Sentry 是一個開源的實時錯誤追蹤系統，可以幫助開發者實時監控并修復異常問題。它主要專注于持續集成、提高效率并且提升用戶體驗。Sentry 分為服務端和客戶端 SDK，前者可以直接使用它家提供的在線服務，也可以本地自行搭建；后者提供了對多種主流語言和框架的支持，包括 React、Angular、Node、Django、RoR、PHP、Laravel、Android、.NET、JAVA 等。同時它可提供了和其他流行服務集成的方案，例如 GitHub、GitLab、bitbuck、heroku、slack、Trello 等。目前公司的項目也都在逐步應用上 Sentry 進行錯誤日志管理。

2.本地搭建sentry服務

Sentry 本身是基于 Django 開發的，而且也依賴到其他的如 Postgresql、 Redis 等組件，所以一般有兩種途徑進行安裝：通過 Docker 或用 Python 搭建。官網下分別有以下的兩個介紹：

因為在 Github 上有一個開源項目用于部署 Sentry ，所以我們這里以Docker安裝為例。
要求：

  • 服務器的內存至少 3G，否則在執行 sentry upgrade 命令時會出現問題
  • Docker 19.03.6+
  • Compose 1.24.1+

我們可以直接使用該項目進行部署，首先是克隆該項目：

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

會看到有一個 onpremise 文件夾。后續的操作都在這個文件夾里面，如果并沒有特殊要求或者額外的組件配置的話（比如說使用已有的 Postgresql 和 redis），可以直接運行 ./install.sh 將 Sentry 及其依賴都通過 docker 安裝。

cd onpremise

# 執行安裝
./install.sh

后續一步一步安裝下來

install.png

然后你會發現 Fetching and updating Docker images 等了幾個世紀都沒反應！實在是太慢了，所以我們要改成阿里云的鏡像在執行 install 命令，到阿里云里面獲取最新的鏡像地址
https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

image.png

根據圖中的描述操作就可以替換成阿里云的鏡像。然后重新跑命令./install.sh，幾分鐘后，我們就可以按照下圖所示創建admin賬戶用來登陸本地sentry服務。

create.png

如果要自定義配置文件，推薦根據需求修改一下文件配置

  • config.yml
  • sentry.conf.py
  • .env w/ environment variables

以下是簡單的郵件配置
Sentry 支持郵件發送的功能非常重要，當 Sentry 捕獲事件之后，可以將此捕獲的事件發送到你的個人郵箱（針對 Sentry 管理員賬號）。要修改目前的郵件配置是不能在界面上操作的，需要進行以下步驟：
修改 sentry/config.yml文件配置

###############
# Mail Server #
###############

# mail.backend: 'smtp'  # Use dummy if you want to disable email entirely
mail.host: 'smtp'
mail.port: 25
mail.username: ''
mail.password: ''
mail.use-tls: false
The email address to send on behalf of
mail.from: 'root@localhost'

在docker-compose.yml 文件中加入以下配置

x-sentry-defaults: &sentry_defaults
  << : *restart_policy
  build:
    context: ./sentry
    args:
      - SENTRY_IMAGE
      - SENTRY_PYTHON3
  image: sentry-onpremise-local
  depends_on:
    - redis
    - postgres
    - memcached
    - smtp
    - snuba-api
    - snuba-consumer
    - snuba-outcomes-consumer
    - snuba-sessions-consumer
    - snuba-transactions-consumer
    - snuba-replacer
    - symbolicator
    - kafka
  environment:
    ...
   #這里開始
   SENTRY_EMAIL_HOST: #郵件host 例如smtp.qq.com
   SENTRY_EMAIL_USER: #郵件地址 例如testuser@qq.com
   SENTRY_EMAIL_PASSWORD: # 填寫自己的密碼
   SENTRY_SERVER_EMAIL: #郵件地址
   SENTRY_EMAIL_PORT: 587        # port
   SENTRY_EMAIL_USE_TLS: 'true'

修改完以上配置后run ./install.sh
啟動sentry
待./install.sh結束后，run docker-compose up -d 即可啟動本地的sentry服務，你將看到以下登陸界面。

image.png

使用已經建立的admin user登陸即可，如果run ./install.sh 過程中我們沒有創建用戶，接下來我們可以run docker-compose run --rm web createuser 創建用戶。
然后可以測試一下郵件發送。登陸超級用戶下點擊左上角頭像選擇 Admin 進入到管理員界面，選擇 mail（郵箱）菜單，看到更新后的郵箱設置：

image.png

點擊最下方的 發送測試郵件 到當前用戶的郵箱上，即可測試郵件發送功能是否配置成功。

3.官方Sentry服務

如果要使用官方的Sentry服務，我們只需去它的官網注冊就行，一般是配合企業用戶使用的付費模式。

image.png

4.簡單的使用

1. 創建project

  1. 登錄Sentry組織
  2. 選擇Projects從左側導航菜單中顯示的所有項目名單
  3. 點擊+ Create Project按鈕
image.png

根據您要監視的代碼為您的項目選擇語言或框架，在這種情況下為JavaScript。

  • 給項目一個Name。
  • 正在Set your default alert settings檢查中i'll create my own alerts later
  • Assign a Team 到項目。
image.png

4.復制DSN key和方便使用，因為我們會將密鑰復制到源代碼中。

image.png

2.創建Alert

為每個項目創建各種警報規則，并在應用程序中發生錯誤時讓Sentry通知何時，如何以及要通知誰。警報規則由“條件”和“操作”組成，它們在滿足相關條件時執行。有關更多信息，請參閱警報。創建新項目時，可以選擇使用警報規則創建該項目，該規則將在第一次出現新問題時（通過電子郵件）通知所有項目團隊成員。這意味著下次發生類似錯誤時，由于錯誤不是“新的”，因此不會觸發通知。

1.單擊Alerts以打開“警報配置”頁面
2.點擊 New Alert Rule

image.png

3.在“新警報規則”表單中，選擇一種Issue Alert類型并輸入以下值

image.png

每當在“所有環境”中通過郵件看到事件時，新的警報規則就會通知選定的團隊成員
4.點擊Save Rule創建新規則

3.將Sentry SDK引入前端代碼

  1. 在GitHub上打開frontend-monitoring示例代碼存儲庫
  2. 單擊Fork并選擇您希望將此存儲庫分支到的目標GitHub帳戶
  3. 派生完成后，單擊Clone or download，然后復制存儲庫HTTPS URL
  4. 克隆項目到本地

git clone <repository HTTPS url>

5.安裝SDK
Sentry通過在應用程序運行時中使用特定于平臺的SDK捕獲數據。要使用SDK，需要在源代碼中導入并配置它。該演示項目使用React和Browser JS。最快的入門方法是使用CDN托管版本的JavaScript瀏覽器SDK，也可以NPM安裝瀏覽器SDK。

  • 打開index.html文件（位于./frontend-monitoring/public/下）
  • 在Sentry SDK配置中，輸入DSN從上一節中創建的項目中復制的鍵值
Sentry.init({
  dsn: "<PASTE YOUR DSN KEY HERE>",
});
  • 啟動應用
    1.打開一個shell終端，并將目錄更改為frontend-monitoring項目文件夾
    2.使用該.nvmrc文件來設置與此項目兼容的Node版本。跑： 
    > nvm use
    3.通過運行以下命令安裝項目依賴項： 
    > npm install
    4.通過運行以下命令在本地主機上構建，部署和運行項目 
    > npm run deploy
image.png

部署成功完成后，您將在終端中看到確認信息。

5.React集成

因為Sentry使用的是一種Hook錯誤函數的技術，來達到捕獲錯誤的目的，所以我們基本可以無損耗的接入到現有的項目中去。
下面是React與Sentry進行結合的核心代碼

  • 自定義錯誤捕獲的組件
#SentryBoundary.js
import { Component } from "react";
import Raven from "raven-js";

export default class SentryBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ error });
    // 發送錯誤信息
    Raven.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.error) {
      // 此處可以寫成組件，當組件崩潰后，可以替換崩潰的組件
      console.log("React Error");
    }
    return this.props.children;
  }
}

   #index.js
Raven.config("DSN", {
  release: release,
}).install();

ReactDOM.render(
  <div>
    <SentryBoundary>
      <App />
    </SentryBoundary>
  </div>,
  document.getElementById("root")
);

Raven.js支持所有主要的瀏覽器。在較舊的瀏覽器中，Raven.js收集的錯誤報告的詳細程度可能會降低–例如，缺少堆棧跟蹤數據或缺少源代碼列號。

image.png
  • 上傳source-map
    如果上面的代碼已經配置好后，那么現在的應用是可以捕獲到錯誤的，但是存在了一個問題，我們目前的項目大多都使用webpack進行打包，而打包后的代碼是混淆加密的代碼，無法讓我們準確的知道拋出錯誤的位置在哪里。所以我們需要上傳source-map和混淆后的文件一起上傳到Sentry服務器上。方便我們快速查找到問題所在的位置。
    這個上傳的配置及命令是比較繁瑣的。也是項目結合Sentry的一個難點。
    上傳source-map目前有兩種方式：
    1.使用Sentry提供的Webpack插件進行配置，但是其靈活性不高。
    Sentry提供了一個方便的Webpack插件，該插件可配置源地圖并將其在構建過程中上載到Sentry。建議使用此過程將源上傳到Sentry： 
    npm install --save-dev @sentry/webpack-plugin
    初始化插件時僅綁定必需的參數： 
    const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = {
// other configuration
configureWebpack: {
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: "exmaple-org",
      project: "example-project",

      // webpack specific configuration
      include: ".",
      ignore: ["node_modules", "webpack.config.js"],
    }),
  ],
 },
};
    2.使用sentry-cli的，其靈活性比較高，可以針對不同項目進行單獨的配置。
    其配置較為繁瑣，具體的React與Sentry結合的例子。可見參見github上的項目: react-sentry-demo。對每個配置都有詳細的說明。其中的上傳source-map，實現了: 打包、環境檢測、認證檢測、上傳source-map、刪除本地source-map的操作，完成自動化，可以把腳本直接遷移到現有的項目中去，改動也不會太大。
    其核心上傳命令如下: 
    sentry-cli releases files <release_name> upload-sourcemaps /path/to/files

6.淺入原理

在JavaScript中是有window.onerror這個方法的，而Sentry在前端的核心捕獲原理，就是通過重寫此方法，來對所有的錯誤進行捕獲。其實現的代碼大致如下:

  let _winError = window.onerror;
  window.onerror = function (message, url, lineNo, colNo, errorObj) {
    console.log(`
    錯誤信息: ${message}
    錯誤文件地址: ${url}
    錯誤行號: ${lineNo}
    錯誤列號: ${colNo}
    錯誤的詳細信息 ${errorObj}`);
  }

然后Sentry的工作就是獲取非錯誤的數據，如: user-agent、瀏覽器信息、系統信息、自定義信息等信息，然后交給Sentry的生命周期函數，最后在把數據發送到Sentry服務端，進行錯誤信息展示。
從上面的淺入原理可以看到，其核心捕獲是window.onerror。那么只要它可以捕獲到的錯誤，都會發送到Sentry上。而window.onerror能捕獲到的錯誤，除了Promise，基本上能在控制臺出現的錯誤，都會捕獲到。也就是運行時的錯誤，包括語法錯誤。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 上篇文章中，主要介紹了Odoo中加入Sentry來跟蹤日志記錄。由于國內的原因。使用Sentry官方提供的在線服務...
    F4A3閱讀 12,595評論 1贊 4
  • 上一篇已經介紹了如何將sentry部署到本地docker, 接下來介紹如何創建項目，并在代碼中如何使用，配置Sou...
    丹丹_ccd5閱讀 1,894評論 0贊 0
  • 前言 最初的需求就是在k8s上安裝sentry。之前通過自己梳理sentry工程各組件的關聯關系做過一次部署。后面...
    do_young閱讀 5,011評論 0贊 4
  • Sentry：is a realtime event logging and aggregation platfo...
    F4A3閱讀 1,564評論 0贊 1
  • vue-cli 官網地址：https://cli.vuejs.org/zh/config/#publicpath[...
    潛淵_bc21閱讀 456評論 0贊 0