vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component
JavaScript Vue
Switch branches/tags
Latest commit e0ce39b Dec 21, 2017 @anteriovieira anteriovieira Suport CDN added
Permalink
Failed to load latest commit information.
build The big jump Dec 20, 2017
examples Update docs Dec 21, 2017
src Add suport CDN Dec 21, 2017
test The big jump Dec 20, 2017
.babelrc The big jump Dec 20, 2017
.editorconfig The big jump Dec 20, 2017
.eslintignore The big jump Dec 20, 2017
.eslintrc.js The big jump Dec 20, 2017
.gitignore The big jump Dec 20, 2017
.stylelintrc The big jump Dec 20, 2017
CONTRIBUTING.md The big jump Dec 20, 2017
LICENSE The big jump Dec 20, 2017
README.md Live demo added Dec 21, 2017
package.json Suport CDN added Dec 21, 2017
yarn.lock The big jump Dec 20, 2017

README.md

VueRaven

npm vue2

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

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

error

License

MIT