當我們完成一個業務系統的上線時，總是要觀察線上的運行情況，查看日志發現問題并進行優化迭代。

因為測試永遠無法做到100%覆蓋，用戶也不會總是按照我們所預期的進行操作，因此我們需要在系統異常時主動對其進行收集上報，以制定解決方案。

當生產環境中產生了一個 bug 時，如何做到迅速報警，找到問題原因，修復后又如何在線上驗證？此時我們需要一個高效的錯誤監控系統。

前端錯誤監控

后端有各種強大的監控服務，給我們的應用穩定性保駕護航，然而大多數情況只能記錄接口被請求之后所發生的錯誤。隨著 Web 應用越來越強大，客戶端的代碼可就越來越復雜，很多不可預期錯誤發生在用戶端，因此前端錯誤監控就不可或缺了。

Why Sentry

我們需要一個成熟的監控系統，Sentry 就是一個這樣的工具。

Sentry - 正如其名「哨兵」，可以實時監控生產環境上的系統運行狀態，一旦發生異常會第一時間把報錯的路由路徑、錯誤所在文件等詳細信息以郵件形式通知我們，并且利用錯誤信息的堆棧跟蹤快速定位到需要處理的問題。

選擇 Sentry 作為前端監控系統，還因為下幾點：

• 開源
• 對各種前端框架的友好支持 (Vue、React、Angular)
• 支持 SourceMap

Sentry 官方提供的免費服務有次數限制，達到一定限制后繼續使用就需要收費了，但是我們可以利用 Sentry 的開源庫在自己的服務器上搭建服務，官方已經提供了完善的操作文檔。

準備工作

Sentry 的搭建方式主要有兩種：

• 通過 Python 安裝
• 通過 Docker 安裝

由于 Docker 更加方便易控，而且官方推薦的也是 Docker 部署，那下面就以 Docker 為例，在滴滴云的服務器上從零開始搭建一個 Sentry 服務，本示例中使用的服務器配置 1核CPU，2G 內存，操作系統 CentOs 7.4。

注意事項

• 服務器的內存至少 2G，否則在執行 sentry upgrade 命令時會出現問題。
• 以下所有命令在 sudo 權限下執行，否則 Docker 無法運行

安裝 Docker

$ yum install docker -y

安裝 Docker-Compose

$ pip install docker-compose

啟動 Docker

$ systemctl start docker

開始搭建

1. 拉取 sentry-onpremise 倉庫

Onpremise 是官方提供的包含了使用 Docker 部署 Sentry 所需依賴的引導程序。

$ git clone https://github.com/getsentry/onpremise.git

2. 創建服務端服務

$ cd onpremise# 新建本地數據庫和 Sentry 配置的目錄 $ docker volume create --name=sentry-data && docker volume create --name=sentry-postgres# 創建環境變量配置文件 $ cp -n .env.example .env# 構建 Docker Services $ docker-compose build# 生成秘鑰 $ docker-compose run --rm web config generate-secret-key# 復制秘鑰(即最后一行)，編輯 .env 文件，將 SENTRY_SECRET_KEY 對應的 value 修改為剛才復制下來的秘鑰 $ vim .env# 創建數據庫，生成管理員賬號 $ docker-compose run --rm web upgrade# 啟動 Sentry 服務 $ docker-compose up -d# 查看容器 $ docker-compose ps

如果執行過程中一切正常的話，在瀏覽器中輸入http://ip:9000 就進入 Sentry 的登錄頁面了，使用上面創建的管理員用戶名和密碼登錄系統。

集成客戶端 SDK

經過以上步驟我們 Sentry 服務端完成了，接下來就可以在應用中集成 Sentry 客戶端 SDK，用來在前端代碼中實時上報錯誤。

登錄系統后首先會進入配置頁面，簡單配置一下：

• Root URL: 綁定本 Sentry 服務的域名或者直接填寫本服務的 IP
• Admin Email: 系統管理員的郵件地址
  

配置好后，進入添加新項目界面，以 Vue 應用為例，點擊 New Project 創建新項目，選擇 Vue。創建成功后，按照指引可以看到Sentry 推薦使用 Raven.js 及其 Vue 插件，在我們的前端項目中引入監控的模塊，注意監控模塊要在 Vue 之后引入。

$ npm install raven-js // main.js// 先引入Vue import Vue from 'vue'import Raven from 'raven-js' import RavenVue from 'raven-js/plugins/vue'Raven.config('https://<key>@sentry.io/<project>').addPlugin(RavenVue, Vue).install()

驗證

到這里整個錯誤監控系統算是成型了，我們可以制造點錯誤，來驗證一下功能是否符合預期。可以直接在前端程序代碼里寫點 bug，觸發之后可以在前端調試工具的 network 中看到上報錯誤的網絡請求，同時在 Sentry Dashboard 會發現這個錯誤，查看詳情可以看到這個錯誤的詳細信息了。

// main.js // 使用一個未聲明過的變量觸發錯誤 console.log(hello)

關聯 SourceMap

目前大多數前端程序基本都會使用 Webpack 之類的工具構建，上線之后的代碼都是經過壓縮混淆的，所以這樣的報錯信息其實意義不大，錯誤位置根本無從定位，異常堆棧也難以理解，排查非常耗時費力，此時就要使用 SourceMap 對錯誤進行定位了，而 Sentry 也正對此有很好的支持。

使用 sentry-cli

查看官方文檔對引入 SourceMaps 的說明，可以看到有兩種方式來上傳 SourceMap 文件:

• sentry-webpack-plugin: Sentry 提供的 Webpack 插件，靈活性不高
• sentry-cli: 靈活性比較高，可以針對不同項目進行單獨的配置

下面以 sentry-cli 的方式為例，看一下具體流程。

安裝 sentry-cli

$ npm install sentry-cli-binary -g

生成 token

在 Sentry Dashboard 頁面選擇 API，生成 token，注意要勾選 project:write，開啟項目的寫權限。

登錄 cli

$ sentry-cli login

執行后輸入上生成的 token

關于 Relese 控制

說到上傳 SourceMap 就要提一下 Release。在平時開發過程中我們希望不監控開發環境下的異常，也有區分測試環境和生產環境異常的需求，此時就需要 Release 將異常進行版本控制。

• 創建 Release

  $ sentry-cli releases -o 組織名稱 -p 項目名稱 new 版本號

  組織名稱、項目名稱可以在 Sentry Dashboard 中查看，同時可以在 “Releases” 中查看是否創建成功。這樣一來，通過生成不同的版本號，我們可以對異常進行分類。

• 本地應用 Release
  回到前端項目，在 Raven config 中添加對應的 Release，并指定版本號，每次上報的異常就會被分類到該版本下。

  // main.js ... import Raven from 'raven-js';Raven.config(DSN, {release: '版本號'}).addPlugin(RavenVue, Vue).install()

• 刪除 Release
  在刪除 Release 時需要將其下的異常處理掉，并將該版本的 SourceMap 文件清空，否則會報錯

  $ sentry-cli releases -o 組織名稱 -p 項目名稱 delete 版本號

上傳 SourceMap

以上概念了解之后，就可以開始上傳 SourceMap 文件了。

sentry-cli releases -o 組織名稱 -p 項目名稱 files 版本號 upload-sourcemaps --url-prefix 線上js文件所在目錄

注意：

• 通常來說 vendor.js 這種各種類庫打包后生成的代碼，并不是我們程序的源代碼，不需要上傳
• --url-prefix 對應的是線上JS文件的目錄，例如 ~/static/js/，其中~/代表網站根目錄

SourceMap 上傳成功后，就可以在 Sentry 上直接看到報錯所在的源碼了。

主動捕獲錯誤

現在我們已經能成功監控程序中的大多數錯誤，但是無法捕獲異步錯誤（比如定時器、接口請求錯誤）此時可以利用 raven.caputureException() 進行主動上報。

// 接口請求 axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {window.$Raven.captureException(error);})// 定時器任務 setTimeout(()=>{try {// do something} catch (err) {window.$Raven.captureException(err);} }, 300)

郵箱設置

完成上面的所有步驟，我們的 Sentry 可以使用了，但是還有一個問題，上報錯誤時并沒有收到郵件，作為一個自動化的異常提醒工具，沒有了提醒功能，它價值就打大打折扣了。

在搭建好的 Sentry 的 Web 頁面中無法配置郵箱 smtp 信息，需要修改配置文件 config.yml。

############### # Mail Server # ###############mail.backend: 'smtp' # Use dummy if you want to disable email entirely mail.host: 'smpt.gmail.com' # 輸入郵箱smpt服務器地址 mail.port: 25 mail.username: 'your-email-address' mail.password: 'your-email-password' mail.use-tls: false

然后修改 docker-compose.yml，為其中的 Web 容器添加 volumes 卷，使剛才修改的 config.yml 配置文件生效。

web:volumes:- ./config.yml:/etc/sentry/config.yml....

然后重啟服務

$ docker-compose up

測試一下，去觸發一個錯誤，應該可以正常接收郵件了。

---

搭建過程中可能出現的錯誤

$ docker-compose run --rm web upgrade

在執行上面的命令過程中，可能會出現創建數據庫失敗、跳過了創建管理員賬號步驟等錯誤，導致 Web頁面無法使用。首先檢查服務器的硬件配置，內存是否滿足要求 (2G 以上)，否則大概率就是數據庫初始化時出錯，此時可以手動初始化數據可以及創建管理員用戶。

進入 sentry-web 的 shell

$ docker-compose run --rm web shell

初始化數據

$ from sentry.models import Project $ from sentry.receivers.core import create_default_projects $ create_default_projects([Project])

退出 sentry-web 的 shell，手動創建用戶

$ docker-compose run --rm web createuser

刷新網頁就可以使用剛剛創建好的賬戶登錄。

---

參考文章

• sentry-onpremise
• Sentry 前端部署拓展篇

總結

以上是生活随笔為你收集整理的搭建前端错误监控系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。