Sentry(v20.12.1) K8S 云原生架构探索，Sentry JavaScript SDK 三种安装加载方式
Sentry(v20.12.1) K8S 云原生架构探索，Sentry JavaScript SDK 三种安装加载方式
系列
- Sentry-Go SDK 中文实践指南
- 一起来刷 Sentry For Go 官方文档之 Enriching Events
- Snuba：Sentry 新的搜索基础设施(基于 ClickHouse 之上)
- Sentry 10 K8S 云原生架构探索，Vue App 1 分钟快速接入
- 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 的各种集成进行了优化。
File | Integrity Checksum |
|---|---|
angular.js | sha384-oGlOwTDeutKQy8iIj86N5Iz+cg3oB7k7DwwAFF+JvU5Ryk3QpBd9RWe7b1dvbytH- |
angular.min.js | sha384-glEOteL1rvN2KINqDwBkOPyi+yM/AuHdHZoW89/oufCLWhmOZvRLTQcMarZLrahO |
bundle.es6.js | sha384-C/1UhIXVvIEeHWK+Oon2qJ5dknXU/6yoOszWad+UgIQaMvkuRapwg7GBAm89WKkY |
bundle.es6.min.js | sha384-YtQnmGXv08gDRhGCtnUN32p5tEk2xCJePCG5XGcFefgts4LACdWXenPO5/kVkQKg |
bundle.js | sha384-70m6a/iRDkIhWo9D2seDfr054bdBakn8SM/I1Qx/2E1E2oeFrB/UlfRRQ7lk6w29 |
bundle.min.js | sha384-ir4+BihBClNpjZk3UKgHTr0cwRhujAjy/M5VEGvcOzjhM1Db79GAg9xLxYn4uVK4 |
bundle.tracing.js | sha384-tsSu02fvNXxzKOYMmsMHW6Zjb3xpUtLkKsF3h63S/8uzbyoI4sURznHBWWmmYBnT |
bundle.tracing.min.js | sha384-4zxA5Bnxor/VkZae20EqPP3A/6vDlw1ZhqF7EvpmeTfWYFjPIDdaUSOk/q7G/bYw |
captureconsole.js | sha384-FB7wnw52/iiuFH+aV7+yF3+Hb8y+UeaYjreZafP7GzE9VjoWZ0k196k4XseGRkeK |
captureconsole.min.js | sha384-6YIh+FyIHrE7APnLltmw5AcyyEI7yV3pgn5I/aww3gYxGrAsotTDRIsix05d1bmg |
debug.js | sha384-CzFfkxQdU/85sLu1YXX2lWrZU/pJEkSB7qiwkIwFwHQn/+dWp9Qz8YADcVNlwpUY |
debug.min.js | sha384-gfwqW2T9/pJzXG5kGMjh219m8NxYr4sFdNEmk8Kcmm03LLR3e7u0MUCJtF+BvwlA |
dedupe.js | sha384-w30Nic/lP8/Lwg/nJr5WAydru2HshwlpwrbablyGtwy93SdrKOXBENhAbFar8U61 |
dedupe.min.js | sha384-991Pgp/m4NC5gP7q/xzXphPFKPZI3iGG04gFtnoHlyH13gSiR/cQJVh+/5vjnULG |
ember.js | sha384-uIwfFqGm1HIvIFAzmFi7+254jT3en0RDGQBep5yjZlUM5m5+wkxlV3iwtxbRSiDL |
ember.min.js | sha384-AoDWDCFzGgUlcjpTPIOucLHY0TcDkJISfQTounFvJC9id+SLfT+LMV/omYXeSxtk |
extraerrordata.js | sha384-UJSF3duqUmoZZYNHJIgczPWi0zF4dj9ZjXfU+HWSGsCkmbAwHvXqcdgc5IcmZBUb |
extraerrordata.min.js | sha384-32fXO2AIiHJpC33l8L8jhTkgPMY5QyAMH+E+3qyI4LI+RC4BsMtaqi1Y0wncuONI |
offline.js | sha384-6AWlLn2pEAwsHjZOeLUKhHPtfAzzAC7GXXYpFW1XZQ1OChliYYUvWwSfrmEPe+R8 |
offline.min.js | sha384-nOHWW5k4teYVTgdr9pem7/0/N/mt6DLwL/vipeoYd/0u0lh3Ld9IiRAIWgk+ubid |
reportingobserver.js | sha384-ZtU5drTUdMPOWXuUZvgv4QyqMxkDNdiBiEbj8aD5CmwABHCI/XUFd2eC3iRRlc+p |
reportingobserver.min.js | sha384-c8fGh3K1+dBi9WNNtK2eVmaEgfoM3Rq1gY6KeRoA/WSi7RlhxRkUmVK37DJTwr7F |
rewriteframes.js | sha384-k1F/xgCZmOcziSivt8QoKMaELWZmjNJFm+n2PX/2MEKWrszB2IL6S4q+JDJ7o/8N |
rewriteframes.min.js | sha384-22utNfjd1bJOgWt7yrPsUIWR7gluO23PO7d2m30lqrmnj5DH3OmVa8fwcwZhbfPp |
sessiontiming.js | sha384-9srvADRpjm3FrmiK6dY0NGV4wnTG4dt8onLWUx6LRVN1xhtw+oRJnQ1LtKi4kqGB |
sessiontiming.min.js | sha384-yy0Jah9kyZt8VCnKVBxDj92pIC/E9XFkw5G6NXx2+0ZJbTBn83Y3X32KqAZxhF9b |
transaction.js | sha384-KN4xQF97K+t2Zgsqg8FiZE5++QLb0PCD4+v0k0ZVg6rl47vvmUIiSueozKB29Gu1 |
transaction.min.js | sha384-p+n3NUtytg2Zgunyx5gQNdbZk7AieZyquN8nOaL7+hbqbe0SZomZIQJ5apsiXuLd |
vue.js | sha384-e6Vy50VfbAicS4Fa6R4tigCfJ3q+ifS/AYFyhP7+OtXcLjr0C8zHCoh2DCJ1EMNP |
vue.min.js | sha384-FKagncFah3a9nkKNEIDQqXhYnny5Wzc37/AZV5eKKnRVS8uPpeFPdu9dnrvAnRpF |
附加配置
使用 defer
如果您在脚本中包含 defer，请确保该应用可以监视其后的所有内容。我们强烈建议您使用 defer，同时将浏 browser SDK 的脚本标签放在第一位，并标记它 -- 以及所有其他脚本 -- defer（而不是 async ），以确保在其他任何脚本之前执行。
如果不这样做，您会发现在加载 Sentry 之前可能会发生错误，这意味着您将无视这些问题。
内容安全策略
如果您的站点上设置了内容安全策略（CSP），则需要添加从何处加载 SDK 的 script-src，以及 DSN 的来源。例如：
script-src: https://browser.sentry-cdn.comconnect-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 中全面阅读文档化的源代码。
中文文档陆续同步到：
- https://getsentry.hacker-linner.com