Sentry(v20.12.1) K8S 云原生架构探索，Sentry JavaScript SDK 三种安装加载方式

系列

1. Sentry-Go SDK 中文实践指南
2. 一起来刷 Sentry For Go 官方文档之 Enriching Events
3. Snuba：Sentry 新的搜索基础设施(基于 ClickHouse 之上)
4. Sentry 10 K8S 云原生架构探索，Vue App 1 分钟快速接入
5. Sentry(v20.12.1) K8S 云原生架构探索，玩转前/后端监控与事件日志大数据分析，高性能+高可用+可扩展+可伸缩集群部署

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 repository 中全面阅读文档化的源代码。

中文文档陆续同步到：

• getsentry.hacker-linner.com

我是为少。
微信：uuhells123。
公众号：黑客下午茶。
谢谢点赞支持👍👍👍！