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, }, });
