Error Boundaries em RN

import React, { Component, type ErrorInfo, type ReactNode } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
type Props = { children: ReactNode; onReset?: () => void };
type State = { hasError: boolean; message?: string };
 
export class ScreenErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };
 
  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, message: error.message };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("[ScreenErrorBoundary]", error, info.componentStack);
    // Encaminhe para o relator de falhas aqui (Sentry, etc.)
  }
 
  private reset = () => {
    this.setState({ hasError: false, message: undefined });
    this.props.onReset?.();
  };
 
  render() {
    if (this.state.hasError) {
      return (
        <View style={styles.fallback}>
          <Text style={styles.title}>Ocorreu um erro</Text>
          <Text style={styles.body}>Esta tela encontrou um erro inesperado.</Text>
          <Pressable onPress={this.reset} style={styles.button}>
            <Text style={styles.buttonLabel}>Tentar novamente</Text>
          </Pressable>
        </View>
      );
    }
    return this.props.children;
  }
}
 
const styles = StyleSheet.create({
  fallback: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 },
  title: { fontSize: 20, fontWeight: "700", marginBottom: 8 },
  body: { fontSize: 16, color: "#64748b", textAlign: "center", marginBottom: 20 },
  button: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 8 },
  buttonLabel: { color: "#fff", fontWeight: "600" },
});

import React, { Component, type ErrorInfo, type ReactNode, useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 
type BoundaryProps = {
  children: ReactNode;
  screenName: string;
  onNavigateHome?: () => void;
};
 
type BoundaryState = { hasError: boolean };
 
class RouteErrorBoundary extends Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { hasError: false };
 
  static getDerivedStateFromError(): BoundaryState {
    return { hasError: true };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error(`[${this.props.screenName}]`, error.message, info.componentStack);
  }
 
  private reset = () => this.setState({ hasError: false });
 
  render() {
    if (this.state.hasError) {
      return (
        <SafeAreaView style={styles.fallback} edges={["top", "bottom"]}>
          <Text style={styles.title}>Não foi possível carregar {this.props.screenName}</Text>
          <Text style={styles.body}>
            O restante do aplicativo ainda funciona. Tente novamente ou volte para a Home.
          </Text>
          <Pressable onPress={this.reset} style={styles.primary}>
            <Text style={styles.primaryLabel}>Tentar novamente</Text>
          </Pressable>
          <Pressable onPress={this.props.onNavigateHome} style={styles.secondary}>
            <Text style={styles.secondaryLabel}>Ir para Home</Text>
          </Pressable>
        </SafeAreaView>
      );
    }
    return this.props.children;
  }
}
 
/** Widget de demonstração que lança um erro quando a contagem é múltipla de 3 - simula um caminho de renderização ruim. */
function FlakyCounter() {
  const [count, setCount] = useState(0);
  if (count > 0 && count % 3 === 0) {
    throw new Error(`Render falhou na contagem ${count}`);
  }
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>Widget instável</Text>
      <Text style={styles.count}>{count}</Text>
      <Pressable onPress={() => setCount((c) => c + 1)} style={styles.primary}>
        <Text style={styles.primaryLabel}>Incrementar (trava a cada 3ª toque)</Text>
      </Pressable>
    </View>
  );
}
 
function FeedScreen({ onNavigateHome }: { onNavigateHome: () => void }) {
  return (
    <RouteErrorBoundary screenName="Feed" onNavigateHome={onNavigateHome}>
      <View style={styles.screen}>
        <Text style={styles.screenTitle}>Feed</Text>
        <FlakyCounter />
      </View>
    </RouteErrorBoundary>
  );
}
 
function HomeScreen() {
  return (
    <View style={styles.screen}>
      <Text style={styles.screenTitle}>Home</Text>
      <Text style={styles.body}>Você escapou de uma tela quebrada com segurança.</Text>
    </View>
  );
}
 
export default function App() {
  const [route, setRoute] = useState<"feed" | "home">("feed");
 
  return (
    <SafeAreaProvider>
      {route === "feed" ? (
        <FeedScreen onNavigateHome={() => setRoute("home")} />
      ) : (
        <HomeScreen />
      )}
    </SafeAreaProvider>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 20, backgroundColor: "#f8fafc" },
  screenTitle: { fontSize: 28, fontWeight: "800", marginBottom: 16 },
  card: { padding: 20, borderRadius: 12, backgroundColor: "#fff", gap: 12 },
  cardTitle: { fontSize: 18, fontWeight: "600" },
  count: { fontSize: 32, fontWeight: "700" },
  fallback: { flex: 1, justifyContent: "center", padding: 24, backgroundColor: "#fff" },
  title: { fontSize: 22, fontWeight: "700", marginBottom: 8 },
  body: { fontSize: 16, lineHeight: 24, color: "#64748b", marginBottom: 20 },
  primary: { backgroundColor: "#2563eb", padding: 14, borderRadius: 8, alignItems: "center" },
  primaryLabel: { color: "#fff", fontWeight: "600" },
  secondary: { marginTop: 12, padding: 14, alignItems: "center" },
  secondaryLabel: { color: "#2563eb", fontWeight: "600" },
});

// NÃO capturado - trate com try/catch dentro do manipulador
function BadButton() {
  return (
    <Pressable
      onPress={() => {
        throw new Error("Erro no manipulador");
      }}
    >
      <Text>Toque em mim</Text>
    </Pressable>
  );
}
 
// Capturado - lança durante a renderização
function BadRender({ value }: { value: string | null }) {
  if (!value) throw new Error("Valor ausente");
  return <Text>{value}</Text>;
}

// app/(tabs)/feed/_layout.tsx
import { Stack } from "expo-router";
import { ScreenErrorBoundary } from "@/components/ScreenErrorBoundary";
 
export default function FeedLayout() {
  return (
    <ScreenErrorBoundary screenName="Feed">
      <Stack screenOptions={{ headerShown: false }} />
    </ScreenErrorBoundary>
  );
}

// app/(tabs)/feed/index.tsx
import { ScreenErrorBoundary } from "@/components/ScreenErrorBoundary";
import { FeedScreenContent } from "@/features/feed/FeedScreenContent";
 
export default function FeedRoute() {
  return (
    <ScreenErrorBoundary screenName="Feed">
      <FeedScreenContent />
    </ScreenErrorBoundary>
  );
}

function ScreenErrorBoundary({ children, resetKey }: { children: ReactNode; resetKey?: number }) {
  // Passe key={resetKey} para o wrapper de filhos para forçar a remontagem no reset
  return <RouteErrorBoundary key={resetKey}>{children}</RouteErrorBoundary>;
}

import type { ErrorInfo, ReactNode } from "react";
 
type FallbackRender = (args: {
  error: Error;
  reset: () => void;
}) => ReactNode;
 
// ErrorInfo.componentStack é a pilha de componentes React - não o stack trace JS
function logBoundaryError(error: Error, info: ErrorInfo, screen: string) {
  const payload = {
    screen,
    message: error.message,
    componentStack: info.componentStack,
  };
  console.error(JSON.stringify(payload));
}