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

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

前言

一個錯誤監控系統應該做下面這些事情，這個方案適合前端人員比較少的團隊。

當錯誤發生的時候我們更需要一些輔助資訊來幫我們更快的定位錯誤，比如 JS錯誤型別、 JS錯誤資訊、JS錯誤堆疊、JS錯誤發生的位置以及相關位置的程式碼；JS錯誤發生的機率、瀏覽器的型別，版本號，裝置機型等等輔助資訊

技術方案

 選了國外比較成熟的方案 sentry

 Tips：【我們選免費即可】

• 免費夠我們用了，付費的就是他啥都幫你弄好，你只需要裝sdk 就行了
• sentry 是一個實時事件日誌記錄和聚合平臺。它專門用於監視錯誤和提取執行適當的事後操作所需的所有資訊, 而無需使用標準使用者反饋迴圈的任何麻煩。
• Sentry 是一個日誌平臺，分為客戶端和服務端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應用程式中間，程式出現異常就向服務端傳送訊息，服務端將訊息記錄到資料庫中並提供一個web節目方便檢視。Sentry由python編寫，原始碼開放，效能卓越，易於擴充套件，目前著名的使用者有Disqus, Path, mozilla, Pinterest等

有哪些功能

上報過來的問題

這個就是你的應用所有的異常

1.問題總數是指當前不同的問題，同一個問題出現的次數會在末尾那個數字體現

2.然後管理員可以將這個問題勾選後分配給其它成員

3. 有的問題可以將其 ignore 或者 resolve, 之後就不會出現在你的列表裡面

4.還有自定義搜尋：最多出現、最後出現時間、首頁出現等等

• 當前錯誤所發生的 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年的時候提供給了指令碼一鍵生成的方式

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 精準定位錯誤資訊

準備

1. sentry 後臺配置 authToken 用於上傳sourcemap 使用，如下圖注意勾選

• 2.下載 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()
        });
      });

其他

• 郵件
• 釘釘機器 可以去自己下載一些外掛配置

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

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~