vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component
JavaScript Vue TypeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci Add Coverage command Feb 14, 2018
build Fix package json Jan 24, 2018
examples Update docs Dec 21, 2017
src Test suite migrated to jest Feb 14, 2018
test Fix test Feb 18, 2018
types Fix import Raven types Feb 14, 2018
.babelrc The big jump Dec 20, 2017
.editorconfig The big jump Dec 20, 2017
.eslintignore The big jump Dec 20, 2017
.eslintrc.js Test suite migrated to jest Feb 14, 2018
.gitignore Test suite migrated to jest Feb 14, 2018
.stylelintrc The big jump Dec 20, 2017
CONTRIBUTING.md The big jump Dec 20, 2017
LICENSE The big jump Dec 20, 2017
README.md fix: typo in README Mar 18, 2018
package.json Tests updated Feb 18, 2018
yarn.lock Tests updated Feb 14, 2018

README.md

VueRaven

npm (scoped with tag) vue2 npm CircleCI Codecov donate

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.

jsfiddle

error

License

MIT