vr

vue-raven

vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component

Showing:

Popularity

Downloads/wk

447

GitHub Stars

93

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

1

Size (min+gzip)

11.6KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Vue Logging

Readme

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

OptionTypeDefaultInfo
dsnStringnullThe Data Source Name
public_dsnStringnullIf value omitted it will be generated using dsn value, by removing private key part.
public_keyStringnullWill be ignored if dsn provided.
private_keyStringnullWill be ignored if dsn provided.
hostStringsentry.ioWill be ignored if dsn provided.
protocolStringhttpsWill be ignored if dsn provided.
project_IdStringnullWill be ignored if dsn provided.
pathStringnullWill be ignored if dsn provided.
disableReportBooleanfalseDisable all reports.
disableAutoReportBooleanfalseDisable auto report.
environmentStringproductionSentry'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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100