// 1 Základní ošetření pomocí error property:
<script setup>
const { data, error, pending } = useFetch('/api/products')
</script>

<template>
  <div v-if="pending">Načítání...</div>
  <div v-else-if="error">
    <p>Došlo k chybě: {{ error.message }}</p>
    <button @click="refresh">Zkusit znovu</button>
  </div>
  <div v-else>
    <!-- zobrazení dat -->
  </div>
</template>


// 2 Pokročilé ošetření s onError handlerem:
<script setup>
const { data, error, pending, refresh } = useFetch('/api/products', {
  onError: (err) => {
    // Vlastní zpracování chyby
    console.error('Chyba při načítání dat:', err)
    
    // Můžete provést další akce - např. zobrazit notifikaci
    // useToast().error('Nepodařilo se načíst produkty')
    
    // Můžete také rozhodnout, jaký objekt se vrátí jako `error`
    return {
      message: 'Chyba při komunikaci se serverem',
      code: err.statusCode,
      retry: true
    }
  }
})

// Funkce pro opakování fetchování
function retryFetch() {
  refresh()
}
</script>

<template>
  <div v-if="pending">Načítání...</div>
  <div v-else-if="error">
    <p>{{ error.message }}</p>
    <p v-if="error.code">Kód chyby: {{ error.code }}</p>
    <button v-if="error.retry" @click="retryFetch">
      Zkusit znovu
    </button>
  </div>
  <div v-else>
    <!-- zobrazení dat -->
  </div>
</template>


// 3 globalni
<!-- /error.vue -->
<script setup>
const props = defineProps({
  error: Object
})

function handleError() {
  // Přesměrování zpět na hlavní stránku
  navigateTo('/')
}
</script>

<template>
  <div class="error-page">
    <h1>Jejda! Něco se pokazilo</h1>
    <p>{{ error.message }}</p>
    <p v-if="error.statusCode">Stavový kód: {{ error.statusCode }}</p>
    <div>
      <button @click="handleError">
        Zpět na hlavní stránku
      </button>
    </div>
  </div>
</template>


Tento přístup zachytí chyby z celé aplikace včetně API volání, pokud použijete throw createError() nebo showError().