https://github.com/ktquez/vue2-sentry

Plugin Vue.js for error tracking with Sentry
https://github.com/ktquez/vue2-sentry

Last synced: 16 days ago
JSON representation

Plugin Vue.js for error tracking with Sentry

• Host: GitHub
• URL: https://github.com/ktquez/vue2-sentry
• Owner: ktquez
• Created: 2017-10-17T01:00:05.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-19T20:08:39.000Z (over 6 years ago)
• Last Synced: 2024-10-12T19:47:58.411Z (about 1 month ago)
• Language: JavaScript
• Size: 49.8 KB
• Stars: 48
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue2-sentry

Plugin Vue.js for error tracking with Sentry

## Sentry

If you do not already have a [Sentry](https://sentry.io) 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

```shell

npm install vue2-sentry --save

```

In your src/main.js:

```javascript

import Vue from 'vue'

import App from './App.vue'

import VueSentry from 'vue2-sentry'

Vue.use(VueSentry, {

  key: 'your_public_key',

  project: 'your_project_ID',

  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. 

```javascript

key: 'your_public_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](https://docs.sentry.io/clients/javascript/config/)

## 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

```vue

...

  export default {

    name: 'UserAccount',

    mounted () {

      this.$raven.setUserContext({

        email: '[email protected]',

        id: '15'

      })

    }

  }

...

```

For more information on how to make the most of Sentry contexts, just go to this link [Context with Sentry](https://docs.sentry.io/learn/context/)

## 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](https://nuxtjs.org/), you can opt for this [nuxt-community/sentry-module](https://github.com/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](https://nuxtjs.org/guide/plugins/)

## 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.*

```javascript

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](https://twitter.com/ktquez)

> Thank you