英文 | https://javascript.plainenglish.io/how-to-catch-frontend-exceptions-with-sentry-34773b026ced
工作多年，發現大家總是會遇到這種特殊的場景：使用者反映某個功能異常。為了找出問題所在，我們嘗試在本地重制異常，但結果是什麼都沒有。另一方面，前端代碼的運作環境，如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://[email protected]/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 插件，你可以在網上搜尋一下如何使用。
結論
以上就是今天的全部内容，希望你會喜歡，如果你覺得有用的話，請記得點贊我，關注我，并将它分享給你的朋友，也許能夠幫助到他。
最後，感謝您的閱讀，祝程式設計愉快！