前端項目接入Sentry監(jiān)控系統(tǒng)

一、前言
場景：我們的項目在本地測試時沒有問題，but在線上運行就遇到各種奇奇怪怪的問題。相信不少小伙伴應(yīng)該都遇到過這樣的情況，為了減少對用戶的影響，引入一個線上監(jiān)控系統(tǒng)是必不可少的。

方案：對于一些大型的團隊，往往會自研一套監(jiān)控系統(tǒng)。如果團隊資源有限引入個第三方的異常監(jiān)控系統(tǒng)也是一個不錯的方案。

常用的有：博睿、神策、sentry
本文我們分享下sentry。
二、原題
本文基于：

https://github.com/getsentry/sentry

https://github.com/getsentry/sentry-javascript

https://docs.sentry.io/

效果預(yù)覽



文檔預(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 --version
2、獲取sentry
將Sentry源碼克隆到本地，然后執(zhí)行如下命令：

git clone https://github.com/getsentry/onpremise.git
3、修改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
step3: 生成密鑰，并將它添加到.env作為SENTRY_SECRET_KEY
docker-compose run --rm web config generate-secret-key
step4: 將生成的秘密串字符復(fù)制到docker-compose.yml文件對應(yīng)中并保存，然后再將生成的key復(fù)制到docker-compose.yml文件中。
 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'
step5: 執(zhí)行如下的命令更新配置
docker-compose run --rm web upgrade
4、啟動服務(wù)
使用下面的命令啟動所有的服務(wù)：
docker-compose up -d

頁面效果：


use sentry
1、設(shè)置語言和時區(qū)
點擊頭像User settings - Account Details的相應(yīng)菜單設(shè)置，刷新后生效



2、建個demo


3、在項目中使用
本地起一個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://29312c0e8494419e8cdb1eee6e5212e4@sentry.hanyuan.vip/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)容了。


為了方便查看具體的報錯內(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)注：前端早茶