Jak na chyby v Reactu – Error boundaries

Pokud Vás horké léto nedonutilo přesunout se k vodě, rád bych Vám v následujícím článku předvedl zajímavé kouzlo s Reactem, díky kterému lze snadno posunout Vaši aplikaci o úroveň výše a dopřát uživatelům lepší user-experience. Nejedná se přitom o žádné šílené úpravy, které Vás donutí zrefactorovat celou aplikaci. Zadarmo ale ani pes nehrabe, znáte to. Také jste se setkali s tím, že chyba v komponentě způsobí pád celé aplikace a uživatelé vidí jen bílou obrazovku? V takovém případě Vám pomůžou error boundaries.

Error boundaries

Velmi šikovná nenápadná věcička, která se ukázala s příchodem Reactu 16. Pokud provozujete nějakou react appku, určitě jste se již setkali s tím, že chyba v nějaké komponentě způsobila pád celé aplikace. Došlo k zastavení běhu javascriptu a appka se vůbec nevyrenderovala. Uživatel v takovém případě vidí téměř to nejhorší co může být – bílou stránku. Horší je už jen reklama na Alzu.

Uvažujme následující komponentu

import React, { Component } from 'react'

class Error extends Component {
  render () {
    throw new Error('React whitepage generator...')
  }
}

export default Error

Abych citoval mého kamaráda:

„Chceš, nechceš, máš ji.“ (kamarád s vyholenou hlavou)

Whitepage samozřejmě…

Jako bonus vlastně vůbec nezáleží, jestli je tato komponenta první, druhá nebo poslední. Pád komponenty rozhodí Váš javascript stejně jako Vaše plány na dovolenou, když Vám uletí letadlo do Bologny a vy musíte jet 14 hodin flixbusem a přitom psát články na blog. True story.

Řešení je přitom velmi jednoduché

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Všechny Vaše komponenty potom obalíte touto zachytávací komponentou

<ErrorBoundary>
  <Error />
</ErrorBoundary>

Jako zázrakem potom v případě chyby dojde k zobrazení záložního obsahu a chyba nemá žádný vliv na zobrazení zbytku stránky. Vaši návštěvníci mohou čerpat ostatní obsah, jedna chybějící komponenta je určitě lepší než bílá stránka. Nebo ne?

Reactu a Raynaru zdar.