Sentry para React Native

npx expo install @sentry/react-native
npx @sentry/wizard@latest -i reactNative

{
  "dependencies": {
    "@sentry/react-native": "^6.0.0",
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

// app/_layout.tsx - debe ejecutarse antes de otros efectos secundarios de importaciones
import * as Sentry from "@sentry/react-native";
import { Stack } from "expo-router";
import * as Application from "expo-application";
import * as Updates from "expo-updates";
 
const nativeVersion = Application.nativeApplicationVersion ?? "0.0.0";
const buildNumber = Application.nativeBuildVersion ?? "0";
const release = `${nativeVersion}+${buildNumber}`;
const dist = Updates.updateId ?? buildNumber;
 
Sentry.init({
  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
  environment: process.env.EXPO_PUBLIC_APP_ENV ?? "development",
  release,
  dist,
  enableAutoSessionTracking: true,
  tracesSampleRate: 0.2,
  attachStacktrace: true,
  beforeSend(event) {
    // Elimina PII - nunca envíes correos electrónicos o tokens sin procesar
    if (event.user?.email) delete event.user.email;
    return event;
  },
});
 
function RootLayout() {
  return <Stack />;
}
 
export default Sentry.wrap(RootLayout);

// fragmento de eas.json
{
  "build": {
    "production": {
      "env": {
        "SENTRY_AUTH_TOKEN": "@sentry-auth-token",
        "SENTRY_ORG": "your-org",
        "SENTRY_PROJECT": "your-rn-app"
      }
    }
  }
}

# Después de que se complete la compilación EAS, los ganchos de sentry-expo / wizard suben:
# - Mapas de fuentes de Hermes (JS)
# - Símbolos de depuración para fotogramas nativos (dSYM de iOS, NDK de Android si se usa)
eas build --platform all --profile production

import { useEffect } from "react";
import { usePathname } from "expo-router";
import * as Sentry from "@sentry/react-native";
 
export function useSentryRouteBreadcrumb() {
  const pathname = usePathname();
 
  useEffect(() => {
    Sentry.addBreadcrumb({
      category: "navigation",
      message: pathname,
      level: "info",
    });
    Sentry.setTag("route", pathname);
  }, [pathname]);
}

export async function sentryFetch(input: RequestInfo, init?: RequestInit) {
  const start = Date.now();
  const url = typeof input === "string" ? input : input.url;
 
  try {
    const res = await fetch(input, init);
    Sentry.addBreadcrumb({
      category: "http",
      message: `${init?.method ?? "GET"} ${url}`,
      data: { status: res.status, durationMs: Date.now() - start },
      level: res.ok ? "info" : "warning",
    });
    return res;
  } catch (err) {
    Sentry.addBreadcrumb({
      category: "http",
      message: `${init?.method ?? "GET"} ${url} failed`,
      data: { durationMs: Date.now() - start },
      level: "error",
    });
    throw err;
  }
}

// src/observability/sentry.ts
import * as Sentry from "@sentry/react-native";
import * as Application from "expo-application";
import * as Updates from "expo-updates";
 
export function initSentry() {
  const version = Application.nativeApplicationVersion ?? "0.0.0";
  const build = Application.nativeBuildVersion ?? "0";
 
  Sentry.init({
    dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
    environment: process.env.EXPO_PUBLIC_APP_ENV,
    release: `${version}+${build}`,
    dist: Updates.updateId ?? build,
    enableAutoSessionTracking: true,
    enableNative: true,
    enableNativeCrashHandling: true,
    tracesSampleRate: __DEV__ ? 1.0 : 0.15,
    integrations: [
      Sentry.reactNativeTracingIntegration(),
    ],
  });
}
 
export function setSentryUser(userId: string | null) {
  if (userId) {
    Sentry.setUser({ id: userId });
  } else {
    Sentry.setUser(null);
  }
}
 
export function captureWithContext(error: unknown, context?: Record<string, unknown>) {
  Sentry.withScope((scope) => {
    if (context) scope.setContext("extra", context);
    Sentry.captureException(error);
  });
}

// app/_layout.tsx
import { useEffect } from "react";
import { Stack } from "expo-router";
import * as Sentry from "@sentry/react-native";
import { initSentry, setSentryUser } from "@/observability/sentry";
import { useSentryRouteBreadcrumb } from "@/observability/useSentryRouteBreadcrumb";
import { useAuth } from "@/features/auth/useAuth";
 
initSentry();
 
function RootLayout() {
  const { userId } = useAuth();
  useSentryRouteBreadcrumb();
 
  useEffect(() => {
    setSentryUser(userId);
  }, [userId]);
 
  return (
    <Sentry.ErrorBoundary fallback={<CrashFallback />}>
      <Stack />
    </Sentry.ErrorBoundary>
  );
}
 
function CrashFallback() {
  return null; // tu interfaz de recuperación
}
 
export default Sentry.wrap(RootLayout);

// Empareja con cierre de sesión de autenticación - limpia el alcance del usuario
// setSentryUser(null) al cerrar sesión - ver ../auth-session/mobile-auth-basics/

# Verifica que el lanzamiento exista en Sentry antes de enviar OTA
sentry-cli releases list | grep "1.4.2+42"

// Las sesiones comienzan automáticamente con enableAutoSessionTracking: true
// Terminan al fallar o en segundo plano más allá de sessionTrackingIntervalMillis (por defecto 30s)
 
Sentry.init({
  // ...
  enableAutoSessionTracking: true,
  sessionTrackingIntervalMillis: 30000,
});

Sentry.addBreadcrumb({
  category: "auth",
  message: "token_refresh_failed",
  level: "warning",
  data: { reason: "invalid_grant" }, // sin tokens sin procesar
});

Sentry.startSpan({ name: "load_feed", op: "ui.load" }, async () => {
  await fetchFeed();
});