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 错误处理
请注意，如果启用 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,
},
});
