1.0.1 • Published 6 years ago
vue-bugsnag v1.0.1
Vue Bugsnag
Vue.js plugin for bugsnag-js v3.x error reporting
:warning: 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/vue@2.5/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
License
MIT License