Skip to content
vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add Coverage command Feb 14, 2018
build fix(changelog): fix script changelog Sep 18, 2018
examples
src expose Sentry's environment as an option Aug 10, 2018
test Fix test Feb 18, 2018
types Add types for Raven (and version) Nov 27, 2018
.babelrc The big jump Dec 20, 2017
.editorconfig
.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
CHANGELOG.md chore(changelog): 1.0.3 change log updated Dec 11, 2018
CONTRIBUTING.md The big jump Dec 20, 2017
LICENSE The big jump Dec 20, 2017
README.md
package.json
yarn.lock chore(changelog): add conventional-changelog Sep 18, 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.
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

error

License

MIT

You can’t perform that action at this time.