ErrorComponent
El componente ErrorComponent se utiliza para mostrar errores personalizados o basados en el estado de un componente, incluyendo mensajes de error y posibles entradas relacionadas con el error.
Ejemplo
Importación
Para importar el componente ErrorComponent, se puede hacer desde fenextjs
import { ErrorComponent } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| error | ErrorFenextjs | no | undefined | Objeto de error que contiene el mensaje y otros detalles del error a mostrar. |
| useDataError | boolean | no | true | Indica si se debe incluir el error en el atributo 'data-error' como una cadena JSON. |
| useErrorInput | boolean | no | true | Indica si se debe mostrar información adicional sobre una entrada relacionada con el error, si está disponible. |
| className | string | no | '' | Clase CSS para personalizar el estilo del componente. |
| children | ReactNode | no | undefined | Contenido que se muestra dentro del componente si no se proporciona un error. |
ErrorFenextjs
El error que se pasa al componente tiene distintos atributos:
| Propiedad | Tipo | Descripción |
|---|---|---|
| code | ErrorCode | Código del error |
| message | string | Mensaje interno del error |
| msg | msg | Mensaje del error |
| input | input | Input del error |
| data | any | Data del error |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Uso básico
<ErrorComponent>Error inesperado</ErrorComponent>- Error con mensaje personalizado
<ErrorComponent error={new ErrorFenextjs({ msg: "Ocurrió un error" })} />- Error con entrada relacionada
<ErrorComponent
error={new ErrorFenextjs({ msg: "Error en el campo", input: "email" })}
/>