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

為少 發表於 2021-11-17
JavaScript

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

系列

原始碼倉庫地址

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

支援的平臺

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

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

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

開發除錯

設定環境

要執行 test suitecode linter,需要 node.jsyarn

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

yarn
yarn lerna bootstrap
yarn build

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

構建軟體包

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

  • yarn build:dev,它執行每個包的 ES5ES6 版本的一次性構建。
  • yarn build:dev:filter <name of npm package>,它只在與給定包相關的專案中執行 yarn build:dev(例如,執行 yarn build:dev:filter @sentry/react 將構建 react 包、它的所有依賴項(utilscorebrowser 等),以及所有依賴它的包(目前是 gatsbynextjs))。
  • yarn build:dev:watch,在 watch 模式下執行 yarn build:dev(推薦)

新增測試

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

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

執行測試

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

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

除錯測試

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

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

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

實戰

測試程式碼:

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

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

Linting

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

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

公眾號:黑客下午茶