前端項目接入Sentry監(jiān)控系統(tǒng)
本文適合項目需要接入錯誤監(jiān)控的小伙伴閱讀
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～
一、前言
場景：我們的項目在本地測試時沒有問題，but在線上運行就遇到各種奇奇怪怪的問題。相信不少小伙伴應(yīng)該都遇到過這樣的情況，為了減少對用戶的影響，引入一個線上監(jiān)控系統(tǒng)是必不可少的。
方案：對于一些大型的團隊，往往會自研一套監(jiān)控系統(tǒng)。如果團隊資源有限引入個第三方的異常監(jiān)控系統(tǒng)也是一個不錯的方案。
二、原題
本文基于：
https://github.com/getsentry/sentry
https://github.com/getsentry/sentry-javascript
https://docs.sentry.io/
效果預(yù)覽
可以看出，sdk支持如下語言：
JavaScript
React-Native
Python
Ruby
PHP
Go
Rust
Java/Kotlin
Objective-C/Swift
C#/F#
C/C++
Dart
Perl
Clojure
Elixir
Unity
Laravel
Electron
what sentry
Sentry 是跨平臺的應(yīng)用程序監(jiān)控，專注于錯誤報告。
線上版本發(fā)生異常回立刻會把報錯的路由路徑、錯誤所在文件等詳細信息通知給相關(guān)人員，然后開發(fā)人員就可以利用錯誤信息的堆棧跟蹤快速定位到需要處理的問題。
環(huán)境搭建
sentry是開源的，如果我們愿意付費的話，sentry給我們提供了方便。省去了自己搭建和維護 Python 服務(wù)的麻煩事。
自己搭建的話，Sentry 后端服務(wù)是基于 Python 和 ClickHouse 創(chuàng)建的，需要自己使用物理機進行搭建。
私有化部署官方推薦方式是通過Docker和Docker Compose部署。
為簡單起見，建議選擇使用 Docker 和 Docker Compose ?，以及基于 bash 的安裝和升級腳本。
1、安裝Docker
下載Docker并進行安裝，安裝完成之后，系統(tǒng)會提示登錄輸入dockerid，可以去Docker官網(wǎng)申請一個賬號即可。安裝成功之后，可以正確的獲取版本信息。使用如下命令，即可查看對應(yīng)的版本：
docker?--version
docker-compose?--version2、獲取sentry
將Sentry源碼克隆到本地，然后執(zhí)行如下命令：
git?clone?https://github.com/getsentry/onpremise.git3、修改sentry配置
step1: 修改docker-compose.yml配置來適應(yīng)環(huán)境，創(chuàng)建一個名為volname的數(shù)據(jù)卷，通過-v參數(shù)可以進行創(chuàng)建，如下：
docker?volume?create?--name=sentry-data?&&?docker?volume?create?--name=sentry-postgres
step2:??編譯和標記Docker服務(wù)：
docker-compose?build
docker-compose?run?--rm?web?config?generate-secret-key
?environment:
????SENTRY_MEMCACHED_HOST:?memcached
????SENTRY_REDIS_HOST:?redis
????SENTRY_POSTGRES_HOST:?postgres
????SENTRY_EMAIL_HOST:?smtp
????#添加如下內(nèi)容
????SENTRY_SECRET_KEY?:?'dvw9w+4^%+ypj1z^#e%nt#h8w1i)@it84j+&m1npujr'
docker-compose?run?--rm?web?upgrade4、啟動服務(wù)
docker-compose?up?-d
use sentry
本地起一個vue項目
#?vue?cli創(chuàng)建項目
$?vue?create?vue-sentry-test
#?選擇vue-router?vue2.x?
#?按照文檔安裝插件
$?yarn?add?@sentry/vue?@sentry/tracing
配置sentry
//?main.js?加入配置
import?*?as?Sentry?from?'@sentry/vue'
import?{?BrowserTracing?}?from?'@sentry/tracing'
Sentry.init({
??Vue,
??dsn:?'https://[email protected]/4',
??integrations:?[
????new?BrowserTracing({
??????routingInstrumentation:?Sentry.vueRouterInstrumentation(router),
??????tracingOrigins:?['localhost',?'my-site-url.com',?/^\//],
????}),
??],
??tracesSampleRate:?1.0,
??release:?process.env.SENTRY_RELEASE,
})
#?新建env用于保存release版本號
$?touch?.env
$?cat?>?.env
$?SENTRY_RELEASE="0.0.1"
為了方便查看具體的報錯內(nèi)容，我們需要上傳sourceMap到sentry平臺。
一般有兩種方式 sentry-cli和 sentry-webpack-plugin方式，這里為了方便采用webpack方式。
#?如果要上傳源碼需安裝webpack插件
$?yarn?add?@sentry/webpack-plugin?-D
$?touch?.sentryclirc
#?寫入配置
$?cat?>?.sentryclirc
[auth]
token=XXX
[defaults]
url=https://sentry.hanyuan.vip/
org=sentry
project=vue-sentry-test
#?webpack配置
$?touch?vue.config.js//?vue.config.js
const?SentryCliPlugin?=?require('@sentry/webpack-plugin')
module.exports?=?{
??configureWebpack:?{
????plugins:?[
??????new?SentryCliPlugin({
????????include:?'./dist/js',?//?只上傳js
????????ignore:?['node_modules'],
????????configFile:?'sentry.properties',
????????release:?process.env.SENTRY_RELEASE,?//?對應(yīng)main.js版本號
????????cleanArtifacts:?true,?//?先清理再上傳
??????}),
????],
??},
}
執(zhí)行 $ yarn build 上傳后并驗證
在react項目中使用也大同小異，我們按需修改即可。
Tips
如何上傳后刪除sourcemap, 三種方式：
1、命令刪除
"scripts":?{
???"build":?"vue-cli-service?build?&&?rimraf?./dist/js/*.map"
?}2、單獨生成map
//?vue.config.js
configureWebpack(config)?{
?????config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js')
?????config.plugin('sentry').use(SentryCliPlugin,?[{
????????include:?'./dist/sourceMap',?//?只上傳js
????????ignore:?['node_modules'],
????????configFile:?'sentry.properties',
????????release:?process.env.SENTRY_RELEASE,?//?對應(yīng)main.js版本號
????????cleanArtifacts:?true,?//?先清理再上傳
????}])
}
3、webpack插件清理
$?yarn?add?webpack-delete-sourcemaps-plugin?-D
//?vue.config.js
const?{?DeleteSourceMapsPlugin?}?=?require('webpack-delete-sourcemaps-plugin')
...?//?plugin
new?DeleteSourceMapsPlugin(),?//?清理sourcemap
...
面試題庫推薦
三、最后
在我們做技術(shù)方案的時候，最好結(jié)合團隊的實際情況，然后做出取舍，選擇最符合實際的方案。
關(guān)注我，一起攜手進階
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～