Manejo de errores

De forma predeterminada, siempre que se produce un error en la representación de una aplicación Owl, destruimos toda la aplicación. De lo contrario, no podemos ofrecer ninguna garantía sobre el estado del árbol de componentes resultante. Puede que esté irremediablemente dañado, pero sin ninguna respuesta visible para el usuario.

Está claro que suele ser un poco extremo destruir la aplicación. Por eso necesitamos un mecanismo para gestionar los errores de renderizado (y los errores que provienen de los ganchos del ciclo de vida): el gancho onError.

La idea principal es que el gancho onError registre una función que se llamará con el error. Esta función debe manejar la situación, la mayoría de las veces actualizando algún estado y volviéndose a renderizar, para que la aplicación pueda volver a un estado normal.

Managing Errors

Siempre que se utiliza el gancho de ciclo de vida onError, todos los errores que provienen de la representación de subcomponentes y/o de las llamadas a métodos de ciclo de vida se capturarán y se entregarán al método onError. Esto nos permite manejar el error de manera adecuada y no interrumpir la aplicación.

Hay cosas importantes que saber:

• Si no se detecta un error que se produjo en el ciclo de renderizado interno, Owl destruirá la aplicación completa. Esto se hace a propósito, ya que Owl no puede garantizar que el estado no se corrompa a partir de ese momento.

• Los errores que provienen de los controladores de eventos NO son gestionados por onError ni ningún otro mecanismo de Owl. Depende del desarrollador de la aplicación recuperarse adecuadamente de un error.

• Si un controlador de errores no puede manejar adecuadamente un error, puede simplemente volver a generar un error y Owl intentará buscar otro controlador de errores en el árbol de componentes.

Ejemplo

Por ejemplo, aquí se muestra cómo podríamos implementar un componente genérico ErrorBoundary que represente su contenido y una alternativa si ocurre un error.

class ErrorBoundary extends Component {
  static template = xml`
    <t t-if="state.error" t-slot="fallback">An error occurred</t>
    <t t-else="" t-slot="default"/>`;

  setup() {
    this.state = useState({ error: false });
    onError(() => (this.state.error = true));
  }
}

El uso de ErrorBoundary es entonces muy sencillo:

<ErrorBoundary>
  <SomeOtherComponent/>
  <t t-set-slot="fallback">Some specific error message</t>
</ErrorBoundary>

Tenga en cuenta que debemos tener cuidado aquí: la interfaz de usuario alternativa no debe generar ningún error; de lo contrario, corremos el riesgo de entrar en un bucle infinito (además, consulte la página sobre slots para obtener más información sobre la directiva t-slot).