Vue integration

Vantmetry works in any Vue app through the core init and logger API. Wiring it into Vue's errorHandler captures the component errors that Vue would otherwise handle internally.

Installation

npm install vantmetry

Setup

Initialize the tracker in your entry file and forward Vue's error handler to the logger:

// src/main.ts
import { createApp } from 'vue';
import { init, logger } from 'vantmetry';
import App from './App.vue';

init({ publicKey: 'YOUR_PUBLIC_KEY' });

const app = createApp(App);

app.config.errorHandler = (error, instance, info) => {
  logger.error(error, { vueInfo: info });
};

app.mount('#app');

Why the Vue error handler matters

Vue catches errors thrown in component render functions, lifecycle hooks, and watchers and routes them to app.config.errorHandler instead of letting them reach window.onerror. Without wiring that handler, those errors never reach the tracker. Errors outside Vue's boundary, such as async code or other scripts on the page, are still captured automatically by init.

Structured logging

Use logger anywhere in your app to record context alongside an error:

import { logger } from 'vantmetry';

async function saveProfile() {
  try {
    await api.updateProfile();
  } catch (error) {
    logger.error('Profile save failed', { view: 'settings' });
  }
}

Source maps

To get readable stack traces from your minified production build, emit source maps. See Source maps for the details and Vite configuration.

Core Features

For details on batching, deduplication, circuit breaker, PII masking, and other core tracker features, see the main Tracker page.