Nuxt
Nuxt поставляет собственный <NuxtErrorBoundary> (обёртку над onErrorCaptured) и страницу error.vue для ошибок всего приложения. Этот пакет дополняет их, а не заменяет:
<NuxtErrorBoundary>— тонкая, узкоспециализированная обёртка со слотом#errorи без собственной истории повторов/сбросов/отчётности — используйте<ErrorBoundary>из этого пакета, когда нужныresetKeys,maxRetries, счётчики попыток или репортер на уровне компонента.error.vueобрабатывает ошибки, дошедшие до корня приложения (включая те, которые компонентная граница решила не изолировать, или произошедшие до монтирования любой границы). Держите её как последний рубеж защиты; используйте<ErrorBoundary>для частей дерева, которые должны деградировать изящно, а не обрушивать всю страницу.- Оба механизма опираются на один и тот же
onErrorCaptured, так что в обоих случаях применим один и тот же список того, что перехватывается и не перехватывается.
Модуль vue-error-boundary-kit/nuxt
Добавьте его в nuxt.config.ts для автоматической регистрации — никаких ручных импортов в коде приложения не нужно:
export default defineNuxtConfig({
modules: ['vue-error-boundary-kit/nuxt'],
})Это регистрирует <ErrorBoundary> как глобальный компонент и автоимпортирует useErrorBoundary, useGlobalErrorCapture и useNuxtErrorBoundary (ниже) — проверено end-to-end на реальном приложении Nuxt 4.5.2, собранном из опубликованного tarball пакета, включая то, что типизация опций модуля в nuxt.config.ts действительно ловит опцию неправильной формы.
Опции
Обе опциональны, по умолчанию true, под ключом errorBoundaryKit:
export default defineNuxtConfig({
modules: ['vue-error-boundary-kit/nuxt'],
errorBoundaryKit: {
component: true, // зарегистрировать <ErrorBoundary> глобально
autoImports: true, // автоимпортировать три composable выше
},
})component
boolean · по умолчанию: true
Зарегистрировать <ErrorBoundary> как глобальный компонент.
autoImports
boolean · по умолчанию: true
Автоимпортировать useErrorBoundary, useGlobalErrorCapture и useNuxtErrorBoundary.
@nuxt/kit — лишь peer-зависимость этого пакета (peerDependenciesMeta.optional), никогда не бандлится в ваше приложение — она уже входит в любую установку Nuxt, поэтому добавлять нечего. Протестировано на Nuxt 4.5.2; заявленная compatibility: { nuxt: '>=3.0.0' } у модуля выведена из собственного кросс-мажорного (2/3/4) дизайна @nuxt/kit, а не проверена независимо на Nuxt 3.
useNuxtErrorBoundary()
useErrorBoundary() плюс подключённые собственные хуки Nuxt vue:error и app:error — то есть также перехватывает то, что ускользает из любого <ErrorBoundary> в вашем дереве (ошибку рендера/setup, дошедшую до корня приложения необработанной), а также собственный фатальный поток showError()/createError() в Nuxt, который граница на уровне компонента вообще не видит. Оба хука работают изоморфно, так что это покрывает и SSR, и клиент. Обычно вызывается один раз, например, в app.vue:
<!-- app.vue -->
<script setup lang="ts">
const { error } = useNuxtErrorBoundary({ reporter: sentryReporter })
</script>
<template>
<ErrorBoundary :reporter="sentryReporter">
<NuxtPage />
</ErrorBoundary>
</template>Для ошибок, которые вы хотите отдать на обработку собственной error.vue фреймворка (например, 404 из createError()), не оборачивайте их в локальную границу — дайте им распространиться дальше.