Vue 3 · logzai-js/browser

Error logging and route tracking for your Vue SPA

logzai-js hooks into Vue Router's afterEach and window.onerror. Pinia or Vuex store context is injected on every event automatically.

Get ingest token

npm install logzai-js

No credit card required. 5M events free/month.

What you get out of the box

Pinia/Vuex context injection

User and org state from your store is attached to every event automatically.

Vue Router route tracking

Every router.afterEach navigation is captured with from/to paths.

Hydration error filtering

Built-in filter examples for Vue-specific noise like hydration mismatches.

Vite environment support

Works with import.meta.env.VITE_* variables out of the box.

Mirror to console (dev)

import.meta.env.DEV gates console mirroring so production stays clean.

logger.ts

import logzai, { browserPlugin, spaPlugin } from 'logzai-js/browser'
import { useAuthStore } from './stores/auth'
import { useOrgStore } from './stores/org'

logzai.init({
  ingestToken: import.meta.env.VITE_LOGZAI_TOKEN,
  ingestEndpoint: 'https://ingest.logzai.com',
  serviceName: 'my-vue-app',
  environment: import.meta.env.MODE,
  mirrorToConsole: import.meta.env.DEV,
})

logzai.plugin('browser', browserPlugin, {
  errorFilter: (error) => {
    const msg = error?.reason?.message ?? error?.message ?? ''
    // Filter Vue hydration mismatch warnings
    if (msg.includes('Hydration completed but contains mismatches')) return false
    return true
  },
  contextInjector: () => {
    const auth = useAuthStore()
    const org = useOrgStore()
    return {
      userId: auth.user?.id,
      userEmail: auth.user?.email,
      orgId: org.selected?.id,
      currentRoute: window.location.pathname,
    }
  },
})

logzai.plugin('spa', spaPlugin, {
  logNavigation: true,
  skipRoutes: ['/health'],
  contextInjector: () => {
    const auth = useAuthStore()
    return { userId: auth.user?.id }
  },
})

Every event arrives enriched

When Vue captures an error or navigation, LogzAI receives these fields automatically.

Field	Example value	Captured from
serviceName	my-vue-app	logzai.init
environment	production	import.meta.env.MODE
userId	usr_01j8x...	Pinia useAuthStore
userEmail	jane@acme.com	Pinia useAuthStore
orgId	org_9xk...	Pinia useOrgStore
currentRoute	/products/detail	window.location.pathname
fromRoute	/products	spaPlugin router.beforeEach
message	TypeError: Cannot read 'price'	browserPlugin

Start sending events in 2 minutes

Add npm install logzai-js to your Vue app and you're done.

No infrastructure to manage. 5M events free/month.

Analyze your logs with AI

Once events are flowing, ask LogzAI questions in plain English. Find root causes in seconds.

Try LogzAI Free