vue-error-boundary-kit

Production-ready error boundaries for Vue 3 — a declarative <ErrorBoundary> component, a useErrorBoundary() composable for programmatic use, and an adapter-based reporting layer (Sentry / Bugsnag / LogRocket / plain HTTP) that isn't hard-baked into the core.

Zero runtime dependencies beyond Vue itself. Core bundle (<ErrorBoundary> + useErrorBoundary) is ~2.1 kB gzip; every reporting adapter is its own entry point and only ships if you import it.

The problem

React has had error boundaries as a first-class pattern for years. Vue 3 only gives you the low-level onErrorCaptured hook — every project ends up re-inventing a fallback-UI component with retry and error reporting around it. This package is that component, done once, with:

• a declarative <ErrorBoundary> with a fallback slot and retry;
• useErrorBoundary() for programmatic use outside a template boundary;
• a single adapter-based error-reporting mechanism (Sentry / Bugsnag / custom fetch — no hard dependency);
• useGlobalErrorCapture(), an opt-in separate entry point for what errorCaptured structurally cannot see (raw event-listener callbacks, timers, unhandled promise rejections).

Installation

npm install vue-error-boundary-kit

Quick start

<script setup lang="ts">
import { ErrorBoundary } from 'vue-error-boundary-kit'
import UserProfile from './UserProfile.vue'

const userId = ref('42')
const routeId = ref('profile')

function handleError(error) {
  // error: CapturedError — see Types below
}
</script>

<template>
  <ErrorBoundary :reset-keys="[routeId]" @error="handleError">
    <template #default>
      <UserProfile :id="userId" />
    </template>
    <template #fallback="{ error, reset, retryCount }">
      <ErrorState :message="error.message" @retry="reset" />
    </template>
  </ErrorBoundary>
</template>