vue2-sentry v1.2.1
vue2-sentry
Plugin Vue.js for error tracking with Sentry
Sentry
If you do not already have a Sentry account, you will need to create it to gain access to the panel and the keys
to integrate your Vue.js application into Sentry and start tracking errors and logs.
Usage
NPM
npm install vue2-sentry --save
In your src/main.js:
import Vue from 'vue'
import App from './App.vue'
import VueSentry from 'vue2-sentry'
Vue.use(VueSentry, {
protocol: 'https', // Optional: default is https
key: 'your_key_sentry',
project: 'your_name_project',
config: {} // Optional: custom config
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
Explaining the properties
When installing the plugin using Vue.use
it is possible to define an object by passing the default settings and the keys needed to build the DSN communication and make the tracking work the errors.
key: Here you put the public key available in your Sentry account. But also if you need to pass the private key, just enter it this way.
key: 'your_public_key:your_private_key'
project: Each project created in the Sentry panel it generates a project ID, in this property you inform the ID of the project that you want to track.
config: At the time of installation, you can set various properties for your application to manage in a custom way on your Sentry dashboard. You can find out which options are available through this link config sentry
How to use within components
Thinking of the flexibility to customize and define some specific information with tags, userContext, among others. The plugin uses Raven (which is the official Sentry SDK) and integrates into the Vue prototype, making it available in its component.
For example, in any Vue component
...
<script>
export default {
name: 'UserAccount',
mounted () {
this.$raven.setUserContext({
email: 'bar@example.com',
id: '15'
})
}
}
</script>
...
For more information on how to make the most of Sentry contexts, just go to this link Context with Sentry
Server-side rendering
Vue2-sentry is supported in projects with server-side rendering, both in manual deployments and using other structures.
If you are using Nuxt.js, you can opt for this nuxt-community/sentry-module.
If you want to use vue2-sentry, just follow the plugins installation tutorial in the Nuxt.js documentation, through this link
Environments
vue2-sentry will track in all environments, but if you want to track only in production, you can use the Node environment variables to determine.
enable: By default true
and is optional, equivalent to all environments.
If you want to track only in production, you can use this example below.
Vue.use(VueSentry, {
enable: process.env.NODE_ENV === 'production', // Optional: default is true for (all environments)
...
}
Available options
Property | Description |
---|---|
enable | Enable plugin - default: true |
protocol | Protocol used, this can http or https - default: https |
key | The public and secret keys to authenticate the SDK |
server | The destination server - default: sentry.io |
project | The project ID which the authenticated user is bound to |
config | Add extra configuration |
Contributing
Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
Fork repository, make changes, add your name and link in the authors session readme.md
Send a pull request
If you want a faster communication, find me on @ktquez
Thank you