Vue Bugsnag

Vue.js plugin for bugsnag-js v3.x error reporting

⚠️ Deprecation notice

Bugsnag has released their official Vue.js plugin.
You can keep using this plugin if you don't want to upgrade to Bugsnag js v4.x. It is recommended to upgrade to Bugsnag js v4.x.

Installation

# npm
npm install vue-bugsnag --save

# Yarn
yarn add vue-bugsnag

Usage

• Grab your API key from Bugsnag

import Bugsnag from 'bugsnag-js';
Bugsnag.apiKey = 'YOUR-API-KEY-HERE';

• Plug into Vue.js

import Vue from 'vue';
import VueBugsnag from 'vue-bugsnag';
Vue.use(VueBugsnag);

• Prevent Bugsnag from being initialized in development

if (process.env.NODE_ENV === 'production') {
  // Initialize Bugsnag here
}

• Limit error reporting to specific release stages

Bugsnag.releaseStage = 'YOUR-CURRENT-ENVIRONMENT';
Bugsnag.notifyReleaseStages = ['staging', 'production'];

Use with Vue Router

• Use the global afterEach navigation guard to reset the Bugsnag error rate limit.

router.afterEach((to, from) => {
    Bugsnag.refresh();
});

Laravel Mix user?

Checkout this guide

Use in browser (without webpack)

• Include required files

<!-- Add Bugsnag core library -->
<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js"
        data-apikey="YOUR-API-KEY-HERE"></script>
<!-- Vue js -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://unpkg.com/vue-bugsnag"></script>

• That's it, plugin will auto initialize.

How does it work?

• This plugin utilize Vue.js inbuilt error handler
• This plugin prepares a payload and send this to Bugsnag as metadata
• This metadata will appear on a new tab in Bugsnag dashboard.

Testing

• This package is using Jest for testing.
• Tests can be found in __test__ folder.
• Execute tests with this command yarn test

Credits and Thanks

• Thanks to Sentry for their Vue.js plugin

Resources

• Bugsnag Browser integration guide

License

MIT License