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