工作多年，發現大家總是會遇到這種特殊的場景：用戶反映某個功能異常。為了找出問題所在，我們嘗試在本地重現異常，但結果是什么都沒有。另一方面，前端代碼的運行環境，如PC瀏覽器、手機瀏覽器等，復雜且不可控。這意味著代碼中可能會出現各種不可預知的錯誤。

在這種情況下，如果我們想要擁有一套完整的前端異常監控系統，首先，需要關心的問題就是，如何及時捕捉異常，如何準確定位異常和錯誤的位置，采集到異常后如何及時通知相關人員？

選擇解決方案

我們先來看看常見的前端監控方案。

方案一：自我研究。

具體工作主要是：自己重寫Window對象中的onerror和onunhandledrejection方法，收集錯誤信息，通過服務端接口上傳，編寫服務端文件，使用Sourcemap文件恢復源碼排查問題。

此外，還可以搭建一個查看異常信息的平臺。因此，自研方法存在明顯的缺陷，需要大量的精力。當然，自研也有易于擴展的優勢，比如在前端監控中加入性能監控功能，方便后續頁面的性能優化。

方案二：借助成熟的第三方工具，例如 Sentry。

這種方法不需要大量的開發，只要訪問配置足夠。

對于這兩種解決方案，如果自己沒有那么多精力去研究，可以選擇使用第三方工具。

在成熟的第三方工具中，我推薦你使用 Sentry。因為 Sentry 是一個開源的 bug 跟蹤工具，可以幫助我們實時監控和修復系統 bug。

此外，Sentry 支持通過 Sourcemap 文件恢復 JS 錯誤調用堆棧，也可以在收集到異常后通過 Telegram 或郵件實時通知。

另一個重要的點是，Sentry 允許我們在自己的服務器上構建私有服務，這意味著我們可以免費使用 Sentry 的強大功能，避免源代碼泄露的風險。

下面這張圖可以直觀地展示哨兵采集異常信息的效果。

如何及時捕獲異常？

部署哨兵

第一步，無疑是部署 Sentry。 由于官方推薦使用 Docker 進行部署，且操作相對簡單，所以我將以 Docker 為例，向大家展示如何從零開始搭建 Sentry 服務。

首先，我們安裝 Docker 和 Docker-Compose。 安裝完成后，啟動Docker，拉取sentry-onpremise倉庫代碼，這是Sentry官方提供的安裝程序，然后啟動里面的安裝腳本。  

在此期間，它將指導您創建管理會員帳戶并最終啟動哨兵服務。 相關命令可以參考這段代碼：

git clone https://github.com/getsentry/onpremise
cd onpremise
./install.sh
$ docker-compose up -d

如果啟動過程沒問題，在瀏覽器中輸入http://ip:9000進入Sentry登錄頁面，然后使用剛剛創建的管理員用戶名和密碼登錄系統。

前端項目訪問

經過剛才的一些操作，我們的Sentry服務器就完成了，接下來，我們可以在應用中集成Sentry客戶端SDK，在前端代碼中實時報錯。

Sentry 非常強大，支持各種前端框架，如 Vue、Angular、React 等。我們都知道 Vue 是一個流行的前端輕量級框架，具有輕量級、高性能和組件化的優勢。那么我將以Vue項目為例進行詳細介紹。

創建項目

首先，我們點擊Sentry頁面左側導航欄中的第一項Projects，然后，點擊頁面右上角的Create Project按鈕。

然后，在Browser下選擇Vue，再次點擊CreateProject就可以創建項目了。

接下來，您將看到 Sentry 給出的 Vue 項目的配置指南，它將逐步指導您完成項目配置。

然后，我們繼續指南。

首先，通過npm在項目中安裝Sentry依賴的兩個npm包，分別是@sentry/browser和@sentry/integrations，然后，在main.js中導入。

然后，使用Sentry.init初始化和配置Sentry。配置的時候，教程里已經提供了初始化代碼，我們直接復制粘貼到main.js中即可。

最后，我們點擊指南底部的確認按鈕，然后，自動跳轉到本項目的Issue錯誤頁面。

這里需要特別注意的是DSN地址與項目一一對應，不能隨意更改。

import * as Sentry from '@sentry/browser'
import { Vue as VueIntegration } from '@sentry/integrations'
Sentry.init({
 dsn: 'https://xxxxxxxxxxxxxxxxx@sentry.in.cn/2',
 integrations: [new VueIntegration({
   Vue,
   attachProps: true
 })]
})

核實

現在，在Issue錯誤頁面上，我們看到，只有一個空白表單，并且沒有任務異常信息。 讓我們創建一個 JS 錯誤報告，看看 Sentry 的效果。

首先，我們在App.vue的created方法中添加一行代碼：this.test()，調用當前組件中不存在的方法，強行產生JS錯誤。 通過 Chrome DevTools 中的 Network 可以看到，每次頁面刷新時，都會發送一個 Sentry 相關的 Post 請求，也就是 Sentry 收集異常信息。 這時候進入Issue報錯頁面，我們發現Sentry已經顯示了捕獲到的異常：

我們知道，Sentry 將每個異常報告都視為一個 Event，每個 Event 都有一個 Fingerprint。 指紋默認由 Sentry 的分組算法生成。 相同指紋的事件將自動合并為一個問題。 具體生成邏輯可以查看官方文檔：https://docs.sentry.io/product/data-management-settings/event-grouping/

通過問題列表，我們可以獲得以下信息：異常類型、異常名稱、觸發位置、最近觸發時間、首次觸發時間等。

點擊進入問題詳情頁面，在頁面中間區域可以看到最新Event的具體信息，如用戶IP地址、瀏覽器信息、系統信息、異常調用棧信息等。

如何準確定位異常報錯的位置？

現在，我們看到 Sentry 已經捕獲了異常調用堆棧信息。但是，因為網上的代碼都是經過壓縮和混淆的，要知道是哪一行代碼報錯，只能全局搜索關鍵字，然后根據壓縮代碼的上下文定位。

那么如何查明錯誤消息呢？

首先，我們在Sentry后臺配置AuthToken，這是配置上傳Sourcemap的必要參數。

那么如何創建這個Token呢？

我們點擊頁面左上角的用戶名，在下拉菜單中找到User Settings，點擊進入用戶設置界面，然后，點擊Auth Tokens菜單選項新建一個Token。

接下來，我們在構建編譯代碼的時候開啟Sourcemap配置，然后，在根目錄下新建一個.sentryclirc文件。

最后，在項目中下載安裝Webpack插件@sentry/webpack-plugin，在打包配置文件中添加上傳Sourcemap到Sentry的配置。

具體配置請參考這段代碼：

[auth]
token=exxxxxxxxxxxx
[defaults]
project=xiaoan-web
org=sentry
url=https://sentry.xxxxx.com/
view raw

這里的 Release 屬性對應的是代碼版本。 Sentry在采集異常信息時，會同步采集用戶的代碼版本信息。 通過這些信息，我們可以知道是哪個版本引起了新的問題。

需要注意的是，UrlPrefix 屬性值并不是固定的，而是與項目靜態資源訪問路徑有關。

const SentryWebpackPlugin = require('@sentry/webpack-plugin')
const commitHash = require('child_process').execSync('git rev-parse HEAD').toString();
new SentryWebpackPlugin({
 include: path.resolve(__dirname, '../dist/static/js/'),
 ignoreFile: '.sentrycliignore',
 ignore: ['node_modules', 'webpack.config.js'],
 release: commitHash,
 urlPrefix: '~/static/js'  // https://ip.com/static/js/app.js
})

配置完成后，Sentry可以根據上傳的Sourcemap恢復代碼位置：

異常采集后如何及時通知相關人員？

當 Sentry 捕捉到異常時，我們希望它能實時通知開發者，針對這種情況，Sentry 提供了郵件通知功能，只需在 Sentry 的配置文件中添加相關配置即可。  

由于檢查郵件可能不夠及時，如果你的團隊使用 Telegram 進行協同工作，你可以嘗試使用第三方 Telegram 插件，你可以在網上搜索一下如何使用。

結論

以上就是今天的全部內容，希望你會喜歡，如果你覺得有用的話，請記得點贊我，關注我，并將它分享給你的朋友，也許能夠幫助到他。

最后，感謝您的閱讀，祝編程愉快！