Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anteriovieira/vue-raven
vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component
https://github.com/anteriovieira/vue-raven
exceptions plugin raven-js sentry-plugin vuejs
Last synced: 8 days ago
JSON representation
vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component
- Host: GitHub
- URL: https://github.com/anteriovieira/vue-raven
- Owner: anteriovieira
- License: mit
- Created: 2017-12-20T20:31:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:21:39.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T20:31:45.620Z (20 days ago)
- Topics: exceptions, plugin, raven-js, sentry-plugin, vuejs
- Language: JavaScript
- Homepage: https://github.com/getsentry/raven-js
- Size: 2.08 MB
- Stars: 90
- Watchers: 3
- Forks: 8
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# VueRaven
[](https://npmjs.com/package/vue-raven)
[](https://vuejs.org/)
[](https://npmjs.com/package/vue-raven)
[](https://circleci.com/gh/anteriovieira/vue-raven)
[](https://codecov.io/gh/anteriovieira/vue-raven)
[](https://patreon.com/anteriovieira)
> 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](https://sentry.io), creating your account will be the first step to using this package.
## Installation
```bash
npm install --save vue-raven
# or
yarn add vue-raven
```
## Usage
To get started, you need to configure VueRaven to use your [Sentry DSN](https://docs.sentry.io/quickstart/#configure-the-dsn):
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import VueRaven from 'vue-raven'
Vue.use(VueRaven, {
dsn: 'https://@sentry.io/'
})
```
### Browser
```html
Vue.use(VueRaven, {
dsn: 'https://<key>@sentry.io/<project>'
})
const app = new Vue({
el: '#app',
// ...
})
```
> 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. |
| disableReport | `Boolean` | `false` | Disable all reports. |
| 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:
```js
import Vue from 'vue'
import VueRaven from 'vue-raven'
Vue.use(VueRaven, {
dsn: 'https://@sentry.io/'
disableAutoReport: true,
})
```
### Report errors manually
In some cases you may want to report erros manually, for this you will have the [reven-js](https://docs.sentry.io/clients/javascript/) api available at the instance of the component.
```js
// my-component
export default {
methods: {
// ...
async saveUser() {
try {
await User.save(/* data */)
} catch (err) {
this.$raven.captureException(err)
}
}
}
}
```
or
```js
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](https://jsfiddle.net/anteriovieira/cprfeqrj/) so you can see the plugin in action.
[jsfiddle](https://jsfiddle.net/anteriovieira/cprfeqrj/)
## License
[MIT](http://opensource.org/licenses/MIT)