Sentry 10
算是目前开源界集错误监控,日志打点上报,事件数据实时分析最好用的软件了,没有之一。将它部署到 Kubernetes
,再搭配它本身自带的利用 Clickhouse
(大数据实时分析引擎)构建的 Snuba
服务进行数据分析~简直了。(已无敌?)
要将 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 错误处理
请注意,如果启用 SDK,Vue 将不会在内部调用其
logError
。这意味着在 Vue renderer 中发生的错误将不会显示在开发人员控制台中。如果要保留此功能,请确保传递logErrors: true
选项。
如果您使用的是 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,
},
});
文档同步到:
我是为少。