@gluebi/vue-resilient-error-boundary

Vue 3 error boundary that freezes DOM on error instead of unmounting content.

When a child component throws, this component:

1. Snapshots the current DOM (taken on mount and refreshed on error)
2. Replaces the live component tree with frozen HTML via v-html
3. Blocks interaction with a pointer-events: none overlay and cursor: not-allowed
4. Emits an @error event for the consumer to handle logging

No existing Vue/Nuxt library does this — every error boundary unmounts content and shows a fallback. This component preserves what the user was seeing.

Install

pnpm add @gluebi/vue-resilient-error-boundary

Usage (Vue 3)

<script setup>
import { ResilientErrorBoundary } from '@gluebi/vue-resilient-error-boundary'
import '@gluebi/vue-resilient-error-boundary/style.css'
</script>

<template>
  <ResilientErrorBoundary context="product-tile-42" @error="handleError">
    <ProductTile :product="product" />
  </ResilientErrorBoundary>
</template>

Usage (Nuxt 3)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@gluebi/vue-resilient-error-boundary/nuxt'],
})

The Nuxt module auto-imports the component and CSS. No manual imports needed:

<template>
  <ResilientErrorBoundary context="product-tile-42" @error="handleError">
    <ProductTile :product="product" />
  </ResilientErrorBoundary>
</template>

Enriched logging with provide/inject

For parent-level error handlers with enriched context (e.g., container data for Datadog):

import { RESILIENT_ERROR_HANDLER_KEY } from '@gluebi/vue-resilient-error-boundary'

// In a parent/wrapper component:
provide(RESILIENT_ERROR_HANDLER_KEY, (error: Error, context: string) => {
  logger.error('tile-error', { error, context, containerData })
})

The handler receives the normalized Error object and the context string from the boundary.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | context | string | 'unknown' | Identifier passed to @error and the injected handler |

Events

| Event | Payload | Description | |-------|---------|-------------| | error | Error | Emitted when a child component throws |

How it works

• Uses display: contents on wrapper elements — invisible to CSS grid/flexbox
• Snapshots innerHTML on mount and refreshes in onErrorCaptured (before state change)
• Uses Vue's onErrorCaptured directly (not wrapping NuxtErrorBoundary)
• Returns false from onErrorCaptured to stop error propagation
• Frozen content has pointer-events: none with a ::after overlay using pointer-events: auto and cursor: not-allowed

Requirements

• Vue 3.5+
• Nuxt 3+ (optional, for module usage)