前端異常監控之 Sentry的部署和使用

Keely發表於2018-08-15
前端

由於最近在整理前端異常監控相關內容，所以自己在虛擬機器搭建部署了一下Sentry，把搭建過程及一些自己踩得坑整理如下

一、Sentry部署

Sentry搭建有兩種方式：

我本地是用Docker進行搭建的。

1、安裝docker

yum install docker -y

// 檢視版本資訊
docker info
或者
docker -v
複製程式碼

2、安裝wget

// 在linux中使用wget時，若報-bash: wget: command not found，則表明沒有安裝wget，需要安裝，安裝命令如下：-->

yum -y install wget
複製程式碼

3、安裝pip

# 如果使用 wget下載https開頭的網址域名 時報錯，你需要加上 --no-check-certificate (不檢查證照)選項
wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate  # 下載檔案

python get-pip.py #執行安裝

pip -V #檢視pip版本
複製程式碼

4、安裝docker-compose

sudo pip install docker-compose # 安裝 docker-compose

docker-compose -v #檢視docker-compose 版本
複製程式碼

5、安裝git

安裝git教程地址

6、 搭建自己的sentry

1）首先從github上拉去sentry的docker配置檔案

更新：sentry 有更新，參考readme檔案內容如下，具體以官方為準

sentry更新

------------------以下為更新前操作步驟-----------------

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

cd onpremise

#根據onpremise目錄中的README.md 內容來操作：

cat README.md 

---------
1. `mkdir -p data/{sentry,postgres}` - Make our local database and sentry config directories.
    This directory is bind-mounted with postgres so you don't lose state!
2. `docker-compose build` - Build and tag the Docker services
3. `docker-compose run --rm web config generate-secret-key` - Generate a secret key.
    Add it to `docker-compose.yml` in `base` as `SENTRY_SECRET_KEY`.
4. `docker-compose run --rm web upgrade` - Build the database.
    Use the interactive prompts to create a user account.
5. `docker-compose up -d` - Lift all services (detached/background mode).
6. Access your instance at `localhost:9000`!
----------
複製程式碼

2）在clone下的onpremise下 建立目錄

mkdir -p data/{sentry,postgres}

docker-compose build # 一定執行，不然報錯，然後再生成key
複製程式碼

3） 獲取專案的key

這個過程很漫長，可能中間會卡，或者出現一些錯誤，多執行幾次就好了

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

生成的密匙類似這樣：41dvtnqzc#g(*s8ichpp8r@gqzu(p4h(+l6qi(d9+f9ue2u+j9
複製程式碼

4）編輯docker-compose.yml，複製獲取的key 到 SENTRY_SECRET_KEY

vim docker-compose.yml
複製程式碼

5）建立專案的superuser

過程中會讓我們填寫郵箱和密碼

docker-compose run --rm web upgrade
複製程式碼

6）開啟sentry服務

docker-compose up -d
複製程式碼

7） 這時候輸入你的 http:://ip:9000 即可進入你的 sentry

使用第 5） 步的使用者名稱密碼進行登入即可

Sentry

進入後進行簡單配置，然後右上角可以點選 New Project 建立，選擇需要專案型別，根據提示進行配置

New Project

選擇專案型別

根據提示配置

7、搭建注意事項：

  • 1） 在執行 docker-compose run --rm web upgrade 時報錯。
    注意1
忘記執行 docker-compose build
複製程式碼
  • 2）執行 docker-compose up -d 報錯，關閉 docker再重新開啟。

注意2

關閉docker： systemctl stop docker
啟動docker： systemctl start docker
複製程式碼
  • 3）執行 docker-compose run --rm web upgrade 如果忘記設定使用者名稱或者設定錯誤，部署完後不能登入則重新安裝資料庫。
刪除 /var/lib/docker/volumes 下的 onpremise_sentry-postgres 資料夾。
重新執行命令 docker-compose run --rm web upgrade
複製程式碼

注意3

  • 4）用docker composer啟動docker叢集時報錯：
# ERROR: Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?

應該是docker後臺服務沒有開啟

執行：systemctl start docker
複製程式碼
  • 5）docker常用的一些操作
#檢視所有容器： 
docker ps -a

#檢視執行容器：
docker ps

#停用所有容器：
docker stop $(docker ps -q)

#刪除所有容器：
docker rm $(docker ps -aq)

#停用和刪除所有容器：
docker stop $(docker ps -q) & docker rm $(docker ps -aq)
複製程式碼

二、Sentry使用

1、安裝Sentry對應的命令列管理工具sentry-cli。

npm i -g @sentry/cli

sentry-cli -V // 檢查版本
複製程式碼

2、生成token

點選頭像左下角，選擇API，生成token，勾選project:write許可權

3、登陸

$ sentry-cli --url https://myserver/ login

# 回車後輸入上一步獲得的 token 即可
複製程式碼

4、release控制

1）建立release

sentry-cli releases -o 組織 -p 專案 new staging@1.0.1

# 這裡的 staging@1.0.1 就是我們指定的版本號. 
# -o -p可以通過頁面左上角可以看到。現在我們可以通過建立多個版本號來進行異常分類。 同時，也可以通過頁面中"Releases"檢視是否建立成功
複製程式碼

2）本地應用release

# 安裝raven-js
npm install raven-js --save

# 回到前端專案中，在config新增對應的release，指定版本後，每次上報的異常就會分類到該版本下。

import Raven from 'raven-js';

Raven.config(DSN, {
release: 'staging@1.0.1'
}).install()
複製程式碼

3）刪除release

sentry-cli releases -o 組織 -p 專案 delete staging@1.0.1

# 注意 刪除某個release時需要將其下的異常處理掉,並將該版本的sourcemap檔案清空
# 完成上面兩步可能還要等待2小時才能刪除，不然會報錯：該版本還有其它依賴。
複製程式碼

5、SourceMap管理

目前來說，前端專案基本都會壓縮混淆程式碼，這樣導致Sentry捕捉到的異常堆疊無法理解。

我們希望在Sentry直接看到異常程式碼的原始碼時就需要上傳對應的source和map。

1）上傳 SourceMap

sentry-cli releases -o 組織 -p 專案 files staging@1.0.1 upload-sourcemaps js檔案所在目錄 --url-prefix 線上資源URI
複製程式碼

PS: 記得別把map檔案傳到生產環節了，又大又不安全…

PS: 免費服務的檔案上限為40MB。

2）清空 SourceMap 檔案

sentry-cli releases files staging@1.0.1 delete --all
複製程式碼

也可以選擇在 版本>工件 裡點選一個個刪除。。。。

3）結合webpack在專案中配置進行sourcemap上傳

# 安裝webpack-sentry-plugin
npm i -D webpack-sentry-plugin
複製程式碼
var SentryPlugin = require('webpack-sentry-plugin');

plugins: [
    //...
    new SentryPlugin({
        // Sentry options are required
        baseSentryURL: 'https://sentry.mycorp.com/api/0', # 如果是內網使用需要加
        organization: 'sentry',
        project: 'react',
        apiKey: process.env.SENTRY_API_KEY,
    
        // Release version name/hash is required
        release: process.env.GIT_SHA,
        deleteAfterCompile: true,
        suppressErrors: true,
        filenameTransform: function (filename) {
            return 'http://xxx.com/' + filename
        }
    })
]
複製程式碼

參考文獻：

  1. Sentry前端部署擴充篇（sourcemap關聯、issue關聯、release控制）
  2. 使用Docker 方式在Centos 7.0 安裝配置Sentry
  3. sentry使用實踐
  4. webpack-sentry-plugin
  5. Sentry支援SourceMap指引

相關文章