Installing Airbrake in a Vue.js application

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 sourcemap support
  • Control which errors you send with customizable filtering options

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

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}
  });
}

For more information on Vue.js error handling, read the errorHandler documentation.

Going Further

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.