ErrorFallback
La tarjeta de «algo se rompió» con su botón de reintentar.
Usar
import { ErrorFallback } from "@unozero-ai/ui/react";
<ErrorFallback></ErrorFallback>Cuándo usarlo
Para un fallo que no esperabas: un componente que revienta o una ruta que no carga. Es la misma tarjeta en toda la app, así que un error se reconoce como del sistema y se arregla en un solo sitio. Un error previsto (una tarjeta rechazada, un campo mal escrito) no es esto: cuéntalo con un Alert o una StatusPanel. El ErrorFallbackCard del kit React es ahora ErrorFallback. Ya no exige textos: sin heading dice «Algo salió mal» y el botón, «Reintentar», los textos del kit que se cambian con setLabels. Aun así, escribe el mensaje: dice qué no se perdió.
Reintentar
«Reintentar» llama a onRetry: vuelve a pedir los datos ahí. minHeightClass ya no existe: el alto mínimo (40dvh por defecto) vive en el propio elemento y se cambia con una clase o un style. Dale el mismo que tienen la carga y el contenido, y el bloque no salta al pasar de un estado a otro. detail guarda el mensaje técnico plegado tras «Ver detalle», para soporte. Pulsa «Reintentar».
Con un error boundary
Envuelve la parte que puede fallar en un error boundary de React que pinte la tarjeta. Si el folio revienta, el resto del panel sigue en pie; al reintentar se limpia el error y se vuelve a pintar. Con className="min-h-0" ocupa solo lo que mide el bloque que sustituye. Es role="alert": al aparecer, se anuncia.
- Alojamiento, 2 noches
- 1.040.000 COP
- Minibar
- 200.000 COP
En una ruta de Next
Para una página entera, úsala en el error.tsx del segmento. retry vuelve a pedir y pintar la ruta; existe desde Next 16.3 (en versiones anteriores, reset). En producción, Next oculta el mensaje de los errores del servidor: pasa el digest como detalle para que soporte encuentre el error en los registros.
"use client";
import { ErrorFallback } from "@unozero-ai/ui/react";
export default function ReservationsError({ error, retry }: { error: Error & { digest?: string }; retry: () => void }) {
return (
<ErrorFallback
heading="No pudimos cargar las reservas"
message="Puede ser un corte momentáneo. Tus reservas no cambiaron."
detail={error.digest ?? error.message}
onRetry={retry}
style={{ minHeight: "60dvh" }}
/>
);
}API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).