O que é um limite de erro?

Durante a construção de aplicativos, erros são inevitáveis. Eles podem vir de APIs, UI ou de vários outros lugares.

É muito importante lidar com esses erros com elegância e manter uma boa experiência do usuário, apesar desses erros.

Error Boundary é uma forma de tratamento de erros no React.

Como o limite de erro ajuda?

Para entender isso, vamos entender a situação antes da introdução do limite de erro.

Antes dos limites de erro, os erros que ocorriam dentro dos componentes eventualmente se propagavam e quebravam a IU ou renderizavam a tela branca.

Isso causou uma experiência de usuário muito ruim.

O limite de erro nos ajuda a lidar com esses erros e exibir uma IU substituta em vez de quebrar a IU ou a tela branca exibida.

Como usar o limite de erro?

React v16 introduziu oficialmente o limite de erro.

É um componente baseado em classe que pode ser usado para encapsular seu aplicativo.

Ele aceita uma UI substituta para ser exibida caso seu aplicativo tenha erros ou não, ele simplesmente renderiza o componente filho para retomar o fluxo normal de seu aplicativo.

É assim que a documentação do React recomenda usá-lo,

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

Qual é o problema com o limite de erro do React?

Ele não pode capturar erros que ocorrem em,

• Manipuladores de eventos (esses erros precisam ser tratados com blocos try-catch)
• Código assíncrono (APIs, setTimeout, requestAnimationFrame etc.)
• Renderização do lado do servidor
• O erro que ocorre no próprio limite de erro
• Não funciona com componentes funcionais. Embora possamos fazê-lo funcionar com algumas alterações de código.
• Ganchos não podem ser usados ​​dentro dele.

Qual é a solução?

Há um pacote npm chamado react-error-boundary que é um wrapper sobre o componente Error Boundary tradicional.

Usando este pacote, somos capazes de superar todos os problemas enfrentados no componente tradicional de limite de erro.

Como usá-lo?

Você pode agrupar todo o seu aplicativo ou agrupar componentes individuais com .

A granularidade da implementação depende de você.

Vamos entender como usá-lo.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return Something went wrong}>
/* rest of your component */

}

Este é o exemplo mais simples de uso de ErrorBoundary. Há mais nesta biblioteca.

Compreendendo a API react-error-boundary

Vamos tentar entender a API em diferentes cenários.

1. Quero mostrar uma UI substituta genérica para erros no aplicativo

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return Something went wrong}>
 /* rest of your component */
 
 }

2. Quero mostrar detalhes de erros específicos em meu componente substituto

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

"use client";