vue-raven

Using sentry's raven.js in vue

Installation

$ npm i @ecg/vue-raven

Usage

Configure

Configure your dsn first: Sentry DSN

import Vue from 'vue'
import VueRaven from '@ecg/vue-raven'
import pkg from '../package.json'

Vue.use(VueRaven, {
  dsn: 'https://<key>@sentry.io/project', // or your custom public dsn
  version: pkg.version, // optional
})

Manual Report

• In .vue file

// some-component.vue
export default {
  methods: {
    onSubmit () {
      try {
        Form.submit(/* data */)
      } catch (err) {
        this.$raven.captureException(err)
        // this.$raven.captureMessage('msg')
      }
    }
  }
}

• In .js file

// api.js
import { Raven } from '@ecg/vue-raven'
// your service
export default {
  login (params) {
    return api.get(url, params).then(res => {
      if(res.ok) {
        const user = res.data.user
        // set user context
        // the context will be send with error report
        Raven.setUserContext({
          id: user.id
          username: user.username,
          email: user.email, // omit or must be valid email
          // you can provided extra context here 
        })
      }
      return res
    })
  }
}

Options

Option	Type	Default	Info
dsn	String	''	The Data Source Name
env	String	'production'	The Environment Name
version	String	''	Provide Your App Version
disableReport	Boolean	false	Disable All Report In Your App, You Can Use process.env.NODE_ENV === 'development' For Development
disableVueReport	Boolean	false	Disable Auto Report In Vue
config	Boolean	Object	Extra config for sentry

Related Projects

• raven-js
• vue-raven

Lisence

MIT