VueJS Error Tracking

DebugMate tracks VueJS-specific errors, focusing on lifecycle and user interaction issues.

Tracked Errors

Supported by VueJS 3

Async Error: Issues in asynchronous operations.

Click Error: Errors triggered by user clicks.

Division by Zero: Arithmetic issues involving zero.

Eval Error: Use of eval() in unexpected ways.

Lifecycle Error: Errors in Vue component lifecycle.

Network Error: Failed network requests.

Reference Error: Undefined variable or method reference.

State Mutation Error: Illegal state mutations.

Syntax Error: Code syntax issues.

Type Error: Type mismatches.

Unhandled Rejection: Uncaught promise rejections.

URI Error: Malformed URI usage.

Violation Error: Breaches in coding practices or policies.

Installation Process

To install the Debugmate package, use npm or yarn:

# NPM
npm install debugmate-vuejs --save

# Yarn
yarn add debugmate-vuejs

Configuration

After installing the package, you need to configure it by providing the domain and token for your API. You can also enable or disable the package through environment variables.

In Vue.js, import the Vue-specific plugin and install it in your main.js:

import { createApp } from 'vue';
import App from './App.vue';
import DebugmateVue from 'debugmate-vuejs/vue'; 

const app = createApp(App);

app.use(DebugmateVue, {
    domain: process.env.VUE_APP_DEBUGMATE_DOMAIN || 'https://api.debugmate.com',
    token: process.env.VUE_APP_DEBUGMATE_TOKEN || 'your-token',
    enabled: process.env.VUE_APP_DEBUGMATE_ENABLED !== 'false',
});

app.mount('#app');

Usage

After configuring Debugmate in Vue.js, it will automatically start capturing errors. Errors like window.onerror and window.onunhandledrejection are monitored out-of-the-box.

If you need to manually report an error, you can use the publish method provided by Debugmate:

app.config.globalProperties.$debugmate.publish(new Error('Custom error message'));

Injecting User and Environment Data

You can dynamically inject user and environment data using the setUser and setEnvironment methods provided by Debugmate. These methods allow you to customize the context of the errors being reported.

Example in Vue.js:

app.config.globalProperties.$debugmate.setUser({
    id: '123',
    name: 'Jane Doe',
    email: '[email protected]'
});

app.config.globalProperties.$debugmate.setEnvironment({
    environment: 'client',
    version: '1.0.0',
    timezone: 'America/New_York'
});