Sentry 10 K8S 云原生架构探索，Vue App 1 分钟快速接入

Sentry 10 算是目前开源界集错误监控，日志打点上报，事件数据实时分析最好用的软件了，没有之一。将它部署到 Kubernetes，再搭配它本身自带的利用 Clickhouse （大数据实时分析引擎）构建的 Snuba 服务进行数据分析~简直了。（已无敌?）

Vue

要将 Sentry 与 Vue 应用程序一起使用，您将需要使用 Sentry 的 Vue SDK：@sentry/vue.

npm install --save  @sentry/vue
# or
yarn add  @sentry/vue

@sentry/vue 会自行报告由您的应用程序触发的任何未捕获的异常。

此外，SDK 将捕获引发错误的活动组件的名称和属性状态。这是通过 Vue 的 config.errorHandler hook 报告的。

然后将其添加到您的 app.js 中：

import Vue from "vue";
import * as Sentry from '@sentry/vue';

Sentry.init({
  Vue: Vue,
  dsn: '__PUBLIC_DSN__',
});

此外，SDK 接受一些不同的配置选项，可用于更改其行为：

• 传入 Vue 是可选的，如果不传入，window.Vue 必须存在。
• 传入 attachProps 是可选的，如果未提供，则为 true。如果将其设置为 false，Sentry 将禁止发送所有 Vue 组件的属性进行记录。
• 传入 logErrors 是可选的，如果未提供，则为 false。如果将其设置为 true，Sentry 也将调用原始 Vue 的 logError 函数。

Vue 错误处理

如果您使用的是 CDN 版本或 Loader，我们为每个集成提供一个独立的文件，您可以像这样使用它：

<script	
  src="https://browser.sentry-cdn.com/5.29.2/vue.min.js"	
  integrity="sha384-FKagncFah3a9nkKNEIDQqXhYnny5Wzc37/AZV5eKKnRVS8uPpeFPdu9dnrvAnRpF"	
  crossorigin="anonymous"	
></script>	

<script>	
  Sentry.init({	
    Vue,
    dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",	
  });	
</script>

监控性能

npm install --save @sentry/vue @sentry/tracing
# or
yarn add @sentry/vue @sentry/tracing

跟踪 Vue 应用程序的最基本配置（仅跟踪顶级组件）如下所示：

import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  // ...
  integrations: [
    new Integrations.BrowserTracing(),
  ],

  // 我们建议在生产中调整此值，或使用 tracesSampler 进行更精细的控制
  tracesSampleRate: 1.0,
});

如果要跟踪子组件，并查看有关渲染过程的更多详细信息，请配置集成以跟踪所有子组件：

Sentry.init({
  Vue,
  tracingOptions: {
    trackComponents: true,
  },
});

文档同步到：

• getsentry.hacker-linner.com/platforms/j…

我是为少。

微信：uuhells123。

公众号：黑客下午茶。

谢谢点赞支持???！