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.
environment	String	production	Sentry's environment.

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)
      }
    }
  }
}

Live demo

We create a small example so you can see the plugin in action.

jsfiddle

License

MIT