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

2021-05-27 19:12:51 浏览数 (1)

系列

  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

代码语言：javascript复制
# 使用 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。

代码语言：javascript复制
<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。这使我们可以为只需要错误监视的用户减少文件大小。

代码语言：javascript复制
<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 时引用它：

代码语言：javascript复制
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.com
  • connect-src: *.sentry.io

延迟加载 Sentry

Loader 是我们 SDK 的一个小型包装器，它可以做一些事情：

  • 始终拥有我们 SDK 的最新推荐稳定版本
  • 捕获所有全局错误和未处理的 promise rejections
  • 延迟注入我们的 SDK 到您的网站
  • 加载 SDK 后，Loader 会将所有内容发送给 Sentry

loader 的压缩量(gzipped)小于 1kB，并且在您的 DSN 中包含 Sentry.init 调用。

代码语言：javascript复制
<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：

代码语言：javascript复制
<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
代码语言：javascript复制
sdk ide cdn 网络安全 javascript

0 人点赞