十分鐘快速構(gòu)建錯誤監(jiān)控系統(tǒng)
作者：又在吃魚
當錯誤發(fā)生的時候我們更需要一些輔助信息來幫我們更快的定位錯誤，比如 JS錯誤類型、 JS錯誤信息、JS錯誤堆棧、JS錯誤發(fā)生的位置以及相關(guān)位置的代碼；JS錯誤發(fā)生的幾率、瀏覽器的類型，版本號，設(shè)備機型等等輔助信息。
前言
作為程序員，每次開發(fā)完自測充分的時候，但還是會有線上異常情況。如何快速發(fā)現(xiàn) 或者提前監(jiān)控到這些異常的出現(xiàn)呢，是不是需要一個錯誤監(jiān)控系統(tǒng)?
調(diào)研
一個錯誤監(jiān)控系統(tǒng)應(yīng)該做下面這些事情：
當錯誤發(fā)生的時候我們更需要一些輔助信息來幫我們更快的定位錯誤，比如 JS錯誤類型、 JS錯誤信息、JS錯誤堆棧、JS錯誤發(fā)生的位置以及相關(guān)位置的代碼;JS錯誤發(fā)生的幾率、瀏覽器的類型，版本號，設(shè)備機型等等輔助信息。
技術(shù)方案
- 自研。
- fundebug、sentry、bat的...
- 由于我們前端不到10人沒有太多的精力搞基建自研，然后付費的一般公司都不會愿意花錢(大家懂的)，所以選了國外比較成熟的方案 sentry[1]。
sentry
- 有免費版的付費版，免費版。付費版和免費版其實差不多,免費夠我們用了，付費的就是他啥都幫你弄好，你只需要裝sdk 就行了。
- sentry 是一個實時事件日志記錄和聚合平臺。它專門用于監(jiān)視錯誤和提取執(zhí)行適當?shù)氖潞蟛僮魉璧乃行畔? 而無需使用標準用戶反饋循環(huán)的任何麻煩。
- Sentry 是一個日志平臺，分為客戶端和服務(wù)端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應(yīng)用程序中間，程序出現(xiàn)異常就向服務(wù)端發(fā)送消息，服務(wù)端將消息記錄到數(shù)據(jù)庫中并提供一個web節(jié)目方便查看。Sentry由python編寫，源碼開放，性能卓越，易于擴展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等。
有哪些功能
項目
配置多個項目如下圖：
上報過來的問題
這個就是你的應(yīng)用所有的異常：
- 問題總數(shù)是指當前不同的問題，同一個問題出現(xiàn)的次數(shù)會在末尾那個數(shù)字體現(xiàn)。
- 然后管理員可以將這個問題勾選后分配給其它成員。
- 有的問題可以將其 ignore 或者 resolve, 之后就不會出現(xiàn)在你的列表里面。
- 還有自定義搜索：最多出現(xiàn)、最后出現(xiàn)時間、首頁出現(xiàn)等等。
- 當前錯誤所發(fā)生的 url。
- 瀏覽器的名字、版本、ua。
- 用戶的設(shè)備信息例如 XiaoMi MI MAX 3 android10.0 ipxxx。
- 用戶的基礎(chǔ)信息例如 name 、userid等更多業(yè)務(wù)相關(guān)的需要自己配置。
- 如果頁面有 xhr 信息會將請求信息響應(yīng)狀態(tài)碼顯示出來。
- 畫重點——當碰到 js 錯誤的時候會將調(diào)用棧、錯誤類型、錯誤發(fā)生文章打印出來，如果配了sourcemap 可以將壓縮混淆前的代碼清楚的定位到哪一行。
可視化
- 內(nèi)置各種維度的數(shù)據(jù)可視化。
- 如果不滿意，它也提供了一些 api、類似 gitlab、 github會提供一樣的 api 進行二次開發(fā)。
報警
可以安裝一些額外的插件，比如 釘釘機器人、郵件提醒。
安裝與部署
安裝方式
- Python
- Docker 這里使用了 docker 安裝比較簡單一點
環(huán)境
MIN_DOCKER_VERSION='1.10.0' //docker -v
MIN_COMPOSE_VERSION='1.17.0' //docker-compose -v
MIN_RAM=3072 # MB //你的內(nèi)存至少3G
一鍵生成
官方在19年的時候提供給了腳本一鍵生成的方式，倉庫在這里onpremise[2]。
git clone https://github.com/getsentry/onpremise
cd onpremise
./install.sh
如果 docker 沒有配置國內(nèi)鏡像估計會很慢，提一下配置鏡像。
## 有的話就忽略
mkdir /etc/docker
## 沒有的直接執(zhí)行
vim /etc/docker/daemon.json
{
"registry-mirrors" : [
"https://mirror.ccs.tencentyun.com",
"http://registry.docker-cn.com",
"http://docker.mirrors.ustc.edu.cn",
"http://hub-mirror.c.163.com"
],
...
}
中間會有一次讓你配置管理員賬號密碼的過程 下載完畢以后執(zhí)行。
docker-comose up -d
配置完以后基本上就整個安裝過程應(yīng)該不會有啥大問題，有問題估計是網(wǎng)絡(luò)問題。
手動安裝
準備
- Docker-ce
- Docker-compose
鏡像拉取
docker pull sentry
docker pull redis
docker pull postgres
啟動
docker run -d --name sentry-redis --restart=always redis ###保證了，異常自動拉起
docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry --restart=always postgres
生成唯一秘鑰
docker run --rm sentry config generate-secret-key
12345 ###打印出secret-keys,這里最好復(fù)制一下，接下來會用到
初始化以及創(chuàng)建Admin
docker run -it --rm -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade
啟動三個服務(wù)
### web服務(wù)
docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='12345' --link sentry-redis:redis --link sentry-postgres:postgres --restart=always sentry
### cropn 服務(wù)
docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
### work 服務(wù)
docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker
打開
賬號密碼是剛才創(chuàng)建的管理員的密碼：
配置后臺地址、預(yù)警郵件地址、以及其他的一些功能：
前端接入
創(chuàng)建項目
這里我們選 javascript 項目名叫 myapp。
然后sentry后臺多了個項目, 然后在我們的前端項目里面像下面這樣引入：
// 腳本引入
<script
src="https://browser.sentry-cdn.com/5.22.3/bundle.tracing.min.js"
integrity="sha384-HfEJlGrJtFM0B01Wt4sGzTbxWqLMcMeGAXCbyQyB+iK9BhnDmNAtIGovhekIQOa2"
crossorigin="anonymous"
></script>
// npm
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';
Sentry.init({
dsn: 'xxxx',
integrations: [
new Integrations.BrowserTracing(),
],
tracesSampleRate: 1.0,
});
這樣整個流程就通了，可以用起來了。
Sourcemap 上傳
眾所周知，我們的線上代碼都是被壓縮混淆過的。所以就算拿到了錯誤信息，只能靠猜了，所以要配合 souremap 精準定位錯誤信息。
準備
- sentry 后臺配置 authToken 用于上傳sourcemap 使用，如下圖注意勾選。
- 下載 webpack 插件。
npm i @sentry/webpack-plugin -D
然后在根目錄下新建 .sentryclirc。
[defaults]
### 你的域名
defaults.url='http://localhost:9000'
### 組織團隊名默認是 sentry
org=sentry
### 項目名稱
project=myapp
### 步驟1創(chuàng)建的
[auth]
token=1234
配置插件。
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
if (process.env.NODE_ENV !== 'development') { // 注意只在生成環(huán)境開啟，不然npm run dev也會上傳
new SentryWebpackPlugin({
release: Date.now(), // 唯一標識，可以用其他的比如 hash
include: './build', // 要上傳的文件夾 有的叫 dist
ignoreFile: '.sentrycliignore', // 可不要
ignore: ['node_modules', 'config-overrides.js'],
configFile: '.sentryclirc' // 默認同級，如果不一樣需要用node path模塊處理一下
});
}
然后運行 npm run build。
Creating an optimized production build...
> Found 10 release files
> Analyzing 10 sources
> Rewriting sources
> Adding source map references
> Bundled 10 files for upload
> Uploaded release files to Sentry
> File upload complete
恭喜你配置成功了。
其他常用api
主動上報
Sentry.captureMessage('Hello, world!'); // 上報信息
Sentry.captureException(new Error('Good bye')); // 上報異常
Sentry.captureEvent({ // 上報事件
message: 'Manual',
stacktrace: [
// ...
],
});
配置用戶信息
Sentry.configureScope((scope) => {
scope.setUser({
...data.userInfo,
time: new Date().toLocaleString()
});
});
其他
- 郵件。
- 釘釘機器 可以去自己下載一些插件配置。
責(zé)任編輯：武曉燕
來源：
React中文社區(qū)
