Sentry en React Native CLI: Guía Completa de Integración

Sentry es una plataforma esencial para el monitoreo de errores en aplicaciones móviles. En esta guía completa, aprenderás a configurar Sentry en React Native CLI, subir source maps, trackear navegación y optimizar el uso del plan gratuito.

📱 Tu App React Native
    │
    │ Ocurre un error ❌
    │
    ▼
🔍 Sentry Dashboard muestra:
    ✓ Stack trace completo
    ✓ Pantalla donde crasheó
    ✓ Screenshot del error
    ✓ Datos del usuario
    ✓ Historial de navegación

¿Por qué usar Sentry en React Native?

Cuando tu app está en producción, los errores son inevitables. Sentry te permite:

• 🐛 Capturar errores automáticamente - JavaScript y crashes nativos
• 🗺️ Ver código fuente original - Gracias a los source maps
• 📱 Saber en qué pantalla crasheó - Con integración de React Navigation
• 📊 Analizar performance - Tiempo de carga de pantallas
• 📸 Capturar screenshots - Del momento exacto del crash

Instalación

# Instalar Sentry
yarn add @sentry/react-native

# Ejecutar el wizard (configura automáticamente)
npx @sentry/wizard@latest -i reactNative

El wizard configura automáticamente:

• ✅ App.jsx con Sentry.init()
• ✅ android/app/build.gradle con el plugin de Sentry
• ✅ ios/ con scripts de Xcode
• ✅ Crea archivos sentry.properties

Configuración Básica

1. Inicialización en App.jsx

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'TU_DSN_DE_SENTRY',
  environment: __DEV__ ? 'development' : 'production',
  enableAutoSessionTracking: true,
  enableNativeCrashHandling: true,
  attachScreenshot: true, // Captura screenshots en crashes
  tracesSampleRate: __DEV__ ? 1.0 : 0.2, // 100% en dev, 20% en prod
  profilesSampleRate: __DEV__ ? 1.0 : 0.1,
});

export default __DEV__ ? App : Sentry.wrap(App);

Importante:

• En desarrollo usa 1.0 (100%) para ver todo
• En producción reduce a 0.1-0.2 para ahorrar cuota del plan gratuito

Source Maps: El Corazón de Sentry

SIN SOURCE MAPS ❌
Error at index.android.bundle:1:8234
(¿Qué archivo? ¿Qué línea? Imposible saber)

CON SOURCE MAPS ✅
Error at src/screens/HomeScreen.js:42
(¡Archivo y línea exactos!)

¿Qué son los Source Maps?

Imagina que tu código React Native:

// Tu código original (src/screens/HomeScreen.js:42)
function handlePress() {
  const user = getUserData();
  if (!user) {
    throw new Error("User not found");
  }
}

Se convierte en producción en:

// Minificado (index.android.bundle:1:8234)
function a(){const b=c();if(!b)throw new Error("User not found")}

Sin source maps, Sentry te muestra:

Error: User not found
  at a (index.android.bundle:1:8234)  ← ¿Qué es esto?

Con source maps, Sentry te muestra:

Error: User not found
  at handlePress (src/screens/HomeScreen.js:42:5)  ← ¡Perfecto!

Configuración Automática de Source Maps

En metro.config.js:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withSentryConfig } = require('@sentry/react-native/metro');

const config = {};

module.exports = withSentryConfig(mergeConfig(getDefaultConfig(__dirname), config));

En android/app/build.gradle:

apply from: new File(["node", "--print", "require.resolve('@sentry/react-native/package.json')"].execute().text.trim(), "../sentry.gradle")

sentry {
    uploadNativeSymbols = true
    includeNativeSources = true
}

Subida Manual de Source Maps

Si la subida automática falla, usa sentry-cli:

# 1. Login en Sentry CLI
sentry-cli login

# 2. Crear release
sentry-cli releases new 1.0.0-2 --org tu-org --project tu-proyecto

# 3. Subir source maps
sentry-cli sourcemaps upload \
  --org tu-org \
  --project tu-proyecto \
  --release 1.0.0-2 \
  --dist 2 \
  android/app/build/generated/sourcemaps/react/release/

# 4. Finalizar release
sentry-cli releases finalize 1.0.0-2 --org tu-org --project tu-proyecto

Tip: El --dist debe coincidir con el versionCode en build.gradle.

Tracking de Navegación

Navegación del usuario:
Login → Home → Checkout ❌

Sentry te muestra:
📍 Pantalla actual: "CheckoutScreen"
📍 Pantalla anterior: "HomeScreen"
🍞 Historial completo de navegación

Para que Sentry te diga en qué pantalla ocurrió el error, integra React Navigation:

En App.jsx:

import * as Sentry from '@sentry/react-native';

// Integración oficial con React Navigation
export const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true, // Mide performance de pantallas
});

Sentry.init({
  dsn: 'TU_DSN',
  integrations: [navigationIntegration],
  // ... resto de config
});

En tu NavigationContainer:

import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
import { navigationIntegration } from '../App';

export const navigationRef = createNavigationContainerRef();

function AppNavigator() {
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        navigationIntegration.registerNavigationContainer(navigationRef);
      }}
    >
      {/* Tu navegación */}
    </NavigationContainer>
  );
}

Ahora en Sentry verás:

CONTEXTS:
  navigation:
    current_screen: "LoginScreen"  ← ¡Aquí crasheó!
    params: { userId: 123 }

Probar la Integración

Agrega un botón temporal para forzar un crash:

import { TouchableOpacity, Text } from 'react-native';

// TEMPORAL - Eliminar después
<TouchableOpacity
  onPress={() => {
    throw new Error('🔥 Test crash - Sentry integration');
  }}
  style={{ padding: 15, backgroundColor: '#FF4444', borderRadius: 8 }}
>
  <Text style={{ color: 'white' }}>Test Sentry Crash</Text>
</TouchableOpacity>

Presiona el botón y ve a tu dashboard de Sentry. Deberías ver:

• ✅ El error con el mensaje
• ✅ El nombre del archivo y línea exacta
• ✅ La pantalla donde ocurrió
• ✅ Screenshot del momento del crash

Optimización del Plan Gratuito

El plan gratuito de Sentry incluye:

• 5,000 eventos de error/mes - Suficiente para apps pequeñas/medianas
• 10,000 transacciones de performance/mes
• Screenshots incluidos - No consumen cuota extra
• 1 GB de attachments

Estrategias de Optimización

1. Sample Rate Diferenciado

Sentry.init({
  // Errores siempre se capturan al 100% (no afectado por estos valores)
  tracesSampleRate: __DEV__ ? 1.0 : 0.2, // Solo 20% de transacciones en prod
  profilesSampleRate: __DEV__ ? 1.0 : 0.1, // Solo 10% de profiles en prod
});

2. Filtrar Errores No Críticos

Sentry.init({
  beforeSend(event, hint) {
    // Ignorar errores de red temporales
    if (event.exception?.values?.[0]?.value?.includes('Network request failed')) {
      return null; // No enviar a Sentry
    }
    return event;
  },
});

3. Usar Environments

Sentry.init({
  environment: __DEV__ ? 'development' : 'production',
  // En dashboard, filtra solo 'production' para ahorrar cuota
});

Errores Comunes y Soluciones

1. "Processing source maps" pero no se suben

Problema: El build muestra "Processing" pero los source maps no aparecen en Sentry.

Solución: Verifica que exista android/sentry.properties con tu auth token:

auth.token=TU_TOKEN_DE_SENTRY
defaults.org=tu-organizacion
defaults.project=tu-proyecto
defaults.url=https://sentry.io/

2. Crash en TextInput (NullPointerException)

Problema: Bug conocido de Android 14 con Samsung + KeyboardAwareScrollView.

Solución: Agrega estas props:

<KeyboardAwareScrollView
  enableResetScrollToCoords={false}  // Previene el crash
  keyboardShouldPersistTaps="handled"
>

3. No aparece el nombre de la pantalla

Problema: Sentry no muestra en qué pantalla ocurrió el error.

Solución: Asegúrate de haber configurado navigationIntegration como se mostró arriba.

Versionado para Producción

Cuando publiques en Google Play Store:

// android/app/build.gradle
android {
    defaultConfig {
        versionCode 4         // Incrementa esto cada vez
        versionName "1.0.1"   // Versión visible para usuarios
    }
}

Y sube los source maps correspondientes:

sentry-cli releases new 1.0.1-4 --org tu-org --project tu-proyecto
# ... subir source maps ...

Comandos Útiles de sentry-cli

# Ver releases
sentry-cli releases list --org tu-org --project tu-proyecto

# Ver info de un release
sentry-cli releases info 1.0.0-2 --org tu-org --project tu-proyecto

# Validar autenticación
sentry-cli login --validate

# Ver configuración actual
sentry-cli info

# Enviar evento de prueba
sentry-cli send-event -m "Test error" --release 1.0.0-2

Mejores Prácticas

1. Contexto de Usuario

Agrega información del usuario para facilitar el debugging:

Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.username,
});

// Limpiar al hacer logout
Sentry.setUser(null);

2. Tags Personalizados

Sentry.setTag('payment_method', 'credit_card');
Sentry.setTag('user_type', 'premium');

3. Breadcrumbs Personalizados

Sentry.addBreadcrumb({
  category: 'payment',
  message: 'User initiated payment',
  level: 'info',
  data: { amount: 100, currency: 'USD' },
});

4. Capturar Excepciones Manejadas

try {
  await processPayment();
} catch (error) {
  Sentry.captureException(error, {
    tags: { payment_step: 'processing' },
    contexts: { payment: { amount: 100 } },
  });
  // Mostrar mensaje al usuario
}

Tipos de Errores que Sentry Captura

1. Errores de JavaScript

throw new Error('Something went wrong');
// Sentry lo captura automáticamente

2. Crashes Nativos (Android/iOS)

NullPointerException (Android)
Fatal Exception: NSInvalidArgumentException (iOS)

3. Errores de Librerías Externas

Error in react-native-maps
Error in @react-navigation/native

Sentry captura TODO, y en el stack trace verás:

• Líneas de tu código: src/screens/HomeScreen.js:42
• Líneas de librerías: node_modules/react-native/...

Monitoreo en Producción

Una vez en producción, revisa regularmente:

1. Dashboard de Issues - Nuevos errores
2. Release Health - Crash-free rate por versión
3. Performance - Transacciones lentas
4. Alerts - Configura notificaciones por Slack/Email

Conclusión

Sentry es una herramienta esencial para cualquier app React Native en producción. Con esta configuración:

• ✅ Capturas todos los errores (JS y nativos)
• ✅ Ves código fuente original (gracias a source maps)
• ✅ Sabes en qué pantalla crashea la app
• ✅ Tienes screenshots del momento del error
• ✅ Optimizas el plan gratuito para no pasarte de cuota

Siguientes pasos:

1. Integra Sentry en tu proyecto
2. Configura source maps
3. Prueba con un crash intencional
4. Configura alertas para tu equipo
5. ¡Duerme tranquilo sabiendo que Sentry vigila tu app! 😴

Recursos Adicionales

• Documentación oficial de Sentry
• React Navigation Integration
• Sentry CLI Reference
• Source Maps Troubleshooting

---

¿Te resultó útil esta guía? ¡Compártela con otros desarrolladores React Native! 🚀