Error Boundary Kit

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

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

Возможности

• <ErrorBoundary> — декларативный компонент со слотом fallback, повтором попытки, сбросом и авто-сбросом через resetKeys
• <AsyncBoundary> — объединяет <Suspense> и <ErrorBoundary> в одном компоненте, добавляя слот loading; отдельная точка входа, ничего не стоит, пока не импортирована
• useErrorBoundary() — программное использование вне шаблонной границы, с явным captureError()
• useGlobalErrorCapture() — опциональная отдельная точка входа для того, что errorCaptured структурно не может увидеть: сырые колбэки обработчиков событий, таймеры, необработанные отклонения промисов
• Повтор с задержкой (backoff) — vue-error-boundary-kit/retry-backoff оборачивает retry() границы возрастающей задержкой для нестабильных/сетевых сбоев
• Адаптеры отправки отчётов — шесть готовых адаптеров (console, HTTP, Sentry, Bugsnag, LogRocket, OpenTelemetry), каждый — своя точка входа, подключается к бандлу только при импорте
• Ограничение частоты и дедупликация — adapters/rate-limit оборачивает любой(-ые) репортер(ы), ограничивая и дедуплицируя отчёты во время шторма массовых сбоев
• Хлебные крошки (breadcrumbs) — скользящее окно «что произошло до ошибки», автоматически прикрепляется к отчётам после подключения
• Вложенные границы — isolate: false позволяет локально обработанной ошибке дополнительно всплыть к ближайшей родительской границе; репортер гарантированно сработает ровно один раз даже по всей цепочке
• shouldCatch — позволяет конкретным ошибкам (например, AbortError отменённого fetch) полностью пройти сквозь границу нетронутыми
• Модуль Nuxt — vue-error-boundary-kit/nuxt автоматически регистрирует <ErrorBoundary> и авто-импортирует composables; useNuxtErrorBoundary() также перехватывает собственные хуки Nuxt vue:error/app:error
• Интеграция с Vue Router — useRouterErrorBoundary() перехватывает ошибки, которые onErrorCaptured структурно никогда не увидит: guard'ы навигации, next(), асинхронные компоненты маршрутов
• Интеграция с TanStack Query — useQueryErrorReset() сбрасывает запросы в состоянии ошибки перед повтором, чтобы повторный запрос реально перезапросил данные, а не мгновенно провалился снова
• История ошибок для отладки — не имеющая зависимостей точка входа /devtools с createErrorHistory() + <ErrorHistoryPanel>, примерно в 9 раз легче настоящей интеграции с Vue Devtools
• Утилиты для тестирования — точка входа /testing с фикстурами-throw и репортером-заглушкой для записи вызовов, независимая от фреймворка тестирования сверх самого Vue
• SSR-безопасность — падающее поддерево никогда не роняет renderToString; события ошибок и репортеры корректно срабатывают на сервере; гидратация всегда сходится к корректному клиентскому состоянию
• Ноль runtime-зависимостей, кроме Vue — каждая возможность сверх базовой границы — своя tree-shakeable точка входа

Проблема

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

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