Give your users an easy way to see when something in your application goes wrong. This package makes it easy to show error messages.

Demo

See a functioning demo deveo demo site

Installation

npm install --save @deveodk/vue-error-tracker

Bundler (Webpack, Rollup)

import Vue from 'vue'
import vueErrorTracker from '@deveodk/vue-error-tracker'
Vue.use(vueErrorTracker)

Browser

<!-- From CDN -->
<script src="https://unpkg.com/@deveodk/vue-error-tracker/dist/@deveodk/vue-error-tracker.min.js"></script>

Usage

The error tracker will automatically show a nice little toastr if you combine it with our @deveodk/vue-toastr. However it is possible to write your own custom drivers

The package is compatible with vue-resource and axios out of the box

// You can notify on as many http status codes as your like, 
just include them in the HttpErrorCodes object

import errorTracker from '@deveodk/vue-error-tracker'
Vue.use(errorTracker, {
    HttpDriver: require('@deveodk/vue-error-tracker/drivers/http/axios.js'),
    NotificationDriver: require('@deveodk/vue-error-tracker/drivers/notification/deveoToastr.js'),
  // Sentry.io optional
  // ReportDriver: require('@deveodk/vue-error-tracker/drivers/report/sentry.js'),
    HttpErrorCodes: {
        400: {
            title: 'Unknown error',
            message: 'Something went wrong',
            type: 'error'
        },
        500: {
            title: 'Server error',
            message: 'Ohh no something went wrong',
            type: 'error'
        }
    }
})

Reporting errors

You can report the errors through the error drivers. The error tracker comes with built in support for sentry.io

// Sentry raven example
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
Raven
    .config(KEY HERE)
    .addPlugin(RavenVue, Vue)
    .install()
Vue.prototype.$raven = Raven

// The error tracker will now automaticly report the errors to sentry

License

MIT