@allstak/vue

Official AllStak SDK for Vue 3. Captures uncaught exceptions, structured logs, navigation spans, HTTP requests, and web vitals — with first-class composition-API ergonomics.

Install

npm install @allstak/vue
# or
pnpm add @allstak/vue
# or
yarn add @allstak/vue

vue@^3.2 is a peer dependency; vue-router@^4 is optional.

Setup

import { createApp } from 'vue';
import { AllStakPlugin } from '@allstak/vue';
import App from './App.vue';

createApp(App)
  .use(AllStakPlugin, {
    apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
    environment: import.meta.env.MODE,
    release: import.meta.env.VITE_APP_VERSION,
  })
  .mount('#app');

That single use(AllStakPlugin, …) wires:

• app.config.errorHandler — every uncaught render/lifecycle error becomes an Issue
• A $allstak injection key + globalProperties.$allstak
• Auto release-health sessions
• The full @allstak/js ingest pipeline (HTTP, db, logs, breadcrumbs, web-vitals)

Composition API

import { useAllStak, useAllStakUser, useAllStakSpan } from '@allstak/vue';

const allstak = useAllStak();
allstak.captureException(new Error('payment declined'));

// Bind a user for the lifetime of this component (cleared on unmount)
useAllStakUser({ id: currentUser.id, email: currentUser.email });

// Open a span; finished automatically on unmount
const span = useAllStakSpan({ op: 'checkout.review', description: 'review-cart' });
span.setTag('cart_size', items.value.length);

vue-router

Navigation instrumentation is automatic. Register vue-router before the plugin (or pass the router via the router option) and every route change becomes a navigation span + breadcrumb — no extra call required:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { AllStakPlugin } from '@allstak/vue';
import App from './App.vue';

const router = createRouter({ history: createWebHistory(), routes });

createApp(App)
  .use(router)        // register the router first, then…
  .use(AllStakPlugin, { apiKey: import.meta.env.VITE_ALLSTAK_API_KEY })
  .mount('#app');

If the plugin runs before app.use(router), pass the router explicitly:

createApp(App)
  .use(AllStakPlugin, { apiKey: '…', router })
  .use(router)
  .mount('#app');

You can still wire it by hand (e.g. when autoInstrumentRouter: false):

import { installRouterInstrumentation } from '@allstak/vue';

const router = createRouter({ history: createWebHistory(), routes });
installRouterInstrumentation(router);

Auto-instrumentation is on by default and a safe no-op when vue-router isn't installed; set autoInstrumentRouter: false to opt out. Router errors become Issues. Instrumenting the same router twice is a no-op.

Component performance tracing

Opt in to per-component render timing. A span (ui.vue.<operation>, described as Vue <ComponentName>) is opened around each tracked component's lifecycle phase.

import { createApp } from 'vue';
import { AllStakPlugin } from '@allstak/vue';

createApp(App)
  .use(AllStakPlugin, {
    apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
    tracingOptions: {
      trackComponents: true,      // or a list: ['Checkout', 'Cart']
      hooks: ['mount', 'update'], // default: ['mount']
    },
  })
  .mount('#app');

Or install it standalone on an existing app:

import { installComponentTracing } from '@allstak/vue';

installComponentTracing(app, { trackComponents: ['Dashboard'] });

Error boundary

<script setup>
import { AllStakErrorBoundary } from '@allstak/vue';
</script>

<template>
  <AllStakErrorBoundary>
    <RiskyWidget />
    <template #fallback="{ error }">
      <p>Sorry — something broke. ({{ error?.message }})</p>
    </template>
  </AllStakErrorBoundary>
</template>

Configuration

AllStakPlugin accepts every option that @allstak/js's AllStak.init accepts, plus:

| Option | Default | Purpose | |---|---|---| | attachErrorHandler | true | Install app.config.errorHandler | | attachWarnHandler | false | Install app.config.warnHandler as breadcrumbs | | skipInit | false | Skip the AllStak.init call if you've already done it | | tracingOptions | — | Enable component-render tracing (trackComponents, hooks) |

License

MIT