Skip to content

Nuxt

Nuxt поставляет собственный <NuxtErrorBoundary> (обёртку над onErrorCaptured) и страницу error.vue для ошибок всего приложения. Этот пакет дополняет их, а не заменяет:

  • <NuxtErrorBoundary> — тонкая, узкоспециализированная обёртка со слотом #error и без собственной истории повторов/сбросов/отчётности — используйте <ErrorBoundary> из этого пакета, когда нужны resetKeys, maxRetries, счётчики попыток или репортер на уровне компонента.
  • error.vue обрабатывает ошибки, дошедшие до корня приложения (включая те, которые компонентная граница решила не изолировать, или произошедшие до монтирования любой границы). Держите её как последний рубеж защиты; используйте <ErrorBoundary> для частей дерева, которые должны деградировать изящно, а не обрушивать всю страницу.
  • Оба механизма опираются на один и тот же onErrorCaptured, так что в обоих случаях применим один и тот же список того, что перехватывается и не перехватывается.

Модуль vue-error-boundary-kit/nuxt

Добавьте его в nuxt.config.ts для автоматической регистрации — никаких ручных импортов в коде приложения не нужно:

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:

ts
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:

vue
<!-- app.vue -->
<script setup lang="ts">
const { error } = useNuxtErrorBoundary({ reporter: sentryReporter })
</script>

<template>
  <ErrorBoundary :reporter="sentryReporter">
    <NuxtPage />
  </ErrorBoundary>
</template>

Для ошибок, которые вы хотите отдать на обработку собственной error.vue фреймворка (например, 404 из createError()), не оборачивайте их в локальную границу — дайте им распространиться дальше.