Vue

在 Vue 应用中要使用 Sentry 的话，需要安装 Sentry 的浏览器版本的 JavaScript SDK：@sentry/browser。

npm install --save  @sentry/browser @sentry/integrations

Sentry 会自动上报应用引起的所有异常。

而且，当活跃中的组件抛出错误时，name 和 props 状态都会被捕获。这个是通过 Vue 的 config.errorHandler 钩子实现的。

添加下面的代码到 app.js 中：

import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Vue as VueIntegration } from "@sentry/integrations";
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new VueIntegration({ Vue, attachProps: true })],
});

另外，Integrations.Vue 接受一些不同的配置，有不同的作用：

• Vue 是可选的，如果不设置，就必须要有 Window.Vue。
• attachProps 是可选的，默认为 true。如果设置为 false，Sentry 将不会上传 Vue 组件的 props。
• logErrors 是可选的，默认为 false。如果设置为 true，Sentry 同样会调用 Vue 的 logError 函数。

Vue 的错误处理 需要注意，如果你想用这个集成，Vue 就不会在调用内部的 logError 。这就是说 Vue 渲染过程中的错误不会显示在开发者控制台中。如果你还是想使用这个功能，确保传递 logErrors: true 选项。

如果你用的是 CDN 或者加载器，我们为每个集成提供了独立的文件，你可以这么用：

<!-- Note that we now also provide a es6 build only -->
<!-- <script src="https://browser.sentry-cdn.com/5.23.0/bundle.es6.min.js" integrity="sha384-ctVIHkuneDOr6QAzHv0rcNu0vWe47aCH7jrMQnO7o37Z7G5zDVq9b++/C7opuatD" crossorigin="anonymous"></script> -->
<script
  src="https://browser.sentry-cdn.com/5.23.0/bundle.min.js"
  integrity="sha384-5yYHk2XjpqhbWfLwJrxsdolnhl+HfgEnD1UhVzAs6Kd2fx+ZoD0wBFjd65mWgZOG"
  crossorigin="anonymous"
></script>
<!-- If you include the integration it will be available under Sentry.Integrations.Vue -->
<script
  src="https://browser.sentry-cdn.com/5.23.0/vue.min.js"
  integirty="sha384-HvKPtlBmUYHo02VaRMvZbJL7PLFvYy7c0c3c9ZaY5M3OtiY2ywraZe8au7WtLbCH"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({
    dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
    integrations: [new Sentry.Integrations.Vue({ Vue, attachProps: true })],
  });
</script>

性能监控

npm install --save @sentry/browser @sentry/integrations @sentry/tracing

下面是最基础的一个配置，它只会追踪 Vue 应用最上层的组件。

import * as Sentry from "@sentry/browser";
import { Vue as VueIntegration } from "@sentry/integrations";
import { Integrations } from "@sentry/tracing";
import Vue from "vue";
Sentry.init({
  // ...
  integrations: [
    new Integrations.BrowserTracing(),
    new VueIntegration({
      Vue,
      tracing: true,
    }),
  ],
  tracesSampleRate: 1.0, // Be sure to lower this in production
});

如果你想最终子组件，和过多的渲染细节，需要这么配置集成：

new VueIntegration({
  Vue,
  tracing: true,
  tracingOptions: {
    trackComponents: true,
  },
});