Vue

Introduction

BugSplat's npm package provides error reporting for Vue applications. Before integrating your application with BugSplat, make sure to review the Getting Started resources and complete the simple startup tasks listed below.

  • โ€‹Sign up for a BugSplat account

  • โ€‹Log in using your email address

  • Create a new database for your application

Need any further help? Check out the full BugSplat documentation here, or email the team at [email protected].

Integration

To begin integrating your app with BugSplat, install the bugsplat package via npm:

npm i bugsplat

Import or require BugSplat at the entry point of your application.

import { BugSplat } from 'bugsplat';

Add a database property to your package.json.

{
"name": "my-vue-crasher",
"version": "1.0.0",
"database": "{{ your database here}}",
...
}

In index.js, create a new instance of BugSplat passing the constructor values for database, application, and version from your package.json.

const packageJson = require('../package.json');
const bugsplat = new BugSplat(packageJson.database, packageJson.name, packageJson.version);

Add event handlers to window.onunhandledrejection and window.onerror so that errors are posted to BugSplat.

window.onunhandledrejection = async (rejection) => {
await bugsplat.post(rejection.reason);
}
โ€‹
window.onerror = async (event, source, lineno, colno, error) => {
await bugsplat.post(error);
}

You can also use BugSplat to capture errors in catch blocks.

try {
throw new Error('BugSplat rocks!');
} catch (error) {
await bugsplat.post(error);
}

After posting an error, navigate to the Crashes page in BugSplat and you should see a new error report for the application you just configured. Click the link in the ID column to see details about your crash on the Crash page.