十分鐘快速構建錯誤監控系統
作者：又在吃魚
當錯誤發生的時候我們更需要一些輔助信息來幫我們更快的定位錯誤，比如 JS錯誤類型、 JS錯誤信息、JS錯誤堆棧、JS錯誤發生的位置以及相關位置的代碼；JS錯誤發生的幾率、瀏覽器的類型，版本號，設備機型等等輔助信息。
前言
作為程序員，每次開發完自測充分的時候，但還是會有線上異常情況。如何快速發現 或者提前監控到這些異常的出現呢，是不是需要一個錯誤監控系統?
調研
一個錯誤監控系統應該做下面這些事情：
當錯誤發生的時候我們更需要一些輔助信息來幫我們更快的定位錯誤，比如 JS錯誤類型、 JS錯誤信息、JS錯誤堆棧、JS錯誤發生的位置以及相關位置的代碼;JS錯誤發生的幾率、瀏覽器的類型，版本號，設備機型等等輔助信息。
技術方案
- 自研。
- fundebug、sentry、bat的...
- 由于我們前端不到10人沒有太多的精力搞基建自研，然后付費的一般公司都不會愿意花錢(大家懂的)，所以選了國外比較成熟的方案 sentry[1]。
sentry
- 有免費版的付費版，免費版。付費版和免費版其實差不多,免費夠我們用了，付費的就是他啥都幫你弄好，你只需要裝sdk 就行了。
- sentry 是一個實時事件日志記錄和聚合平臺。它專門用于監視錯誤和提取執行適當的事后操作所需的所有信息, 而無需使用標準用戶反饋循環的任何麻煩。
- Sentry 是一個日志平臺，分為客戶端和服務端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應用程序中間，程序出現異常就向服務端發送消息，服務端將消息記錄到數據庫中并提供一個web節目方便查看。Sentry由python編寫，源碼開放，性能卓越，易于擴展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等。
有哪些功能
項目
配置多個項目如下圖：
上報過來的問題
這個就是你的應用所有的異常：
- 問題總數是指當前不同的問題，同一個問題出現的次數會在末尾那個數字體現。
- 然后管理員可以將這個問題勾選后分配給其它成員。
- 有的問題可以將其 ignore 或者 resolve, 之后就不會出現在你的列表里面。
- 還有自定義搜索：最多出現、最后出現時間、首頁出現等等。
- 當前錯誤所發生的 url。
- 瀏覽器的名字、版本、ua。
- 用戶的設備信息例如 XiaoMi MI MAX 3 android10.0 ipxxx。
- 用戶的基礎信息例如 name 、userid等更多業務相關的需要自己配置。
- 如果頁面有 xhr 信息會將請求信息響應狀態碼顯示出來。
- 畫重點——當碰到 js 錯誤的時候會將調用棧、錯誤類型、錯誤發生文章打印出來，如果配了sourcemap 可以將壓縮混淆前的代碼清楚的定位到哪一行。
可視化
- 內置各種維度的數據可視化。
- 如果不滿意，它也提供了一些 api、類似 gitlab、 github會提供一樣的 api 進行二次開發。
報警
可以安裝一些額外的插件，比如 釘釘機器人、郵件提醒。
安裝與部署
安裝方式
- Python
- Docker 這里使用了 docker 安裝比較簡單一點
環境
MIN_DOCKER_VERSION='1.10.0' //docker -v
MIN_COMPOSE_VERSION='1.17.0' //docker-compose -v
MIN_RAM=3072 # MB //你的內存至少3G
一鍵生成
官方在19年的時候提供給了腳本一鍵生成的方式，倉庫在這里onpremise[2]。
git clone https://github.com/getsentry/onpremise
cd onpremise
./install.sh
如果 docker 沒有配置國內鏡像估計會很慢，提一下配置鏡像。
## 有的話就忽略
mkdir /etc/docker
## 沒有的直接執行
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"
],
...
}
中間會有一次讓你配置管理員賬號密碼的過程 下載完畢以后執行。
docker-comose up -d
配置完以后基本上就整個安裝過程應該不會有啥大問題，有問題估計是網絡問題。
手動安裝
準備
- 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,這里最好復制一下，接下來會用到
初始化以及創建Admin
docker run -it --rm -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade
啟動三個服務
### web服務
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 服務
docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
### work 服務
docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker
打開
賬號密碼是剛才創建的管理員的密碼：
配置后臺地址、預警郵件地址、以及其他的一些功能：
前端接入
創建項目
這里我們選 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創建的
[auth]
token=1234
配置插件。
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
if (process.env.NODE_ENV !== 'development') { // 注意只在生成環境開啟，不然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()
});
});
其他
- 郵件。
- 釘釘機器 可以去自己下載一些插件配置。
責任編輯：武曉燕
來源：
React中文社區
