Nuxt.js Error Tracking

DebugMate monitors typical Nuxt.js errors that affect both client-side and server-side behavior. These errors cover a range of runtime, async, and UI interaction issues frequently encountered in Nuxt.js applications.

Tracked Errors

Type Error: Mismatched types in operations.

Syntax Error: Code syntax issues.

Async Error: Problems in asynchronous operations.

Unhandled Rejection: Promises that fail without a catch.

Lifecycle Error: Issues during component lifecycle stages.

Network Error: Failed or timed-out network requests.

Click Error: Errors triggered by UI clicks.

Range Error: Values outside of expected range.

Violation Error: Code or security policy breaches.

State Mutation Error: Invalid state modifications.

Reference Error: Undefined variable/method reference.

URI Error: Malformed or illegal URI usage.

Eval Error: Errors from improper use of eval().

Division by Zero: Arithmetic errors with zero as divisor.

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 Nuxt.js, import the Nuxt-specific plugin directly from the package in the nuxt.config.js file:

1. Add the Plugin in nuxt.config.js:

export default {
    runtimeConfig: {
        public: {
            DEBUGMATE_DOMAIN: process.env.DEBUGMATE_DOMAIN || 'https://api.debugmate.com',
            DEBUGMATE_TOKEN: process.env.DEBUGMATE_TOKEN || 'your-token',
            DEBUGMATE_ENABLED: process.env.DEBUGMATE_ENABLED || 'true',
        }
    },
    plugins: ['debugmate-vuejs/nuxt']  // Use Nuxt-specific version
}

This will automatically register the plugin for your Nuxt application.

Usage

In Nuxt.js, Debugmate will also capture client-side and server-side errors. You can inject user data or any additional context dynamically. For manual reporting of errors in Nuxt:

const { $debugmate } = useNuxtApp();
$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 Nuxt.js:

const { $debugmate } = useNuxtApp();

$debugmate.setUser({
    id: '789',
    name: 'John Doe',
    email: '[email protected]'
});

$debugmate.setEnvironment({
    environment: 'server',
    version: '2.0.0',
    timezone: 'America/Sao_Paulo'
});