vue-error-boundary-kit

Готовые к продакшену границы обработки ошибок для Vue 3 — декларативный компонент <ErrorBoundary>, composable useErrorBoundary() для программного использования и адаптерный слой отправки отчётов (Sentry / Bugsnag / LogRocket / обычный HTTP), не зашитый жёстко в ядро.

Ноль runtime-зависимостей, кроме самого Vue. Базовый бандл (<ErrorBoundary> + useErrorBoundary) — около 2.1 кБ gzip; каждый адаптер отчётности — отдельная точка входа и подключается к бандлу только при импорте.

Проблема

У React границы обработки ошибок годами были полноценным паттерном из коробки. Vue 3 даёт только низкоуровневый хук onErrorCaptured — в итоге каждый проект заново изобретает компонент fallback-интерфейса с повтором и отправкой отчётов об ошибках. Этот пакет — такой компонент, сделанный один раз, с:

• декларативным <ErrorBoundary> со слотом fallback и повтором попытки;
• useErrorBoundary() для программного использования вне шаблонной границы;
• единым адаптерным механизмом отправки отчётов об ошибках (Sentry / Bugsnag / кастомный fetch — без жёсткой зависимости);
• useGlobalErrorCapture() — опциональной отдельной точкой входа для того, что errorCaptured структурно не может увидеть (сырые колбэки обработчиков событий, таймеры, необработанные отклонения промисов).

Установка

npm install vue-error-boundary-kit

Быстрый старт

<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 — см. раздел Types ниже
}
</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>