Vue
To use Sentry with your Vue application, you will need to use Sentry’s Vue SDK: @sentry/vue
.
npm install --save @sentry/vue
On its own, @sentry/vue
will report any uncaught exceptions triggered by your application.
Additionally, the SDK 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
:
import Vue from "vue";
import * as Sentry from '@sentry/vue';
Sentry.init({
Vue: Vue,
dsn: '__PUBLIC_DSN__',
});
Additionally the SDK accepts a few different configuration options that let you change its behavior:
- Passing in
Vue
is optional, if you do not pass itwindow.Vue
must be present. - Passing in
attachProps
is optional and istrue
if it is not provided. If you set it tofalse
, Sentry will suppress sending all Vue components' props for logging. - Passing in
logErrors
is optional and isfalse
if it is not provided. If you set it totrue
, Sentry will call original Vue'slogError
function as well.
Vue Error Handling
Please note that if you enable the SDK, Vue will not call its logError
internally. This means that errors occurring in the Vue renderer will not show up in the developer console.
If you want to preserve this functionality, make sure to pass the logErrors: true
option.
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:
<script
src="https://browser.sentry-cdn.com/5.29.0/vue.min.js"
integrity="sha384-FKagncFah3a9nkKNEIDQqXhYnny5Wzc37/AZV5eKKnRVS8uPpeFPdu9dnrvAnRpF"
crossorigin="anonymous"
></script>
<script>
Sentry.init({
Vue,
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
});
</script>
Monitor Performance
npm install --save @sentry/vue @sentry/tracing
The most basic configuration for tracing your Vue app, which would track only the top-level component, looks like this:
import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";
Sentry.init({
// ...
integrations: [
new Integrations.BrowserTracing(),
],
// 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:
Sentry.init({
Vue,
tracingOptions: {
trackComponents: true,
},
});
- Package:
- npm:@sentry/browser
- Version:
- 5.29.0
- Repository:
- https://github.com/getsentry/sentry-javascript