Vue error tracking your users won't report for you
A Vue 3 plugin that captures render errors, web vitals, and route changes automatically — with session replay and readable stack traces via source maps on the same platform. Register it once on your app and stop hearing about bugs from screenshots.
Why Vue apps need real error tracking
Frontend errors are invisible by default. A render error in a component breaks the page for a user on a phone in a different city, the console message dies with their tab, and the first you hear of it is a one-star review or a vague support ticket. Minified production bundles make the few reports you do get nearly useless — a stack trace pointing at app.3f2c1a.js line 1 helps nobody.
AllStak's Vue plugin closes that gap. Register AllStakPlugin on your Vue 3 app and uncaught render errors are captured automatically, HTTP calls, breadcrumbs, and web vitals are wired in through the underlying JS pipeline, and route changes can be traced by passing your router. Upload source maps and minified traces become readable code; session replay shows what the user actually did before the error. All of it lands on the same platform as your backend errors, logs, and uptime — one bill, one dashboard.
Full-stack Vue monitoring
From a render error in a component to the API call behind it, AllStak covers your Vue app across every layer.
Error tracking
Uncaught render errors are captured automatically, handled ones report via the useAllStak composable, and AllStakErrorBoundary keeps a broken widget from taking the page down.
Session replay
See what the user actually did before the error — clicks, navigation, and the moment it broke — instead of reconstructing it from a support ticket.
Source maps
Upload source maps and minified production stack traces resolve to your original code — file, line, and function — so the fix starts immediately.
Web vitals & performance
Web vitals are wired in automatically through the underlying JS pipeline, so you see how the app actually performs on real users' devices.
Route & HTTP tracking
Pass your router to trace route changes, while HTTP calls and breadcrumbs are captured automatically — so every error carries the journey that led to it.
Alerts & incidents
Get notified the moment a new error appears or an old one spikes — before the support tickets arrive, not after.
Add AllStak in minutes
Install from npm (requires vue@^3.2) and register the plugin on your app — render errors are captured automatically from there.
npm install @allstak/vue
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');Uncaught render errors are captured automatically (attachErrorHandler is on by default) — pass router and autoInstrumentRouter to trace route changes too. full setup guide · SDK reference.
What you see in AllStak
Error detail with full context
Open any issue to a readable stack trace (via source maps), the breadcrumbs leading up to it, and the release it shipped in — reproduction without the guesswork.
Session replay of the failure
Watch the user's session around the error — what they clicked, where they navigated, and what the page looked like when it broke.
Web vitals on real devices
Performance as your users actually experience it, not as your dev machine renders it — tracked continuously, not sampled once.
Unified real-time dashboard
Frontend errors next to the backend errors, logs, and uptime of the APIs behind them — one dashboard, in English or Arabic, for the whole team.
Why teams pick AllStak for Vue
- Frontend and backend on one platform — errors, logs, uptime, and infrastructure with one bill.
- One plugin registration on your Vue 3 app — render errors are captured automatically from there.
- Session replay and source maps turn vague bug reports into watchable, readable evidence.
- HTTP, breadcrumbs, and web vitals wired in automatically — no per-call instrumentation.
- Predictable SAR pricing with a genuine free tier — start without a credit card.
- Data stays in Saudi Arabia, with an English and Arabic dashboard for the whole team.
Vue monitoring FAQ
How do I add error tracking to a Vue app?
Install @allstak/vue from npm and register AllStakPlugin on your app with your project API key. Uncaught render errors are captured automatically; use the useAllStak composable for handled errors and AllStakErrorBoundary to wrap risky subtrees — the setup guide covers each option.
Which Vue versions are supported?
The plugin targets Vue 3 and requires vue@^3.2. If you're on Nuxt, AllStak also ships a dedicated Nuxt module that covers both the client and the Nitro server.
Is AllStak free for Vue?
Yes. AllStak has a free tier you can start on without a credit card, and predictable SAR pricing as you grow. The Vue SDK itself is free to use.
Is AllStak a Sentry alternative for Vue?
Yes. You get Vue error tracking with source maps and session replay like Sentry, plus the logs, uptime, and infrastructure monitoring of your backend on the same platform — one SAR bill and data stored in Saudi Arabia instead of a stack of separate tools.
Will the SDK slow down my Vue app?
The plugin is built for production browsers: capture hooks are lightweight and telemetry ships in the background, so your users' experience isn't meaningfully affected. You control what's instrumented — router tracing, for example, is opt-in via autoInstrumentRouter.
Explore more
Start tracking Vue errors today
Register the plugin, deploy, and watch render errors, web vitals, and sessions arrive in one dashboard. Start free — no credit card required.