Vue.js 3.x Error & Exception Tracking
Typical installation time: 5 minutes
Hi there! You've found Honeybadger's guide to Vue.js 3.x error and exception tracking. Once installed, Honeybadger will automatically report errors from your Vue.js application.
Installation
Add @honeybadger-io/js and @honeybadger-io/vue as dependencies and configure.
# npm
npm add @honeybadger-io/js @honeybadger-io/vue --save
# yarn
yarn add @honeybadger-io/js @honeybadger-io/vue
In your main.js (or main.ts):
import HoneybadgerVue from '@honeybadger-io/vue'
import { createApp } from 'vue'
import App from './App' //your root component
const app = createApp(App)
const config = {
apiKey: 'Your project API key',
environment: 'production',
revision: 'git SHA/project version'
}
app.use(HoneybadgerVue, config)
app.mount('#app')
Note: Errors that happen in development and test environments are not reported by default. To always report errors or to change the defaults, see Environments and Versions.
Using Vite for development
If you are using Vite for local development, you may get CORS errors in your browser console. To work around that, you can apply the following in your vite.config.js (or vite.config.ts):
export default defineConfig({
// ...
server: {
cors: false
}
})
Reporting errors
Using the example configuration above, you'll install @honeybadger-io/vue as Vue's error handler.
By default, an error handler for all JavaScript
errors will be attached to the window.onerror
handler for JavaScript errors
that may originate from Vue components or other JavaScript on the page.
Because Vue doesn't intercept all errors that may occur within a Vue component,
errors that bubble up to the window.onerror
handler may be missing some
Vue component contextual information, but the stack trace will be available.
If, for some reason, you do not wish to install Honeybadger's
error handler on the global window.onerror
handler, you may add
{ enableUncaught: false }
to the configuration when you're registering HoneybadgerVue
.
You may also manually report errors by directly invoking the honeybadger.js API.
// inside a component
this.$honeybadger.notify(error)
See the full documentation for more options.
Identifying users
Honeybadger can track which users have encountered each error. To identify the
current user in error reports, add a user identifier and/or email address with
$honeybadger.setContext
:
// inside a component
this.$honeybadger.setContext({
user_id: 123,
user_email: 'user@example.com'
});
Sending additional context
Sometimes additional application state may be helpful for diagnosing errors.
You can arbitrarily specify additional key/value pairs when you invoke
setContext
.
// inside a component
this.$honeybadger.setContext({
active_organization: 55,
custom_configuration: false
});
Clearing context
If your user logs out or if your context changes during the Vue component lifetime,
you can set new values as appropriate by invoking setContext
again.
Additionally, if needed, you can clear the context by invoking clear
:
// inside a component
this.$honeybadger.clear();
Advanced usage
@honeybadger-io/vue is built on honeybadger.js. Most configuration options can
be passed in to the config
object you pass when registering the HoneybadgerVue
component with your Vue app instance.
As of this release, there are no Vue-specific configuration options, but that may
change as we learn more about Vue users' unique needs.
In general, configuration and context options supported by
the JavaScript version of the library should work as is,
aside from needing to reference this.$honeybadger
(or app.$honeybadger
if you have access to your vue app
instance) instead of a
global Honeybadger
variable.
See the Honeybadger JavaScript integration documentation for additional customization options.
Tracking deploys
As with vanilla JavaScript applications, you can notify Honeybadger
when you've deployed a new build. Honeybadger will associate an error
report with a specific revision number (matching the revision
field in the
configuration when registering the Honeybadger component).
Here's a simple curl
script to record a deployment:
HONEYBADGER_ENV="production" \
HONEYBADGER_REVISION="git SHA/project version" \
HONEYBADGER_API_KEY="Your project API key" \
curl -g "https://api.honeybadger.io/v1/deploys?deploy[environment]=$HONEYBADGER_ENV&deploy[local_username]=$USER&deploy[revision]=$HONEYBADGER_REVISION&api_key=$HONEYBADGER_API_KEY"
Be sure that the same revision is also configured in the @honeybadger-io/vue library. Read more about deploy tracking in the API docs.
Tracking Deploys from Netlify
If you are deploying your site to Netlify, you can notify Honeybadger of
deployments via Netlify's webhooks. Go to the Deploy notifications
section of the Build & deploy tab for your site settings, and choose
to add an Outgoing webhook notification. Choose Deploy succeeded
as
the event to listen for, and use this format for your URL:
https://api.honeybadger.io/v1/deploys/netlify?api_key=YOUR_HONEYBADGER_API_KEY_HERE
The environment that will be reported to Honeybadger defaults to the
Netlify environment that was deployed, but you can override that with
&environment=CUSTOM_ENV
in the webhook URL, if you like.
Source map support
Honeybadger can automatically un-minify your code if you provide a source map along with your minified JavaScript files. See our Source Map Guide for details.
Collect User Feedback
When an error occurs, a form can be shown to gather feedback from your users. Read more about this feature here.
Sample applications
Two sample applications are included in the examples/
folder in the
honeybadger-vue repository, one for vue 2.x and one for vue 3.x.
You can follow the README.md inside each app to run them.
To create your own standalone Vue application, simply follow the Quick Start guide in Vue.js documentation. Remember to install Honeybadger Vue:
npm add @honeybadger-io/js @honeybadger-io/vue
Then, in your main.js
, you can follow the pattern in the
source code in examples/vue3/src/main.js
:
import { createApp } from 'vue'
import App from './App'
import router from './router'
import HoneyBadgerVue from '@honeybadger-io/vue'
const app = createApp(App)
app.use(HoneyBadgerVue, {apiKey: 'your_api_key'})
app.use(router).mount('#app')
Package:
@honeybadger-io/vue
Version:
6.1.26
Repository:
https://github.com/honeybadger-io/honeybadger-js/tree/master/packages/vue