Sentry 官方 JavaScript SDK 簡介與除錯指南

系列

• 1 分鐘快速使用 Docker 上手最新版 Sentry-CLI - 建立版本
• 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps
• Sentry For React 完整接入詳解
• Sentry For Vue 完整接入詳解
• Sentry-CLI 使用詳解
• Sentry Web 效能監控 - Web Vitals
• Sentry Web 效能監控 - Metrics
• Sentry Web 效能監控 - Trends
• Sentry Web 前端監控 - 最佳實踐(官方教程)
• Sentry 後端監控 - 最佳實踐(官方教程)
• Sentry 監控 - Discover 大資料查詢分析引擎
• Sentry 監控 - Dashboards 資料視覺化大屏
• Sentry 監控 - Environments 區分不同部署環境的事件資料
• Sentry 監控 - Security Policy 安全策略報告
• Sentry 監控 - Search 搜尋查詢實戰
• Sentry 監控 - Alerts 告警
• Sentry 監控 - Distributed Tracing 分散式跟蹤
• Sentry 監控 - 面向全棧開發人員的分散式跟蹤 101 系列教程(一)
• Sentry 監控 - Snuba 資料中臺架構簡介(Kafka+Clickhouse)
• Sentry 監控 - Snuba 資料中臺架構(Data Model 簡介)
• Sentry 監控 - Snuba 資料中臺架構(Query Processing 簡介)

原始碼倉庫地址

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

支援的平臺

對於每個主要的 JavaScript 平臺，都有一個特定的高階 SDK，可以在單個包中提供您需要的所有工具。 有關更多詳細資訊，請參閱這些 SDK 的 README 和說明：

• @sentry/browser: 瀏覽器的 SDK，包括對基礎主幹(GlobalHandlers, TryCatch, Breadcrumbs, LinkedErrors, UserAgent, Dedupe)的整合。
• @sentry/node: 適用於 Node 的 SDK，包括 Express、Koa、Loopback、Sails 和 Connect 的整合。
• @sentry/angular: 啟用 Angular 整合的瀏覽器 SDK。
• @sentry/react: 啟用 React 整合的瀏覽器 SDK。
• @sentry/ember: 啟用 Ember 整合的瀏覽器 SDK。
• @sentry/vue: 啟用 Vue 整合的瀏覽器 SDK。
• @sentry/gatsby: Gatsby 的 SDK。
• @sentry/nextjs: Next.js 的 SDK。
• @sentry/integrations: 可用於增強 JS SDK 的可插拔整合。
• @sentry/electron: 支援原生崩潰的 Electron SDK。
• @sentry/react-native: 支援原生崩潰的 React Native SDK。
• @sentry/capacitor: 支援原生崩潰的 Capacitor App 和 Ionic 的 SDK。
• sentry-cordova: 支援原生崩潰的 Cordova App 的 SDK。
• raven-js: 舊的穩定 JavaScript SDK，我們仍然支援併發布 SDK 的錯誤修復，但所有新功能都將在 @sentry/browser 中實現，它是繼任者。
• raven:舊的穩定 Node SDK，與 raven-js 一樣，我們仍然支援併發布 SDK 的錯誤修復，但所有新功能都將在 @sentry/node 中實現，它是繼任者。

用於平臺 SDK 開發的共享軟體包

• @sentry/tracing: 為效能監控/跟蹤提供整合和擴充套件。
• @sentry/hub: SDK 的全域性狀態管理。
• @sentry/minimal: Sentry 支援的最小 SDK
• @sentry/core: 具有介面、型別定義和基類的所有 JavaScript SDK 的基礎。
• @sentry/utils: 一組對各種 SDK 有用的輔助程式和實用函式。
• @sentry/types: 所有軟體包中使用的型別定義。

開發除錯

設定環境

要執行 test suite 和 code linter，需要 node.js 和 yarn。

• https://nodejs.org/download
• https://yarnpkg.com/en/docs/install

sentry-javascript 是一個包含多個軟體包的 monorepo，使用 lerna 管理它們。 首先，安裝所有依賴項，使用 lerna 引導工作區，然後執行初始構建，以便 TypeScript 可以讀取所有連結的型別定義。

yarn
yarn lerna bootstrap
yarn build

這樣，repo 就完全設定好了，您可以執行所有命令了。

構建軟體包

由於我們使用的是 TypeScript，因此您需要將程式碼轉換為 JavaScript 才能使用它。來自 repo 的頂層，有三個可用命令：

• yarn build:dev，它執行每個包的 ES5 和 ES6 版本的一次性構建。
• yarn build:dev:filter <name of npm package>，它只在與給定包相關的專案中執行 yarn build:dev（例如，執行 yarn build:dev:filter @sentry/react 將構建 react 包、它的所有依賴項（utils、core、browser 等），以及所有依賴它的包（目前是 gatsby 和 nextjs））。
• yarn build:dev:watch，在 watch 模式下執行 yarn build:dev（推薦）

新增測試

任何重要的修復/功能都應該包括測試。您會在每個軟體包中找到一個 test 資料夾。

請注意，僅對於 browser 包，如果您將新檔案新增到整合測試套件中，您還需要將其新增到shell.js 中的列表中。 在所有包中，向現有檔案新增測試都可以開箱即用。

執行測試

執行測試與構建的工作方式相同 - 在專案根目錄執行 yarn test 將對所有包執行測試，在特定包中執行 yarn test 將為該包執行測試。還有一些命令可以在每個位置執行測試的子集。檢視相應 package.json 的 scripts 條目以瞭解詳細資訊。

注意：你必須在 yarn test 工作之前執行 yarn build。

除錯測試

如果您在編寫測試時遇到麻煩並需要除錯其中之一，您可以使用 VSCode 的 debugger 來完成。

如果您尚未安裝它，請安裝 Tasks Shell Input 擴充套件，您可以在側邊欄的“擴充套件”選項卡中找到它作為推薦的工作區擴充套件之一。

1. 將斷點或 debugger 語句放置在測試或底層程式碼中您希望 jest 暫停的任何位置。
2. 開啟包含相關測試的檔案，並確保其選項卡處於活動狀態（以便您可以看到檔案的內容）。
3. 切換到側邊欄中的 debugger，然後從下拉選單中選擇 Debug unit tests - just open file。
4. 單擊綠色的 “play” 按鈕以 watch 模式在開啟的檔案中執行測試。

實戰

測試程式碼：

• https://github.com/getsentry/sentry-javascript/blob/master/packages/minimal/test/lib/minimal.test.ts

專業提示：如果您的任何斷點在由多個測試執行的程式碼中，並且您執行整個測試檔案，您將在不關心的測試中間一遍又一遍地停留在這些斷點上。為避免這種情況，請將測試的初始 it 或 test 替換為 it.only 或 test.only。這樣，當您遇到斷點時，您就會知道您到達了有問題的測試的一部分。

Linting

與構建和測試類似，linting 可以通過呼叫 yarn lint 在專案根目錄或單個包中完成。

注意：你必須在 yarn lint 工作之前執行 yarn build。

公眾號：黑客下午茶