panels-origin/web-panel/app.vue

<template>
  <NuxtErrorBoundary>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
    <template #error="{ error, clearError }">
      <div class="crash-shell">
        <Card class="crash-card">
          <template #title>
            <div class="crash-title">
              <i class="pi pi-exclamation-triangle" aria-hidden="true" />
              <span>¡Oops! Algo falló</span>
            </div>
          </template>
          <template #content>
            <p class="crash-lead">
              No pudimos cargar esta pantalla. Puede ser un problema temporal, de conexión o de datos del servidor.
            </p>
            <div class="crash-meta">
              <Tag :value="crashCode(error)" severity="danger" />
              <span class="crash-reason">{{ crashSummary(error) }}</span>
            </div>
            <details v-if="crashDetail(error)" class="crash-details">
              <summary>Detalle técnico</summary>
              <pre>{{ crashDetail(error) }}</pre>
            </details>
            <div class="crash-actions">
              <Button label="Reintentar" icon="pi pi-refresh" @click="clearError" />
              <Button label="Ir al inicio" icon="pi pi-home" severity="secondary" outlined @click="goHome(clearError)" />
            </div>
          </template>
        </Card>
      </div>
    </template>
  </NuxtErrorBoundary>
  <ClientOnly>
    <Toast />
    <ConfirmDialog />
  </ClientOnly>
</template>

<script setup lang="ts">
function crashCode(error: unknown): string {
  if (error && typeof error === "object") {
    const row = error as Record<string, unknown>;
    if (typeof row.code === "string" && row.code.trim()) return row.code;
    if (typeof row.statusCode === "number") return `HTTP_${row.statusCode}`;
  }
  if (error instanceof Error && error.name) return error.name;
  return "PANEL_RENDER_ERROR";
}

function crashSummary(error: unknown): string {
  if (error instanceof Error) return error.message;
  if (typeof error === "string") return error;
  try {
    return JSON.stringify(error);
  } catch {
    return "Error desconocido al renderizar la pantalla.";
  }
}

function crashDetail(error: unknown): string {
  if (error instanceof Error && error.stack) return error.stack;
  if (error instanceof Error) return error.message;
  if (typeof error === "string") return error;
  return "";
}

async function goHome(clearError: () => void) {
  clearError();
  await navigateTo("/");
}
</script>