Vue

要在Vue应用程序中使用Sentry，需要使用Sentry的浏览器JavaScript SDK:@Sentry/browser。

# Using yarn
$ yarn add @sentry/browser

# Using npm
$ npm install @sentry/browser

@sentry/browser将自行报告应用程序触发的任何意外异常。

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

从5.x版开始，我们的Vue集成就在它自己的包@sentry/integrations中。您可以使用npm/yarn安装：

# Using yarn
yarn add @sentry/integrations

# Using npm
npm install @sentry/integrations

然后将此添加到应用 app.js:

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
  dsn: 'https://<key>@<organization>.ingest.sentry.io/<project>',
  integrations: [new VueIntegration({Vue, attachProps: true})],
});

另外，集成.Vue接受一些允许您更改其行为的不同配置选项：

传入Vue是可选的，如果不传入window.Vue必须在场。
传入attachProps是可选的，如果没有提供，则为true。如果将其设置为false，Sentry将禁止发送所有Vue组件的日志道具。
传入logErrors是可选的，如果没有提供，则为false。如果设置为true，Sentry也将调用原始Vue的logError函数。

Vue错误处理请注意，如果启用此集成，Vue将不会在内部调用其logError。这意味着Vue呈现器中发生的错误不会显示在开发人员控制台中。如果要保留此功能，请确保传递logErrors:true选项。

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

<!-- 注意，我们现在也只提供了一个es6构建 -->
<!-- <script src="https://browser.sentry-cdn.com/5.17.0/bundle.es6.min.js" integrity="sha384-+FuBnWnrWbg3R844uUuSJgjtWFVGDH9XBiUiccAQAnuvnPbMSW15tZwcwthhocIy" crossorigin="anonymous"></script> -->
<script src="https://browser.sentry-cdn.com/5.17.0/bundle.min.js" integrity="sha384-lowBFC6YTkvMIWPORr7+TERnCkZdo5ab00oH5NkFLeQUAmBTLGwJpFjF6djuxJ/5" crossorigin="anonymous"></script>

<!-- 如果包含集成，它将在Sentry.Integrations.Vue-->
<script src="https://browser.sentry-cdn.com/5.17.0/vue.min.js" crossorigin="anonymous"></script>

<script>
  Sentry.init({
    dsn: 'https://<key>@<organization>.ingest.sentry.io/<project>',
    integrations: [new Sentry.Integrations.Vue({Vue, attachProps: true})],
  });
</script>

sentry 平台 JavaScript之VUE（翻译）

Vue