Mitä ovat virherajat (error boundaries) ja mitä ne pysäyttävät?

Question

Accepted Answer

**Error boundary** on komponentti, joka pysäyttää JavaScriptin virheet, jotka heitetään **renderöinnin aikana** sen alipuussa, näyttää varainta käyttöliittymää koko sovelluksen kaatumisen sijaan ja voi kirjata virheen. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Mitä se pysäyttää — ja mitä se ei pysäytä ✅ Pysäyttää: virheet **render**-funktiossa, **lifecycle methods** -metodeissa ja sen alle jäävien komponenttien konstruktoreissa. ❌ Ei pysäytä: - Virheitä **event handler** -käsittelijöissä (käytä tavallista `try/catch` siellä). - **Async** -koodia (promises, `setTimeout`) — ne ovat renderöintivirran ulkopuolella. - Virheitä itse rajassa tai **SSR** -aikana. ## Käytännölliset huomautukset - Virherajojen on tällä hetkellä oltava **luokkakomponentteja** (tai käytä `react-error-boundary` -kirjastoa hook-ystävälliselle API:lle). - Sijoita useita rajoja riippumattomien osien ympärille (widgetit, reitit), jotta yhden epäonnistuneen widgetin kaatuminen ei vie muita mukanaan — yksittäinen ylätason raja muuttaa minkä tahansa virheen täysin tyhjäksi sivuksi.