從零構建Sentry v10 進行異常上報

簡介

Sentry 是一個開源的實時錯誤追蹤系統，能夠幫助開發者實時監控並修復異常問題。它主要專一於持續集成、提升效率而且提高用戶體驗。

下面是Sentry官網支持的產品

使用官網服務

做爲大多數我的開發者和中小企業，能夠直接使用Sentry官網)提供的雲服務，你只須要註冊一個Sentry帳號，就能夠快速享受到集中處理異常日誌的服務。

本地安裝Sentry服務

官網支持docker與python安裝兩種方式，這裏採用docker的方式
具體有什麼疑問能夠查看官網https://docs.sentry.io/server/installation/

安裝docker

具體能夠看以前記錄的文章重頭開始學Docker

安裝docker-compose

• 安裝wget

yum -y install wget

• 安裝pip

# 若是使用 wget下載https開頭的網址域名 時報錯，你須要加上 --no-check-certificate (不檢查證書)選項
wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate  # 下載文件

python get-pip.py #執行安裝

pip -V #查看pip版本

• 安裝docker-compose

sudo pip install docker-compose # 安裝 docker-compose
docker-compose -v #查看docker-compose 版本

注意這裏我在安裝docker-compose報了這個錯誤

執行以下命令

sudo pip install --ignore-installed requests

安裝完成以後再安裝docker-compose

參考至:https://blog.csdn.net/guoshaoliang789/article/details/96878731

構建Sentry

• 從github上拉取源碼

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

注意你須要保證你的Docker 17.05.0+ Compose 1.19.0+ 同時還須要擁有least 2400MB RAM

下載完成以後進入該目錄。查看文件以下

• 開始構建鏡像

docker-compose build --pull

可是出了個問題,問題描述說是倉庫不存在或可能須要「docker登陸」:拒絕:請求訪問的資源被拒絕

嘗試解決問題：先執行登陸操做

docker login

登陸成功以後再次執行以前的命令，發現仍是報錯，咱們搜索一下Docker網站上關於sentry-onpremise-local鏡像，咱們手動去pull

執行以下命令

docker image pull viitanener/sentry-onpremise-local

拉取成功以後，再次執行以前的命令。

參考至https://www.cnblogs.com/meloncodezhang/p/11229778.html

最後發現仍是沒用，可是在github issues中發現了一樣的問題

這是問題連接https://github.com/getsentry/onpremise/issues/278

執行以下命令

docker-compose build --pull --force-rm web
docker-compose build --force-rm

發現build成功

• 生成祕鑰

進入sentry文件夾，將默認的config.example.yml和sentry.conf.example.py重命名爲config.yml和sentry.conf.py。執行以下命令

cp config.example.yml config.yml
cp sentry.conf.example.py sentry.conf.py

執行以下命令生成祕鑰

docker-compose run --rm web config generate-secret-key

將生成的祕鑰添加到config.yml的system.secret-key字段上

• 進行 Web 服務遷移

執行以下命令開始服務遷移

docker-compose run --rm web upgrade

正常狀況下是會出現輸入帳號密碼的步驟的，若是不能夠請詳細查閱這個issue

執行如下命令

docker-compose run --rm web createuser

• 運行 sentry

docker-compose up -d

• 注意：錯誤解決

執行以後發現以下問題，判斷多是docker沒有啓動的問題

執行以下命令

service docker status  # 查看docker服務是否啓動
systemctl start docker # 啓動docker

再次執行安裝

又發生以下錯誤

執行以下命令

dig @114.114.114.114 registry-1.docker.io

將上訴幾個地址寫入hosts文件後再次安裝

• 部署Sentry成功

打開瀏覽器輸入ip:9000,以下圖說明安裝成功

注意，若是沒有打開，請檢查服務器防火牆與安全組是否開放9000端口

1. Root URL:默認爲部署的地址，後面會用到，sentryclirc文件裏的url屬性
2. Admin Email 管理員郵箱
3. Email From 郵件的發送地址息，填郵箱服務商的地方好比smtp.qq.com
4. SMTP PORT Smtp服務的端口默認25,使用tls就是567
5. SMTP username 用戶名 qq郵箱帳號
6. SMTP password 密碼 qq郵箱受權碼（不是密碼）

• 修改郵箱設置

打開sentry/config.yml文件，編輯以下信息：

具體配置查看這裏https://docs.sentry.io/server/config/#mail

注意要將服務器防火牆與服務器安全組的郵箱端口放開，

注意：若是使用Sentry10的話 使用tsl郵箱端口必須爲567否則會報錯

從新執行如下命令

docker-compose build --pull --force-rm web
docker-compose build --force-rm
docker-compose run --rm web upgrade
docker-compose up -d

能夠看到郵箱信息已經修改掉了，下面咱們發送一封測試郵件，點擊下方的Test Settings

至此，郵箱服務也修改完成

Sentry使用

建立項目

• 開始建立，選擇Project->React->Create Project

• SDK的使用

• DSN地址

• org組織名稱

• project項目名稱

• Create Token建立token

務必勾選project:write

前端進行使用

安裝webpack插件

npm install @sentry/webpack-plugin -S

添加.sentryclirc文件

[defaults]
url=sentry 服務的url #好比安裝的是192.168.0.1:9000
project = 項目名字
org= 項目組織 上面有寫在哪能夠取到

[auth]
token=api token # 登陸控制檯獲取

• 關於url:就是你部署Sentry的地址
• 關於project:
• 關於org：
• 關於token：

修改.umirc.js文件

const SentryPlugin = require('@sentry/webpack-plugin');
export default {
  chainWebpack(config, { webpack }){
    // 拿不到process.env.RELEASE_VERSION
    if (process.env.UMI_ENV == 'prod'){
      config.plugin("sentry").use(SentryPlugin, [{
        ignore: ['node_modules'],
        include: './dist', //上傳dist文件的js
        configFile: './sentryclirc', 
        release:release, // 版本號
        deleteAfterCompile: true,
        urlPrefix: '~/static/' //靜態資源路徑前綴
       }])
    }
  },
 }

• 關於urlPrefix若是你的靜態資源是htps://cdn.xxx.com/static/那麼該值就是~/static/，自動省去協議與主機地址

安裝@sentry/browser

使用的時候須要結合這個包使用

npm i @sentry/browser -S

使用

• 在項目的根文件下使用

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

const SENTRYSDK = '就是Sentry配置的DSN'

Sentry.init({dsn:SENTRYSDK,release: process.env.RELEASE_VERSION,debug: true,});

• 結合React的生命週期使用

componentDidCatch(error, errorInfo) {
    Sentry.withScope((scope) => {
      scope.setExtras(errorInfo);
      const eventId = Sentry.captureException(error);
      this.setState({ eventId });
    });
}

• 主動上報

Sentry.captureMessage('Hello, world!'); // 上報信息
Sentry.captureException(new Error('Good bye')); // 上報異常
Sentry.captureEvent({ // 上報事件
  message: 'Manual',
  stacktrace: [
    // ...
  ],
});

關於

• 本文首發於使用Sentry進行異常上報
• 參考以下：Sentry 入門實戰