Saltar al contenido principal

Límite de error

Límite de error en Storybook

Uso​

Descripción general​

El componente límite de error es un componente encapsulador que acepta componentes secundarios y algunas personalizaciones opcionales. Cuando un componente secundario se renderiza normalmente, el componente límite de error no hace nada. Sin embargo, si un componente secundario genera un error durante la renderización, el componente límite de error se activa y reemplaza este componente por una interfaz de usuario de error predefinida.

Encapsulamiento de límite de error de un microfrontend

En su estructura interna, el componente límite de error detecta los errores de JavaScript lanzados por los componentes de React y los informa a los eventos de Jutro de forma predeterminada, pero este comportamiento puede modificarse si fuera necesario. También presenta una acción de recuperación y evita que toda la aplicación se bloquee.

La interfaz de usuario de error consta de un ícono, un texto de error, un texto de error detallado y un botón de acción. Puede personalizar a todos ellos y puede utilizar el componente en cualquier lugar de la aplicación. De manera predeterminada, se usa alrededor de la aplicación de plantilla de Jutro y también encapsula todos los microfrontends. Todos los parámetros para el componente límite de error y los ejemplos de los diferentes estilos, como tarjeta o altura completa, se encuentran en Storybook.

Encapsulado de un componente con límite de error​

Puede encapsular cualquier componente en un componente límite de error. Sin embargo, le recomendamos utilizarlo principalmente para componentes que dependen de llamadas de red o interactúan con API o bases de datos, ya que es más probable que presenten errores. Un componente se encapsula con un componente límite de error de la siguiente manera:

const MyComponentWithBoundary = (props) => (
  <ErrorBoundary noticeStyle="card">
    <MyComponent {...props} />
  </ErrorBoundary>
);

Personalización​

Todas las partes del componente límite de error se pueden personalizar usando metadatos o JSX, y también se puede decidir si mostrar cualquier error técnico que haya arrojado un componente secundario.

Por ejemplo, los metadatos se pueden configurar para que el error técnico representado por la propiedad showErrorMessage se vea de la siguiente manera:

{
  "id": "generated-f620b8f5-44fd-43a4-b828-1a88a51c80f5",
  "type": "container",
  "component": "ErrorBoundary",
  "content": [
    {
      "id": "generated-fb18c51a-a30e-4488-a66a-8d99d948c24f",
      "type": "element",
      "component": "BadComponent"
    }
  ],
  "componentProps": {
    "showErrorMessage": true
  }
}

Lo mismo puede hacerse en JSX al pasar una propiedad adicional, showErrorMessage, de esta manera:

const BasicTemplate: ErrorBoundaryStory = (args) => (
  <ErrorBoundary
    showErrorMessage
    {...args}>
    <BadComponent />
  </ErrorBoundary>
);

Es posible pasar y personalizar del mismo modo otras propiedades, como noticeStyle, mainMessage, detailedMessage y actions, con sus respectivas funciones de devolución de llamada.

También puede reemplazar el componente de interfaz de usuario de error predeterminado por un componente personalizado. Consulte Storybook para obtener más ejemplos de personalización.