API
Sign In

Vue

To use Sentry with your Vue application, you will need to use Sentry’s browser JavaScript SDK: @sentry/browser.

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

On its own, @sentry/browser will report any uncaught exceptions triggered by your application.

Additionally, the Vue integration will capture the name and props state of the active component where the error was thrown. This is reported via Vue’s config.errorHandler hook.

Then add this to your app.js:

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

Additionally, Integrations.Vue accepts a few different configuration options that let you change its behavior:

  • Passing in Vue is optional, if you do not pass it window.Vue must be present.
  • Passing in attachProps is optional and is true if it is not provided. If you set it to false, Sentry will suppress sending all Vue components' props for logging.
  • Passing in logErrors is optional and is false if it is not provided. If you set it to true, Sentry will call original Vue's logError function as well.

In case you are using the CDN version or the Loader, we provide a standalone file for every integration, you can use it like this:

Copied
<!-- Note that we now also provide a es6 build only -->
<!-- <script src="https://browser.sentry-cdn.com/5.25.0/bundle.es6.min.js" integrity="sha384-hkwF8uNuWxp222vkQQyQsLKwSz/v/SRtfePmH0clVFwqLuxWcaKlWnQtJXegxQaR" crossorigin="anonymous"></script> -->
<script
  src="https://browser.sentry-cdn.com/5.25.0/bundle.min.js"
  integrity="sha384-2p7fXoWSRPG49ZgmmJlTEI/01BY1LgxCNFQFiWpImAERmS/bROOQm+cJMdq/kmWS"
  crossorigin="anonymous"
></script>

<!-- If you include the integration it will be available under Sentry.Integrations.Vue -->
<script
  src="https://browser.sentry-cdn.com/5.25.0/vue.min.js"
  integrity="sha384-2N7Ym5Xq2tbEGuDRYVYY1fmAj2zZgR38wcPnX8nFwtOqL7Cjk0avM2R0GJ/ywIxq"
  crossorigin="anonymous"
></script>

<script>
  Sentry.init({
    dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
    integrations: [new Sentry.Integrations.Vue({ Vue, attachProps: true })],
  });
</script>

Monitor Performance

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

The most basic configuration for tracing your Vue app, which would track only the top-level component, looks like this:

Copied
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,
    }),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

If you want to track child components, and see more details about the rendering process, configure the integration to track them all:

Copied
new VueIntegration({
  Vue,
  tracing: true,
  tracingOptions: {
    trackComponents: true,
  },
});
You can edit this page on GitHub.
Package:
npm:@sentry/browser
Version:
5.25.0
Repository:
https://github.com/getsentry/sentry-javascript
On this page