Skip to content
Using sentry's raven.js in vue
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.eslintignore
.eslintrc.js
.gitignore
CHANGELOG.md
LICENSE
README.md
bili.config.js
package-lock.json
package.json

README.md

vue-raven

npm (scoped with tag) vue2 dependencies

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

Lisence

MIT

You can’t perform that action at this time.