Límites de Error en 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);
    // Reenvía al reportero de crashes aquí (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}>Algo salió mal</Text>
          <Text style={styles.body}>Esta pantalla encontró un error inesperado.</Text>
          <Pressable onPress={this.reset} style={styles.button}>
            <Text style={styles.buttonLabel}>Reintentar</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}>No pudimos cargar {this.props.screenName}</Text>
          <Text style={styles.body}>
            El resto de la aplicación aún funciona. Reintentar o volver a Inicio.
          </Text>
          <Pressable onPress={this.reset} style={styles.primary}>
            <Text style={styles.primaryLabel}>Reintentar</Text>
          </Pressable>
          <Pressable onPress={this.props.onNavigateHome} style={styles.secondary}>
            <Text style={styles.secondaryLabel}>Ir a Inicio</Text>
          </Pressable>
        </SafeAreaView>
      );
    }
    return this.props.children;
  }
}
 
/** Widget de demostración que lanza cuando count es múltiplo de 3 - simula una ruta de renderizado defectuosa. */
function FlakyCounter() {
  const [count, setCount] = useState(0);
  if (count > 0 && count % 3 === 0) {
    throw new Error(`Render failed at count ${count}`);
  }
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>Widget inestable</Text>
      <Text style={styles.count}>{count}</Text>
      <Pressable onPress={() => setCount((c) => c + 1)} style={styles.primary}>
        <Text style={styles.primaryLabel}>Incrementar (se cuelga cada 3er 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}>Inicio</Text>
      <Text style={styles.body}>Escapaste de una pantalla rota de forma segura.</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" },
});

// NO capturado - maneja con try/catch dentro del manejador
function BadButton() {
  return (
    <Pressable
      onPress={() => {
        throw new Error("Handler throw");
      }}
    >
      <Text>Tócame</Text>
    </Pressable>
  );
}
 
// Capturado - lanza durante el renderizado
function BadRender({ value }: { value: string | null }) {
  if (!value) throw new Error("Missing value");
  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 }) {
  // Pasa key={resetKey} al envoltorio de hijos para forzar remontaje en reset
  return <RouteErrorBoundary key={resetKey}>{children}</RouteErrorBoundary>;
}

import type { ErrorInfo, ReactNode } from "react";
 
type FallbackRender = (args: {
  error: Error;
  reset: () => void;
}) => ReactNode;
 
// ErrorInfo.componentStack es la ruta de árbol de componentes React - no la traza de pila JS
function logBoundaryError(error: Error, info: ErrorInfo, screen: string) {
  const payload = {
    screen,
    message: error.message,
    componentStack: info.componentStack,
  };
  console.error(JSON.stringify(payload));
}