Vue.js Integration

// src/main.ts
import { createApp } from 'vue';
import { init, captureException } from '@codmir/overseer';
import App from './App.vue';

// Initialize Overseer
init({
  dsn: import.meta.env.VITE_OVERSEER_DSN,
  service: 'vue-app',
  environment: import.meta.env.MODE,
  enableReplay: true,
  enablePerformance: true,
});

const app = createApp(App);

// Global error handler
app.config.errorHandler = (err, instance, info) => {
  captureException(err as Error, {
    extra: {
      component: instance?.$options.name,
      info,
    },
  });
  console.error('Vue Error:', err);
};

// Global warning handler (optional)
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue Warning:', msg, trace);
};

app.mount('#app');

// plugins/overseer.client.ts
import { init, captureException } from '@codmir/overseer';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  init({
    dsn: config.public.overseerDsn,
    service: 'nuxt-app',
    environment: process.dev ? 'development' : 'production',
    enableReplay: true,
  });

  // Hook into Vue error handler
  nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
    captureException(err as Error, {
      extra: { component: instance?.$options.name, info },
    });
  };
});

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      overseerDsn: process.env.OVERSEER_DSN || '/api/overseer',
    },
  },
});

<script setup lang="ts">
import { captureException, addBreadcrumb, setUser } from '@codmir/overseer';
import { onMounted } from 'vue';

const props = defineProps<{ user: User }>();

// Set user context
onMounted(() => {
  setUser({
    id: props.user.id,
    email: props.user.email,
  });
});

const handleClick = async () => {
  addBreadcrumb({
    category: 'ui.click',
    message: 'Button clicked',
    level: 'info',
  });

  try {
    await performAction();
  } catch (error) {
    captureException(error as Error);
  }
};
</script>

<template>
  <button @click="handleClick">Do Action</button>
</template>

// composables/useOverseer.ts
import { captureException, addBreadcrumb, setUser } from '@codmir/overseer';

export function useOverseer() {
  const trackError = (error: Error, context?: Record<string, unknown>) => {
    captureException(error, { extra: context });
  };

  const trackAction = (category: string, message: string, data?: Record<string, unknown>) => {
    addBreadcrumb({ category, message, data, level: 'info' });
  };

  const identifyUser = (user: { id: string; email?: string }) => {
    setUser(user);
  };

  return { trackError, trackAction, identifyUser };
}

# .env
VITE_OVERSEER_DSN=https://your-project.codmir.com/overseer

# Nuxt
OVERSEER_DSN=https://your-project.codmir.com/overseer