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。

公眾號：黑客下午茶