Arquitetura Resiliente no React: Usando Error Boundaries

Recentemente estava implementando numa página um leitor de pdf para uma revista, testei no browser desktop e tudo funcionava perfeitamente.

O problema nasceu no mobile, pois após avançar algumas páginas do pdf o site quebrava completamente: “Application error: a client-side exception has occurred (see the browser console for more information).”.

Resumo do conteúdo

• O que são Error Boundaries?
• Quando usar e quando não usar
• Opcionais
• Bibliotecas de Terceiros

Não vou falar da solução, mas sim de como evitar que sua aplicação quebre completamente nesses casos, utilizando o conceito de Error Boundary para apresentar um UI alternativa em caso de erro.

Tela de erro nao tratada

UI com tratamento de error boundary

Antes do React 16, um erro em qualquer componente poderia levar a falhas em toda a aplicação, pois o erro era propagado (intensionalmente, nao é um bug, é uma feature mesmo🫣), quebrando completamente o site e criando uma experiência ruim para o usuário. Com a chegada do React 16, os Error Boundaries foram introduzidos, permitindo que desenvolvedores capturassem e tratassem erros em componentes específicos, sem derrubar toda a aplicação.

O que são Error Boundaries? 🔗

Error Boundaries são componentes React que capturam erros JavaScript em seus componentes filhos, registram esses erros e exibem uma interface de fallback em vez do componente que falhou, funcionando como um catch{} para componentes.

Atualmente, é disponível somente como componente de classe e, até o momento, não há indícios da equipe do React querer mudar isso (ok, oficialmente nao tem, mas voce vai encontrar formas de fazer isso tanto manualmente quanto com libs externas e falarei disso mais pra frente.)

Exemplo de código:

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Algo deu errado.</h1>;
    }
    return this.props.children;
  }
}

Vamos entender melhor o papel das funções:

• getDerivedStateFromError: Esta função estática é usada para atualizar o estado local do componente e renderizar uma UI de fallback após um erro.
• componentDidCatch: Este método é acionado após um erro ser capturado pelo Error Boundary. É útil para registro de erros ou efeitos colaterais.

Ao usar o Error Boundary em sua aplicação, envolva os componentes que você deseja proteger:

<ErrorBoundary>
 <SeuComponente />
</ErrorBoundary>

Voce tambem pode envolver toda a aplicacao, tambem pode envolver o conteudo do site excluindo o layout ou ate mesmo somente rotas, tudo depende do design que voce escolher e que fizer mais sentido no seu contexto.

Quando usar e quando não usar 🔗

Quando usar:

• Em componentes ou funcionalidades não críticas.
• Quando incorporar widgets ou bibliotecas de terceiros.

Quando não usar:

• Para erros esperados (como erros de API conhecidos).
• Dentro de manipuladores de eventos.
• Em erros que devem ser tratados de maneira específica e não genérica.
• Código assíncrono: Error Boundaries não capturam erros em operações assíncronas fora de componentes React, como setTimeout ou requestAnimationFrame. Para tratar erros em operações assíncronas dentro de componentes, você deve usar blocos try/catch.
• Renderização do lado do servidor
• Erros lançados no próprio Error Boundary.

Opcionais: 🔗

• Integre Error Boundaries a soluções de monitoramento de erros para rápida identificação e correção, voce pode integrar com Sentry ou Exceptionless por exemplo.
• Teste seus Error Boundaries para garantir que eles funcionem como esperado em diferentes cenários.

Bibliotecas de Terceiros: react-error-boundary 🔗

Enquanto os Error Boundaries nativos do React são poderosos, algumas bibliotecas de terceiros foram desenvolvidas para simplificar e enriquecer essa funcionalidade. Uma das mais populares é a react-error-boundary.

Principais benefícios:

API Simplificada: Com react-error-boundary, você pode criar um boundary de erro com uma simples função de fallback, sem a necessidade de criar uma classe componente, alem de oferecer diversas outras possibilidades, que nao irei tratar hoje.

exemplo com react-error-boundary:

import { ErrorBoundary } from 'react-error-boundary'

function FallbackComponent({ error }) {
  return <div>Ocorreu um erro: {error.message}</div>
}

<ErrorBoundary FallbackComponent={FallbackComponent}>
  <SeuComponente />
</ErrorBoundary>

Hooks e Utilitários Adicionais: A biblioteca oferece o hook useErrorHandler, que permite capturar e tratar erros dentro de componentes funcionais e funções personalizadas.

Reinicialização Automática: Com a propriedade onReset, você pode definir como o componente deve se reiniciar após um erro.