Nanoprogrammed Penultimate Musicianship

    vue-raven
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    VueRaven

    npm (scoped with tag) vue2 npm CircleCI Codecov donate

    VueRaven automatically reports uncaught JavaScript exceptions triggered from vue component, and provides a API for reporting your own errors. The captured errors will be reported to the sentry where you can get an overview of your application. If you do not already have a Sentry account, creating your account will be the first step to using this package.

    Installation

    npm install --save vue-raven
    # or 
    yarn add vue-raven

    Usage

    To get started, you need to configure VueRaven to use your Sentry DSN:

    Bundler (Webpack, Rollup)

    import Vue from 'vue'
    import VueRaven from 'vue-raven'
     
    Vue.use(VueRaven, {
      dsn: 'https://<key>@sentry.io/<project>'
    })

    Browser

    <!-- Include after Vue -->
     
    <!-- Local files -->
    <script src="vue-raven/dist/vue-raven.js"></script>
     
    <!-- From CDN -->
    <script src="https://unpkg.com/vue-raven"></script>
     
    <script>
    Vue.use(VueRaven, {
      dsn: 'https://<key>@sentry.io/<project>'
    })
     
    const app = new Vue({
      el: '#app',
      // ...
    })
    </script> 

    Only these settings allow VueRaven capture any uncaught exception.

    Options

    Option Type Default Info
    dsn String null The Data Source Name
    public_dsn String null If value omitted it will be generated using dsn value, by removing private key part.
    public_key String null Will be ignored if dsn provided.
    private_key String null Will be ignored if dsn provided.
    host String sentry.io Will be ignored if dsn provided.
    protocol String https Will be ignored if dsn provided.
    project_Id String null Will be ignored if dsn provided.
    path String null Will be ignored if dsn provided.
    disableAutoReport Boolean false Disable auto report.
    environment String production Sentry's environment.

    Reporting Errors

    Disable auto report

    By default vueraven will report the errors captured automatically, but you can disable using the disableAutoReport option:

    import Vue from 'vue'
    import VueRaven from 'vue-raven'
     
    Vue.use(VueRaven, {
      dsn: 'https://<key>@sentry.io/<project>'
      disableAutoReport: true,
    })

    Report errors manually

    In some cases you may want to report erros manually, for this you will have the reven-js api available at the instance of the component.

    // my-component
    export default {
      methods: {
        // ...
        async saveUser() {
          try {
            await User.save(/* data */)
          } catch (err) {
            this.$raven.captureException(err)
          }
        }
      }
    }

    or

    import {Raven} from 'vue-raven';
     
    // my-component
    export default {
      methods: {
        // ...
        async saveUser() {
          try {
            await User.save(/* data */)
          } catch (err) {
            Raven.captureException(err)
          }
        }
      }
    }

    Live demo

    We create a small example so you can see the plugin in action.

    jsfiddle

    error

    License

    MIT

    Install

    npm i vue-raven

    DownloadsWeekly Downloads

    367

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    255 kB

    Total Files

    13

    Last publish

    Collaborators

    • anteriovieira