Vue.js Error Tracking & Monitoring Integration

LogTide’s Vue.js integration provides professional-grade error tracking and performance monitoring for Vue applications. It includes automatic unhandled error capture, Vue global error handlers, and Core Web Vitals collection.

Why use LogTide with Vue?

• Global error handler: Automatically captures all errors in components, watchers, and lifecycle hooks.
• Core Web Vitals: Monitor your app’s performance metrics (LCP, FID, CLS) in the real world.
• Breadcrumbs: Track the clicks and network requests leading up to an error.
• Session context: Correlate all logs and errors for a single user session.
• Source Maps: Map production errors back to your original Vue SFC files.

Prerequisites

• Vue 3.0+ (Composition or Options API)
• LogTide instance with a DSN

Installation

npm install @logtide/browser

Quick Setup

Initialize LogTide and register the Vue error handler in your main.ts or main.js:

// main.ts
import { createApp } from 'vue';
import { initLogtide } from '@logtide/browser';
import App from './App.vue';

const app = createApp(App);

// Initialize LogTide
initLogtide({
  dsn: 'https://[email protected]',
  service: 'vue-frontend',
  environment: 'production',
  release: '1.0.0',
});

// Register the Vue global error handler
app.config.errorHandler = (err, instance, info) => {
  // Capture the error with Vue component context
  hub.captureError(err, {
    tags: { info, component: instance?.$options?.name },
  });
};

app.mount('#app');

Manual Logging in Components

Using the Composition API:

<script setup>
import { hub } from '@logtide/core';

async function handleAction() {
  hub.addBreadcrumb({
    type: 'ui',
    category: 'ui',
    message: 'User clicked action',
    timestamp: Date.now(),
  });

  try {
    await performAction();
    hub.captureLog('info', 'Action success');
  } catch (err) {
    hub.captureError(err);
  }
}
</script>

Using the Options API:

export default {
  methods: {
    handleAction() {
      this.$hub.addBreadcrumb({ ... });
      // or directly use 'hub' from '@logtide/core'
    }
  }
}

Core Web Vitals

LogTide automatically tracks performance metrics. No additional configuration is required. View the metrics in your LogTide Dashboard under Metrics.

Source Map Uploads

To get readable stack traces in production, upload your source maps during your Vite or Webpack build:

# Using @logtide/cli
logtide sourcemaps upload --path ./dist --release 1.0.0 --apiKey YOUR_API_KEY

Next Steps

• Browser SDK Docs - Full browser SDK reference
• Nuxt Integration - For SSR and full-stack Vue monitoring
• Vite Setup - Best practices for Vite builds