Sentry(v20.12.1) K8S 雲原生架構探索，Sentry JavaScript SDK 三種安裝加載方式

NPM

# 使用 yarn
yarn add @sentry/browser @sentry/tracing
# 使用 npm
npm install --save @sentry/browser @sentry/tracing

CDN

Sentry 支持通過 CDN 加載其 JavaScript SDK。通常，我們建議使用 npm 軟件包（@sentry/browser）作為 CDN 創建方案，在這些方案中，由於網絡問題或廣告擴展程序之類的常見擴展，Sentry 無法加載。如果必須使用 CDN，請看看如何使用我們的 JS 加載器延遲加載 Sentry。

<script
  src="https://browser.sentry-cdn.com/5.29.2/bundle.min.js"
  integrity="sha384-ir4+BihBClNpjZk3UKgHTr0cwRhujAjy/M5VEGvcOzjhM1Db79GAg9xLxYn4uVK4"
  crossorigin="anonymous"
></script>

性能 Bundle

要使用 Sentry 的性能跟蹤，需要一個 alternative(備用) bundle。這使我們可以為只需要錯誤監視的用戶減少文件大小。

<script
  src="https://browser.sentry-cdn.com/5.29.2/bundle.tracing.min.js"
  integrity="sha384-4zxA5Bnxor/VkZae20EqPP3A/6vDlw1ZhqF7EvpmeTfWYFjPIDdaUSOk/q7G/bYw"
  crossorigin="anonymous"
></script>

您只需要加載 bundle.tracing.min.js，即可提供錯誤和性能監控。

這裡要注意的最重要的一點是 Sentry.Integrations 已經可用，可以在調用 Sentry.init 時引用它：

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  release: "my-project-name@" + process.env.npm_package_version,
  integrations: [new Sentry.Integrations.BrowserTracing()],
  // 我們建議在生產中調整此值，或使用 tracesSampler 進行更精細的控制
  tracesSampleRate: 1.0,
});

可用的 Bundles

提供了多種 bundles，這些 bundles 針對 Sentry 的各種集成進行了優化。

附加配置

使用 defer

如果您在腳本中包含 defer，請確保該應用可以監視其後的所有內容。我們強烈建議您使用 defer，同時將瀏 browser SDK 的腳本標籤放在第一位，並標記它 -- 以及所有其他腳本 -- defer（而不是 async ），以確保在其他任何腳本之前執行。

如果不這樣做，您會發現在加載 Sentry 之前可能會發生錯誤，這意味著您將無視這些問題。

內容安全策略

如果您的站點上設置了內容安全策略（CSP），則需要添加從何處加載 SDK 的 script-src，以及 DSN 的來源。例如：

• script-src: https://browser.sentry-cdn.com
• connect-src: *.sentry.io

延遲加載 Sentry

Loader 是我們 SDK 的一個小型包裝器，它可以做一些事情：

• 始終擁有我們 SDK 的最新推薦穩定版本
• 捕獲所有全局錯誤和未處理的 promise rejections
• 延遲注入我們的 SDK 到您的網站
• 加載 SDK 後，Loader 會將所有內容發送給 Sentry

loader 的壓縮量(gzipped)小於 1kB，並且在您的 DSN 中包含 Sentry.init 調用。

<script
  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
  crossorigin="anonymous"
></script>

附加配置

如果要設置其他選項，則必須像這樣設置它們：

onLoad 是 Loader 僅提供的功能；一旦將 SDK 注入網站，Loader 就會調用它。Loader 的 init() 工作原理也有所不同。為了方便起見，我們在內部合併了這些選項，而不僅僅是設置選項，這是為了方便起見，因此您不必再次設置 DSN，因為 Loader 已經包含了它。

如前所述，Loader 會延遲加載我們的 SDK 並將其注入您的網站，但您也可以告訴 loader 立即獲取它，而不是僅在需要時獲取它。將 data-lazy 設置為 no 將告訴 Loader 儘快注入 SDK：

<script>
  Sentry.onLoad(function() {
    // 使用任何你想要的 Sentry.* 函數
  });
  Sentry.forceLoad();
</script>

SDK 版本

進入 Sentry Web UI，查看 Settings -> Projects -> Client Keys (DSN)，然後按 Configure 按鈕。在這裡，您可以查看用於配置 DSN 的選項，並選擇 Loader 應加載的 SDK 版本。

由於更改已被緩存，因此可能需要幾分鐘的時間才能在代碼中看到更改。

當前限制

由於我們以異步方式注入我們的 SDK，因此我們將僅為您監視全局錯誤和未處理的 promise，直到 SDK 完全加載為止。這意味著在下載過程中我們可能會錯過 breadcrumbs（麵包屑）。

例如，用戶單擊您網站上的按鈕正在發出 XHR 請求。在 SDK 完全加載之前，我們不會遺漏任何錯誤，只會遺留 breadcrumbs（麵包屑）。您可以通過手動調用 forceLoad 或設置 data-lazy="no" 來減少此時間。

如果您想了解 loader 本身的內部工作原理，則可以在 sentry-javascript repo 中全面閱讀文檔化的源代碼。