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, {
  dns: 'https://<key>@sentry.io/<project>'
})

Browser

<script src="https://github.com/anteriovieira/vue-raven/raw/v0.1.0/vue-raven/dist/vue-raven.js"></script>


<script src="https://unpkg.com/vue-raven"></script>

<script>
Vue.use(VueRaven, {
  dns: 'https://<key>@sentry.io/<project>'
})

const app = new Vue({
  el: '#app',
  // ...
}) 
</script>

Only these settings allow VueRaven capture any uncaught exception.

Options

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, {
  dns: '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, {
  dns: '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.

jsfiddle

License

MIT