VueRaven
VueRaven automatically reports uncaught JavaScript exceptions triggered from vue component, and provides a API for reporting your own errors. The captured errors will be reported to the sentry where you can get an overview of your application. If you do not already have a Sentry account, creating your account will be the first step to using this package.
Installation
npm install --save vue-raven
# or
yarn add vue-raven
Usage
To get started, you need to configure VueRaven to use your Sentry DSN:
Bundler (Webpack, Rollup)
import Vue from 'vue'
import VueRaven from 'vue-raven'
Vue.use(VueRaven, {
dsn: 'https://<key>@sentry.io/<project>'
})
Browser
<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-raven/dist/vue-raven.js"></script>
<!-- From CDN -->
<script src="https://unpkg.com/vue-raven"></script>
<script>
Vue.use(VueRaven, {
dsn: 'https://<key>@sentry.io/<project>'
})
const app = new Vue({
el: '#app',
// ...
})
</script>
Only these settings allow VueRaven capture any uncaught exception.
Options
Option | Type | Default | Info |
---|---|---|---|
dsn | String |
null |
The Data Source Name |
public_dsn | String |
null |
If value omitted it will be generated using dsn value, by removing private key part. |
public_key | String |
null |
Will be ignored if dsn provided. |
private_key | String |
null |
Will be ignored if dsn provided. |
host | String |
sentry.io |
Will be ignored if dsn provided. |
protocol | String |
https |
Will be ignored if dsn provided. |
project_Id | String |
null |
Will be ignored if dsn provided. |
path | String |
null |
Will be ignored if dsn provided. |
disableAutoReport | Boolean |
false |
Disable auto report |
Reporting Errors
Disable auto report
By default vueraven will report the errors captured automatically, but you can disable using the disableAutoReport
option:
import Vue from 'vue'
import VueRaven from 'vue-raven'
Vue.use(VueRaven, {
dsn: 'https://<key>@sentry.io/<project>'
disableAutoReport: true,
})
Report errors manually
In some cases you may want to report erros manually, for this you will have the reven-js api available at the instance of the component.
// my-component
export default {
methods: {
// ...
async saveUser() {
try {
await User.save(/* data */)
} catch (err) {
this.$raven.captureException(err)
}
}
}
}
or
import {Raven} from 'vue-raven';
// my-component
export default {
methods: {
// ...
async saveUser() {
try {
await User.save(/* data */)
} catch (err) {
Raven.captureException(err)
}
}
}
}
Environment
By default VueRaven defines the environment as production, but you are free to configure this option.
import Vue from 'vue'
import VueRaven from 'vue-raven'
Vue.use(VueRaven, {
dsn: 'https://<key>@sentry.io/<project>'
dev: process.env.NODE_ENV !== 'production',
})
Live demo
We create a small example so you can see the plugin in action.