Vue.js

Installing Airbrake in a Vue.js application

Key Features

  • Easy and flexible installation options including npm and Yarn
  • Send uncaught errors to Airbrake or manually using a try/catch
  • Add custom parameters to your errors for more context
  • Private source map support
  • Control which errors you send with customizable filtering options

Installation & Configuration

Installation

Using npm

npm install @airbrake/browser

Using Yarn

yarn add @airbrake/browser

Using CDN

Using <script> tag via jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>

Using <script> tag via unpkg:

<script src="https://unpkg.com/@airbrake/browser"></script>

Configuration

Vue.js error handler

Vue 2

You can start reporting errors from your Vue.js app by configuring an errorHandler that uses a Notifier initialized with your projectId and projectKey.

import { Notifier } from '@airbrake/browser'

var airbrake = new Notifier({
  projectId: 1,
  projectKey: 'FIXME'
})

Vue.config.errorHandler = function(err, _vm, info) {
  airbrake.notify({
    error: err,
    params: {info: info}
  })
}

Vue 3

You can start reporting errors from your Vue 3 app by configuring an errorHandler that uses a Notifier initialized with your projectId and projectKey.

import { createApp } from 'vue'
import App from './App.vue'
import { Notifier } from '@airbrake/browser'

var airbrake = new Notifier({
  projectId: 1,
  projectKey: 'FIXME'
})

let app = createApp(App)

app.config.errorHandler = function(err, _vm, info) {
  airbrake.notify({
    error: err,
    params: {info: info}
  })
}

app.mount("#app")

Troubleshoot

Installation and configuration is just the beginning. The airbrake-js notifier supports many other advanced uses and options including:

Please visit the airbrake-js GitHub repo for more usage and configuration examples.