Componenti
ErrorBoundary
Wrapper di isolamento errori per impedire che un widget rompa l'intera dashboard.
Panoramica
<ErrorBoundary> e usato internamente da <PzetaDashboard> per avvolgere ogni widget. Cattura le eccezioni propagate dai figli tramite onErrorCaptured di Vue, mostra un fallback con messaggio e pulsante "Riprova", e impedisce la propagazione verso l'alto.
Si puo usare anche standalone per proteggere sezioni custom della UI.
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
widgetId | string | — | ID del widget per tracciamento errori |
showDetails | boolean | false | Mostra stack trace nel fallback (solo dev) |
Eventi
| Evento | Payload | Descrizione |
|---|---|---|
error | [error: Error, widgetId?: string] | Errore catturato nei figli |
Metodi esposti
| Metodo | Descrizione |
|---|---|
reset() | Resetta lo stato di errore e ri-renderizza i figli |
Esempio standalone
<script setup lang="ts">
import { ref } from 'vue'
import { ErrorBoundary } from '@pzeta/vue-widget'
const boundary = ref<InstanceType<typeof ErrorBoundary> | null>(null)
function handleError(err: Error, id?: string) {
console.error(`Errore widget ${id}:`, err)
}
</script>
<template>
<ErrorBoundary ref="boundary" widget-id="custom-section" :show-details="true" @error="handleError">
<MyCustomWidget />
</ErrorBoundary>
<button @click="boundary?.reset()">Reset</button>
</template>
Il fallback usa l'icona status.error dal registry icone e l'icona status.retry per il pulsante.