前端專案接入Sentry監控系統

語言: CN / TW / HK

本文適合專案需要接入錯誤監控的小夥伴閱讀

歡迎關注 前端早茶 ,與廣東靚仔攜手共同進階~

作者:廣東靚仔

一、前言

場景:我們的專案在本地測試時沒有問題,but在線上執行就遇到各種奇奇怪怪的問題。 相信不少小夥伴應該都遇到過這樣的情況,為了減少對使用者的影響,引入一個線上監控系統是必不可少的。

方案:對於一些大型的團隊,往往會自研一套監控系統 。如果團隊資源有限引入個第三方的異常監控系統也是一個不錯的方案。

常用的有:博睿、神策、 sentry

本文我們分享下sentry。

二、原題

本文基於:

http://github.com/getsentry/sentry
http://github.com/getsentry/sentry-javascript
http://docs.sentry.io/

效果預覽

文件預覽

可以看出,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 是跨平臺的應用程式監控,專注於錯誤報告。

線上版本發生異常回立刻會把報錯的路由路徑、錯誤所在檔案等詳細資訊通知給相關人員,然後開發人員就可以利用錯誤資訊的堆疊跟蹤快速定位到需要處理的問題。

環境搭建

方式一:

sentry是開源的,如果我們願意付費的話,sentry給我們提供了方便。 省去了自己搭建和維護 Python 服務的麻煩事。

方式二:

自己搭建的話,Sentry 後端服務是基於 Python 和 ClickHouse 建立的,需要自己使用物理機進行搭建。

具體步驟:

私有化部署官方推薦方式是通過Docker和Docker Compose部署。

為簡單起見,建議選擇使用 Docker 和 Docker Compose  ,以及基於 bash 的安裝和升級指令碼。

1、安裝Docker

下載Docker並進行安裝,安裝完成之後,系統會提示登入輸入dockerid,可以去Docker官網申請一個賬號即可。安裝成功之後,可以正確的獲取版本資訊。使用如下命令,即可檢視對應的版本:

docker --version
docker-compose --version

2、獲取sentry

將Sentry原始碼克隆到本地,然後執行如下命令:

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

3、修改sentry配置

step1: 修改docker-compose.yml配置來適應環境, 建立一個名為volname的資料卷,通過-v引數可以進行建立,如下:

docker volume create --name=sentry-data && docker volume create --name=sentry-postgres

step2:   編譯和標記Docker服務:

docker-compose build

step3:  生成金鑰,並將它新增到.env作為SENTRY_SECRET_KEY

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

step4: 將生成的祕密串字元複製到docker-compose.yml檔案對應中並儲存,然後再將生成的key複製到docker-compose.yml檔案中。

 environment:
SENTRY_MEMCACHED_HOST: memcached
SENTRY_REDIS_HOST: redis
SENTRY_POSTGRES_HOST: postgres
SENTRY_EMAIL_HOST: smtp
#新增如下內容
SENTRY_SECRET_KEY : 'dvw9w+4^%+ypj1z^#e%nt#h8w1i)@it84j+&m1npujr'

step5: 執行如下的命令更新配置

docker-compose run --rm web upgrade

4、啟動服務

使用下面的命令啟動所有的服務:

docker-compose up -d

頁面效果:

use sentry

1、設定語言和時區

點選頭像User settings - Account Details的相應選單設定,重新整理後生效

2、建個demo

3、在專案中使用

本地起一個vue專案

# vue cli建立專案
$ 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: 'http://[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"

然後就可以到後臺檢視我們報錯的內容了。

為了方便檢視具體的報錯內容,我們需要上傳sourceMap到sentry平臺。

一般 有兩種方式 sentry-cli sentry-webpack-plugin 方式,這裡為了方便採用webpack方式。

# 如果要上傳原始碼需安裝webpack外掛
$ yarn add @sentry/webpack-plugin -D
$ touch .sentryclirc
# 寫入配置
$ cat > .sentryclirc
[auth]
token=XXX

[defaults]
url=http://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, // 對應main.js版本號
cleanArtifacts: true, // 先清理再上傳
}),
],
},
}

執行 $ 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, // 對應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
...

三、最後

在我們做技術方案的時候,最好結合團隊的實際情況,然後做出取捨,選擇最符合實際的方案。

關注我,一起攜手進階

歡迎關注 前端早茶 ,與廣東靚仔攜手共同進階~