Error Boundaries - Capture erros de renderização na árvore de componentes e exiba uma UI de fallback

import { Component, type ErrorInfo, type ReactNode } from "react";
 
class ErrorBoundary extends Component<
  { children: ReactNode; fallback: ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };
 
  static getDerivedStateFromError(): { hasError: boolean } {
    return { hasError: true };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("ErrorBoundary caught:", error, info.componentStack);
  }
 
  render() {
    if (this.state.hasError) return this.props.fallback;
    return this.props.children;
  }
}
 
// Uso
<ErrorBoundary fallback={<p>Algo deu errado.</p>}>
  <RiskyComponent />
</ErrorBoundary>

import {
  Component,
  useState,
  useCallback,
  type ErrorInfo,
  type ReactNode,
} from "react";
 
// --- Error boundary completo com recuperação ---
 
interface ErrorBoundaryProps {
  children: ReactNode;
  fallback?: ReactNode;
  onError?: (error: Error, info: ErrorInfo) => void;
  renderFallback?: (props: {
    error: Error;
    reset: () => void;
  }) => ReactNode;
  resetKeys?: unknown[];
}
 
interface ErrorBoundaryState {
  error: Error | null;
}
 
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = { error: null };
 
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { error };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    this.props.onError?.(error, info);
  }
 
  componentDidUpdate(prevProps: ErrorBoundaryProps) {
    if (this.state.error && prevProps.resetKeys !== this.props.resetKeys) {
      // Se resetKeys mudou, tente a recuperação
      const changed = this.props.resetKeys?.some(
        (key, i) => key !== prevProps.resetKeys?.[i]
      );
      if (changed) this.reset();
    }
  }
 
  reset = () => {
    this.setState({ error: null });
  };
 
  render() {
    const { error } = this.state;
    const { children, fallback, renderFallback } = this.props;
 
    if (error) {
      if (renderFallback) {
        return renderFallback({ error, reset: this.reset });
      }
      return fallback ?? <p>Algo deu errado.</p>;
    }
 
    return children;
  }
}
 
// --- Uso com UI de fallback e recuperação ---
 
function UserProfile({ userId }: { userId: string }) {
  return (
    <ErrorBoundary
      resetKeys={[userId]}
      onError={(error) => {
        // Reportar para serviço de rastreamento de erros
        reportToSentry(error);
      }}
      renderFallback={({ error, reset }) => (
        <div className="p-6 bg-red-50 rounded-lg text-center">
          <h3 className="text-red-800 font-semibold">Falha ao carregar perfil</h3>
          <p className="text-red-600 mt-2">{error.message}</p>
          <button
            onClick={reset}
            className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          >
            Tentar Novamente
          </button>
        </div>
      )}
    >
      <ProfileContent userId={userId} />
    </ErrorBoundary>
  );
}
 
// --- Error boundaries granulares por seção ---
 
function DashboardPage() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <ErrorBoundary fallback={<WidgetError name="Receita" />}>
        <RevenueChart />
      </ErrorBoundary>
      <ErrorBoundary fallback={<WidgetError name="Usuários" />}>
        <UserStats />
      </ErrorBoundary>
      <ErrorBoundary fallback={<WidgetError name="Atividade" />}>
        <ActivityFeed />
      </ErrorBoundary>
    </div>
  );
}
 
function WidgetError({ name }: { name: string }) {
  return (
    <div className="p-4 border border-red-200 rounded bg-red-50 text-red-700">
      Widget {name} falhou ao carregar.
    </div>
  );
}

// Com react-error-boundary (biblioteca popular)
import { ErrorBoundary } from "react-error-boundary";
 
function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => queryClient.invalidateQueries()}
      resetKeys={[routeKey]}
    >
      <AppContent />
    </ErrorBoundary>
  );
}
 
function ErrorFallback({
  error,
  resetErrorBoundary,
}: {
  error: Error;
  resetErrorBoundary: () => void;
}) {
  return (
    <div role="alert">
      <p>Erro: {error.message}</p>
      <button onClick={resetErrorBoundary}>Tentar Novamente</button>
    </div>
  );
}

// Boundary de nível de página captura tudo
<ErrorBoundary fallback={<FullPageError />}>
  <Layout>
    {/* Boundaries de nível de seção isolam falhas */}
    <ErrorBoundary fallback={<SectionError />}>
      <Sidebar />
    </ErrorBoundary>
    <ErrorBoundary fallback={<SectionError />}>
      <MainContent />
    </ErrorBoundary>
  </Layout>
</ErrorBoundary>

// Exemplo de produção: Next.js error.tsx com logging, retry e fallback de recarregamento de página inteira
// Arquivo: app/error.tsx
'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Registrar em serviço de rastreamento de erros externo
    console.error('Erro na aplicação:', error);
    // reportToSentry(error);
  }, [error]);
 
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold">Algo deu errado</h2>
        {error.digest && (
          <p className="text-sm text-gray-500">ID do Erro: {error.digest}</p>
        )}
        <div className="flex gap-3 justify-center">
          <button
            onClick={reset}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Tentar novamente
          </button>
          <button
            onClick={() => window.location.href = '/'}
            className="px-4 py-2 border rounded hover:bg-gray-50"
          >
            Ir para a página inicial
          </button>
        </div>
      </div>
    </div>
  );
}