Manejadores de Errores Globales

// src/bootstrap/installGlobalErrorHandlers.ts
// Importa esto una sola vez desde el punto de entrada de tu app (index.js / _layout.tsx) antes que otro código.
 
type GlobalHandler = (error: Error, isFatal?: boolean) => void;
 
declare const ErrorUtils: {
  getGlobalHandler(): GlobalHandler;
  setGlobalHandler(handler: GlobalHandler): void;
};
 
export function installGlobalErrorHandlers(report: (error: Error, meta: { isFatal: boolean }) => void) {
  const previous = ErrorUtils.getGlobalHandler();
 
  ErrorUtils.setGlobalHandler((error, isFatal = false) => {
    report(error, { isFatal });
    previous(error, isFatal);
  });
}

// app/_layout.tsx (raíz de Expo Router) - llama antes de renderizar proveedores
import { installGlobalErrorHandlers } from "@/bootstrap/installGlobalErrorHandlers";
import { Stack } from "expo-router";
 
installGlobalErrorHandlers((error, { isFatal }) => {
  console.error("[global]", isFatal ? "FATAL" : "no fatal", error);
  // crashReporter.captureException(error, { extra: { isFatal } });
});
 
export default function RootLayout() {
  return <Stack />;
}

// installGlobalErrorHandlers.ts - módulo de bootstrap completo
type GlobalHandler = (error: Error, isFatal?: boolean) => void;
 
declare const ErrorUtils: {
  getGlobalHandler(): GlobalHandler;
  setGlobalHandler(handler: GlobalHandler): void;
};
 
export type ErrorReport = {
  message: string;
  stack?: string;
  isFatal: boolean;
  kind: "global" | "unhandled-rejection";
};
 
const reports: ErrorReport[] = [];
 
export function getCapturedReports() {
  return [...reports];
}
 
function normalizeError(reason: unknown): Error {
  if (reason instanceof Error) return reason;
  return new Error(typeof reason === "string" ? reason : JSON.stringify(reason));
}
 
function record(error: Error, meta: { isFatal: boolean; kind: ErrorReport["kind"] }) {
  reports.push({
    message: error.message,
    stack: error.stack,
    isFatal: meta.isFatal,
    kind: meta.kind,
  });
  console.error(`[${meta.kind}]`, meta.isFatal ? "FATAL" : "no fatal", error.message);
}
 
export function installGlobalErrorHandlers() {
  const previous = ErrorUtils.getGlobalHandler();
 
  ErrorUtils.setGlobalHandler((error, isFatal = false) => {
    record(error, { isFatal, kind: "global" });
    previous(error, isFatal);
  });
 
  // Cinturón y tirantes: logging explícito de rechazo no controlado (Hermes / RN dev tooling también pueden enrutar estos)
  const g = globalThis as typeof globalThis & {
    onunhandledrejection?: (event: { reason?: unknown }) => void;
  };
 
  g.onunhandledrejection = (event) => {
    const error = normalizeError(event.reason);
    record(error, { isFatal: false, kind: "unhandled-rejection" });
  };
}
 
// --- Pantallas de demostración ---
import { useEffect, useState } from "react";
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 
installGlobalErrorHandlers();
 
function causeUnhandledRejection() {
  void Promise.reject(new Error("sincronización de facturación falló"));
}
 
function causeThrowInTimer() {
  setTimeout(() => {
    throw new Error("temporizador lanzado fuera de React");
  }, 0);
}
 
export default function App() {
  const [tick, setTick] = useState(0);
 
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
 
  const latest = getCapturedReports().slice(-3);
 
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>Manejadores de Errores Globales</Text>
      <Text style={styles.sub}>Reloj: {tick}s (app aún ejecutándose)</Text>
 
      <Pressable style={styles.btn} onPress={causeUnhandledRejection}>
        <Text style={styles.btnLabel}>Desencadenar rechazo no controlado</Text>
      </Pressable>
 
      <Pressable style={styles.btn} onPress={causeThrowInTimer}>
        <Text style={styles.btnLabel}>Desencadenar lanzamiento de temporizador</Text>
      </Pressable>
 
      <Text style={styles.section}>Últimos reportes capturados</Text>
      {latest.length === 0 && <Text style={styles.meta}>Ninguno aún - toca un botón arriba.</Text>}
      {latest.map((r, i) => (
        <View key={`${r.message}-${i}`} style={styles.card}>
          <Text style={styles.cardTitle}>
            [{r.kind}] {r.isFatal ? "FATAL" : "no fatal"}
          </Text>
          <Text style={styles.cardBody}>{r.message}</Text>
        </View>
      ))}
    </ScrollView>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 20, gap: 12 },
  title: { fontSize: 24, fontWeight: "800" },
  sub: { color: "#64748b" },
  section: { fontSize: 16, fontWeight: "700", marginTop: 8 },
  meta: { color: "#94a3b8" },
  btn: { backgroundColor: "#2563eb", padding: 14, borderRadius: 8 },
  btnLabel: { color: "#fff", fontWeight: "600", textAlign: "center" },
  card: { backgroundColor: "#f1f5f9", padding: 12, borderRadius: 8 },
  cardTitle: { fontWeight: "700", marginBottom: 4 },
  cardBody: { color: "#334155" },
});

// app/_layout.tsx - inicio del archivo, antes de componentes
import { installGlobalErrorHandlers } from "@/bootstrap/installGlobalErrorHandlers";
import * as Sentry from "@sentry/react-native";
 
Sentry.init({ dsn: process.env.EXPO_PUBLIC_SENTRY_DSN });
 
installGlobalErrorHandlers((error, { isFatal }) => {
  Sentry.captureException(error, { extra: { isFatal } });
});
 
export default function RootLayout() {
  return <RootProviders />;
}

// Límite de API - prefiere corregir en la fuente
export async function fetchBalance(): Promise<number> {
  try {
    const res = await fetch("/api/balance");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const json = (await res.json()) as { balance: number };
    return json.balance;
  } catch (error) {
    // Convierte a tipo Result o relanza a un estado de error de pantalla controlado
    throw error instanceof Error ? error : new Error("fetching de saldo falló");
  }
}
 
// Las tareas fire-and-forget aún deben manejar fallos
void syncAnalytics().catch((error) => {
  console.warn("sincronización de análisis falló", error);
});

type ReportFn = (error: Error, meta: { isFatal: boolean }) => void;
 
declare const ErrorUtils: {
  getGlobalHandler(): (error: Error, isFatal?: boolean) => void;
  setGlobalHandler(handler: (error: Error, isFatal?: boolean) => void): void;
};
 
export function installGlobalErrorHandlers(report: ReportFn): void {
  const previous = ErrorUtils.getGlobalHandler();
  ErrorUtils.setGlobalHandler((error, isFatal = false) => {
    report(error, { isFatal: !!isFatal });
    previous(error, isFatal);
  });
}
 
function normalizeReason(reason: unknown): Error {
  if (reason instanceof Error) return reason;
  return new Error(String(reason));
}